desingularity vol · 02 · primitives
design system · v0.1
volume 02 · primitives

The atoms
of every screen.

Every component below is real. Every state works. Hover, focus, click, type — the system responds.

01 · buttons

Six buttons.

primary · ghost · outline
text · danger · icon
idle → hover → active
01.00 All variants · idle ↔ hover left · resting / right · hovered
variant
idle
hovered
primary
ghost
outline
text
danger
icon
01.01 Primary · paprika fill --btn-primary · e-phi · 240ms
01.02 Ghost · hairline + reveal edge hover · padding shifts left
01.03 Outline · neutral hover · borders to paprika
01.04 Text · underline reveal underline · scaleX 0.382 → 1
01.05 Danger · destructive only paprika-dark · use sparingly
01.06 Icon · shadow-gap square 36px · 1px hairline · paprika inner ring on hover
02 · inputs

Twelve inputs.

underline · boxed · select
textarea · check · radio · toggle
search · slider · file · date · otp
02.01 Underline · the default focus → paprika
verified
— required
02.02 Boxed · mono fields technical · for code, tokens, ids
02.03 Select · dropdown native, themed
02.04 Textarea long form · derivation notes
02.05 Checkbox · Radio paprika check on fill
02.06 Toggle · Slider 240ms · e-phi
02.07 Search · mono field ⌕ · paprika · left-aligned
03 · marks

Tags, badges, avatars.

small marks that label · count · identify
03.01 Tags · four variants outline · solid · muted · dot
rhythm proportion shadow gap surface tension active φ archived v0.1 composing live
03.02 Number badges · counters paprika · for counts only
99+ draft
03.03 Avatars · three sizes no rounded corners · initials only
tk tk tk de
a b c +5
04 · cards

Four cards.

term · project · article · stat
each is one φ-rectangle
edges do the speaking
04.01 Term · vocabulary tile hover · paprika fill + border
term · 0012

Wainscoting

rhythm · tension · wood
term · 0308

Coffered

rhythm · ceiling · φ
term · 1024

Herringbone

rhythm · floor · 45°
term · 1287

Enfilade

alignment · sequence
04.02 Project · viewport top + body paprika · 2px top edge · hover lifts -4px
residence · dubai

The Enfilade House

A sequence of aligned thresholds. Proportion at φ, rhythm at 5, grazing light from the south.

hospitality · kyoto

Low Chamber

Tatami proportions, shadow-gap edges, a single reveal at the entry threshold.

commercial · mumbai

Boiserie Room

Wood-linear rhythm, horizontal tripartition, diffuse daylight across the long wall.

04.03 Article · left reveal 2px left edge · scaleY 0.382 → 1 on hover
essay · 04

Composed, not designed.

r · ito06 min
manifesto

The vocabulary is finite.

desingularity04 min
paper · v0.1

Twenty atoms, three mirrors, 1,864 terms.

labs14 min
04.04 Stat · paprika reveal left 2px left edge · big numeral · mono label
vocabulary 1,864 terms · derived
atoms 20± constraint primitives
mirrors 3 cultural · material · audience
depth n = 4 average derivation chain
05 · overlays

Tooltips, popovers, menus.

all working · hover / click
--d-flick · e-phi
05.01 Tooltip · hover 240ms · always above
Inspect atoms · ⌘ I Open inspector composing currently · 4 atoms
05.02 Popover · click opens · stays · click outside to close
Atom · rhythm
spatial pattern of repetition.
count · 1,247 derived terms
depth · 1 to 8
Display
05.03 Dropdown menu grouped · keyboard-navigable
05.04 Command palette · ⌘ K global · everywhere
Press K from anywhere in the system. Or click below.
behaviors
⌘ K open · Esc close · ↑ ↓ navigate · select
search across · volumes · sections · theme · all live
06 · states

Loading, empty, error.

the four corners between content
and absence
loading
composing
skeleton
empty
No terms yet.
start composing — every derivation begins with one atom
error
!
Derivation stalled.
depth = 8 reached without convergence
07 · data

Tables, key-value.

no zebra · no border-collapse-headache
just hairlines and rhythm
07.01 Term table hairline rows · paprika header underline
id term atoms depth state
0012 Wainscoting rhythm · tension · wood n = 4 live
0308 Coffered rhythm · ceiling · φ n = 6 active
1024 Herringbone rhythm · floor · 45° n = 3 draft
1864 Boiserie wood-linear · tripartition n = 5 archived
07.02 Key-value · inspector row serif label · mono value
Spatial rhythm 950 mm
Surface tension 3mm reveal
Proportion 1 : 1.618
Material logic wood-linear
Mirror config georgian → victorian