DESIGN · SYSTEM
SecondBrain · Foundation
PHASE · 1theme: dark
FOUNDATION LAYER · v0.1

Apple Silicon meets YC paper

Dual-theme token system, six core primitives, one motion language. Everything downstream — hero, dashboard, wiki, ingest — will be assembled from these building blocks.

01 · type scale

Typography

Display · SecondBrain
H1 · Your second brain, wired.
H2 · Ingest anything. Query everything.
H3 · Compiled truth, timeline preserved.
H4 · Source of record for knowledge work.
H5 · Section label
H6 · Eyebrow caption

Body · The quick brown fox jumps over the lazy dog. Ligatures render cleanly, rag is balanced, letter-spacing tightens as size grows. We pair Inter for UI with a mono (JetBrains) for data-dense moments.

Body-SM · secondary rank, used for dense lists and captions in context.

CAPTION · METADATA · TIMESTAMPS

mono · const truth = compile(timeline);

02 · palette

Colour tokens

--bg
Background
--surface
Surface
--surface-2
Surface · elevated
--border-bright
Border · bright
--accent
Accent
--accent-bright
Accent · bright
--accent-deep
Accent · deep
--emerald
Emerald · signal
03 · materials

Surfaces

.glass
Glassmorphism

Blurred backdrop + hairline border. Used for floating panels and overlays.

.metallic
Apple Silicon

Brushed gradient + inner highlight. Reserved for command-center elements.

.outline
Editorial

Transparent with a crisp border. Used in YC-paper context for lists.

04 · actions

Buttons

Primary
Metallic
Ghost / Soft / Link
Icon
Disabled
05 · status & taxonomy

Badges

Tone
NeutralAccent · liveSuccessWarningDangerInfoViolet
Node types (graph-synced)
conceptpersonorganizationentitytoolsynthesispatternevent
06 · forms

Inputs

.vault
07 · motion primitives

Glow wrap + dotted glow

Always-on glow

active

Conic-gradient border rotates once per 22s. Reserved for CTAs and the knowledge-graph selection ring.

--orbit-speed · 22s

Hover-triggered glow

hover

Same primitive without always. Used for card grids where we want engagement without distraction.

.glow-wrap
DOTTED · GLOW · SECTION

Hero-ready backdrop

Radial plume + masked dot grid. Drop any hero, dashboard shell, or empty state on top.

08 · animations

Motion library

Float
.float
Pulse
.pulse-dot
Fade up
.fade-up
Shimmer
.gradient-text
REVIEW · CHECKLIST

Ready for Phase 2?

Toggle dark ↔ light using the switch up top. If the two themes feel correct — metallic black for dark, cream paper for light — and the primitives read as premium, Phase 2 (Landing Hero with orbit animation) is unlocked.