The transparent mark — no background chip. The 'd' is an outline path, so it renders with no font dependency. Use surface='dark' on ink shells. For the chipped favicon / app-icon treatment, see App icons below.

The mark on a full-bleed rounded chip — the favicon / app-icon treatment, with equal dark and light variants. Below 32px the scribble compresses, so favicons use a simplified stamp + bold 'd'. The full set (SVG, favicons, simplified 16px, maskable, 300px square, 16–1024px PNG) lives in /public/brand/{dark,light}/.

dark 64

light 64

dark 40

light 40

maskable (square)

favicon 32 · dark

favicon 32 · light

favicon 16

Primitive stone + cream scales, semantic aliases, shell fills/borders (composited on ink-raised), on-dark / on-paper opacity ramps, accents, scrims. Live values — edits via ⌘ Tokens propagate here instantly.

Exhaustive variant matrix on cream. Primary = ink · secondary = paper · tertiary = text-only.

Same matrix on ink-raised. Paper and tertiary pick up shell chrome via surface='dark'.

size: md (40px, default) · sm (32px). variant: default (subtle fill) · outline. active and disabled supported.

size: md (40px, default) · sm (32px).

size: sm (26px min) · md (36px min). Default = secondary solid pen. ghost = dashed placeholder (new folio). active inverts colors. Icon + label: compose SlotIcon as a child — md 14px · stroke 1.5 · gap 6px (--chip-icon-size-md).

One component for chat, refine, and modal prompts. surface: dark · light. embedded=true strips the input's own chrome when it lives inside a parent shell — see New sketch modal.

Textarea for prompts · as='input' for single-line fields (email). Hover darkens border; focus snaps to ink.

Click a trigger to open. surface: dark · paper. Dark panels use --ink-float (L3, stone-700) over --ink-raised shell. size='sm' = compact toolbar (32px, same fs-md + 16px icons). variant='tertiary' on iterator header. Single-select rows show a trailing check (chrome.menu-check).

Highest floating layer — spotlight float shadow (4×8), backdrop scrim, radius xl. Paper register for prompts on cream; ink register uses --ink-float (L3, stone-700) over --ink-raised shell.

DelibleProgress: value 0–100, or null for the indeterminate hatch. Toasts are triggered by ordinary buttons — no separate overlay trigger style.

Full-screen error for a sketch that fails to compile. Shown here inside a fixed-size relative frame.

Header balance pill (reads the WalletProvider context). Click opens the top-up modal.

Sketch font picker on the iterator header. Compact sm trigger — 32px height, fs-md label, 16px icon. Stateful here.

Every product-chrome icon today is a custom inline SVG. Pick Feather replacements at feathericons.com — paste names in the bulk box or per row. Copy mappings when done and send them in chat to wire up.

Project-grid tiles. SketchTile renders a live blackchalk thumbnail in an iframe (sample screen below).

Floating bar shown when sketches are multi-selected. It is position:fixed in the live grid; here a transformed wrapper traps it inside this frame.

Same brand header + auth form as /signin. Copy swaps for the credits interrupt.

Decorative dot texture, absolutely positioned over a relative parent.

Primary product nav. Embedded preview with a mock signed-out user; in production this fills the viewport inside .delible-app-shell.

L3 composed modals built on DelibleModal — interactive specimens for the real product flows.

Full-screen compositions that require live session data and context — they can't render in isolation, so here they're documented with their live routes rather than mocked (keeping the no-fake-mock rule).