Personal design language — Nº 001
Exactly one ember-colored element per composition — the full stop counts. A repeated ember sequence (a flip-book, a marquee) is one ember event. The ember glow is the language's only sanctioned blur.
| Step | Size | Use |
|---|---|---|
| hero | clamp(3.6rem → 9rem) | One per site. The shouting. |
| 5xl | clamp(3rem → 5rem) | Posters, page titles |
| 4xl–2xl | 1.45 → 3.4rem | Section heads |
| xl–lg | 1.125 → 1.4rem | Subheads, lead paragraphs |
| md | 1rem | Body |
| sm–xs | 0.75 → 0.875rem | Labels, metadata, tables |
3px ink line, only where structure exists — a frame, a boundary, a spine.
Solid offset shadow at 3/6/10px. Depth from position, not fog. Hover this.
Exactly one ember element per composition — often the full stop.
Strict columns — one element rotates, bleeds, or jumps scale. Once.
Dates, units, indices, coordinates in azure — cold data, an instrument.
The human hand: one pink serif-italic aside, small, at most once per piece.
Geometry declares intent: GIVE informs (sharp top, open bottom), ASK requests (an envelope), SPEAK announces (a tag), PRESS acts (a keycap).
A gradient is an event, not wallpaper. One deliberate conflict per composition — here, the surface burns while the word glows.
Screens animate; paper yearns. Echo trails, flip-book frames, momentum bars — proof that the object wants to move even when it can't.
A side wall, not a diagonal shadow: hover for the motion ghost, press and the cap sinks the full wall height and lands.
Chips are punched tickets. Callouts are tags that speak.
Anything that asks is an envelope: airmail stripes, an unsealed flap, sky for the air inside. It wants to be sent.
| Token | Value | Use |
|---|---|---|
| --keycap-wall | 6px | how far a key sinks |
| --conflict-gradient | ink → ember | the one gradient event |
| --glow-ember | 0 0 14px + 0 0 40px | the sanctioned blur |
Keycaps in a row, standing on the rule. The chosen tab is pressed flush and turns to ink. Arrow keys move between them.
A toggle is a keycap in a sunk slot: it slides, sinks while held, and the slot inverts to ink when on. The header's mode switch is one.
A status announces, so it speaks: a tag with a semantic mouth. Color carries meaning here — never decoration, never heat.
A box is legitimate only for a genuine object — and it takes the GIVE posture: sharp top, open bottom.
This is the only card on the page. It gives, because it informs. Everything else is rooms made of rules.
24-unit grid, 2px live margin. A 2.5 stroke — the heavy rule at icon scale — with square caps and miter joins: no soft ends. Postures carry over (give rounds its bottom, ask is the envelope, speak is the tag, press stands on its wall). Anything that moves carries a trail of speed dashes. Icons paint in currentColor; only the ember mark fills.