๐Ÿงต quilt / the dreamland design system
v0 ยท 72 tokens ยท 23 brand marks ยท 3 orgs ยท 10 ascii ยท dark

Tokens stitched into atoms, molecules, organisms. Source of truth = tokens/*.json (DTCG) โ†’ quilt.css. Everything below is rendered by Quilt โ€” this page is the management surface.

Foundations ยท Color (semantic)

button

button-primary-bg
#1d2820
button-primary-border
#c8e6c9
button-primary-fg
#c8e6c9
button-danger-fg
#e88a8a
button-danger-border
#2b1c1c

credrow

credrow-hover
#1c1f24

bg

bg-base
#0c0d10
bg-raised
#15171b
bg-hover
#1c1f24

icon

icon-tile
#e8e9ea

border

border-default
#2a2d33
border-focus
#3d4148

text

text-primary
#e8e9ea
text-muted
#7d8089

accent

accent-fg
#c8e6c9
accent-bg
#1d2820

danger

danger-fg
#e88a8a
danger-bg
#2b1c1c

status

status-pass
#7dd97d
status-warn
#e7c884
status-warn-bg
#2a2414
status-fail
#e88a8a
status-unknown
#6a6d74

diagram

diagram-container
#15171b
diagram-container-2
#0c0d10
diagram-container-label
#7d8089
diagram-edge
#3d4148
diagram-edge-label
#6a6d74
diagram-edge-active
#c8e6c9

Foundations ยท Color (primitives)

ink

ink-0
#0c0d10
ink-1
#15171b
ink-2
#1c1f24
ink-3
#2a2d33
ink-4
#3d4148
ink-mid
#6a6d74
ink-soft
#7d8089
ink-bright
#e8e9ea

mint

mint-soft
#c8e6c9
mint-bright
#7dd97d
mint-deep
#1d2820

rose

rose-soft
#e88a8a
rose-deep
#2b1c1c

amber

amber-soft
#e7c884
amber-deep
#2a2414

Foundations ยท Typography

h1 / 28Dreamland
h2 / 21Stitched together
h3 / 16Atoms, molecules, organisms
base / 14The quick brown fox jumps over the lazy dog.
body / 13The quick brown fox jumps over the lazy dog.
mono / 13sec get personal fal-key
micro / 11SECTION LABEL

Foundations ยท Spacing & Radius

space scale (4px base)

radius

Atoms

button

input ยท textarea ยท label

status โ€” dot & pill

pass fail unknown pass fail untested

Molecules

cred-row

fal-key
figma-token
notion-api-key

Organisms

entity-col

sandman 3
fal-key
notion-api-key
figma-token

toast

credential saved โœ“

ASCII icons ยท Sandman universe

Box+block marks at 3 scales. Resting frame is static (works with no JS / reduced-motion); JS hydrates an ambient loop. Generated from ascii/*.json.

ambient loop ยท respects reduced-motion
cloud ยท Cloud โ€” the Architect
dreamland ยท Dreamland โ€” the vault
moon ยท Sandman โ€” the Man on the Moon
moongate ยท Moongate โ€” the biometric door
nightstand ยท Nightstand โ€” the dashboard
passport ยท Passport โ€” credentials
quilt ยท Quilt โ€” the design system
sandcastle ยท Sandcastle โ€” the Mac mini host
sandy ยท Sandy โ€” the agent
universe ยท Universe โ€” the map

Brand marks ยท Nightstand platforms

Official vectors for the credential platforms โ€” color (light chip) + monochrome (dark chip). Full set & logos in icons/.

asana
asana
asana
aws
aws
aws
cloudflare
cloudflare
cloudflare
figma
figma
figma
gemini
gemini
gemini
github
github
github
gmail
gmail
gmail
godaddy
godaddy
godaddy
google
google
google
google-ads
google-ads
google-ads
google-analytics
google-analytics
google-analytics
google-calendar
google-calendar
google-calendar
google-drive
google-drive
google-drive
google-search-console
google-search-console
google-search-console
hubspot
hubspot
hubspot
meta
meta
meta
notion
notion
notion
plausible
plausible
plausible
posthog
posthog
posthog
simplefin
simplefin
simplefin
slack
slack
slack
stripe
stripe
stripe
youtube
youtube
youtube

Membership orgs

Official marks for the orgs Bennett belongs to โ€” color (light chip) + white (dark chip). Sourced from each org's own brand assets.

margin
margin
margin
openmined
openmined
openmined
ratio
ratio
ratio

Proposals ยท to decide

Candidates surfaced by the Nightstand audit โ€” render-to-decide. Hand-authored here; nothing below is a real token yet.

proposed ยท not yet canonical

1 ยท Spacing scale โ€” reconcile

Mint = current Quilt 4px steps. Gold = off-scale values Nightstand actually uses (with usage counts). Add half-rungs (2/6/10/14) or tighten the UI to the scale?

space-1 ยท 4
space-2 ยท 8
space-3 ยท 12
space-4 ยท 16
space-5 ยท 24
space-6 ยท 32
space-7 ยท 48
2 ยท off-scale ร—8
6 ยท off-scale ร—5
9 ยท off-scale ร—5
10 ยท off-scale ร—6
14 ยท off-scale ร—5

2 ยท Type scale โ€” add a nano (10px) rung?

Nightstand uses 10px (tiny labels/counts) and a stray 15px. Add size-nano, and snap 15 โ†’ 14 or 16?

nano / 10 ?The quick brown fox โ€” proposed
micro / 11The quick brown fox
small / 12The quick brown fox
body / 13The quick brown fox
base / 14The quick brown fox
15 strayThe quick brown fox โ€” snap me
h3 / 16The quick brown fox
h2 / 21The quick brown
h1 / 28The quick

3 ยท Pill โ€” outline vs subtle-fill

Three pill variants exist in Nightstand (status / pc-pill / ip-pill). Pick one canonical pill: outline or subtle-fill, across states.

outlineneutralpasswarnfail
fillneutralpasswarnfail

4 ยท Status tint backgrounds

Promote the rgba(โ€ฆ,0.1) tints to tokens, completing the set (warn-bg already exists).

status-pass-bg
status-warn-bg โœ“
status-fail-bg
status-unknown-bg

5 ยท Card variants

Cards are reinvented everywhere. One primitive with these variants?

base
raised + border
interactive
hover me
nested-recessed
sits inside a card

6 ยท Scrim + elevation

Tokenize the modal backdrop (overlay-scrim) + a menu/drawer shadow.

the surface behind