Graphite Blueprint

Setting a system up keeps its whole spec (design-system/agent.md) and tokens in your project, and every later screen is built from that copy. Updates here never restyle a project on their own — ask your agent to update and it applies only what changed since your copy.

1. 2026-10-19current

   Graphite Blueprint now fits any product. The rules that were written around example screens are rewritten for the kind of screen they describe, so a CRM, a booking flow or a docs site gets the same design as a store or a dashboard. The look itself is unchanged.

   Details (7)

   • Page close: a page that ends in one final action for the reader (subscribe, sign up, contact, buy) ends in one two-sentence, two-tone statement over the dot field, with the mono label above it and the block's own form under it. A form that is a screen's main content (a checkout, a settings form) keeps its plain section heading; a page without a final action gets no page close.
   • Plate captions: the item's number plus one attribute it really has that nothing beside the plate already shows (a property from its own data first, its kind name last); never a status, a name or a repeated value.
   • Dashboards: the main chart sits on a quiet stage and panels in a row end level, by stretching the shorter one or capping the longer one with a link to the rest; no fixed set of parts.
   • Settings: only form inputs, switches and a live preview stop at the form width; every other block, even a one-row card, ends at the controls column's right edge. Choice cards draw one slab per rank, for any number of choices.
   • Tables on phones: the pinned column is the one a person needs to act on or judge the row by; examples are neutral.
   • Featured items take a mono label, not a second large headline; item grids and item detail pages are described by what any item has, not by one kind of shop.
   • Counts and result lines are mono labels everywhere in the product; the ordinal dot meter shows any 1 to 5 level with its value.
2. 2026-10-18

   Phone tables, blueprints and section openers are steadier. On phones a table keeps only its first and pinned columns, so nothing runs under the pin; blueprints keep their size in rows and pairs; every content section opens the same way, and settings groups, hairlines and closings are built into the recipes instead of described.

   Details (9)

   • Table, small screens: under breakpoint.sm only the first and the pinned column show; the first cell holds at most two single-line lines ending in an ellipsis and every row has the same number of lines (was: secondary columns hidden by name, so others could show under the pin). The pin's head is a short visible mono word; a badge naming the row shows its dot only, its label kept for screen readers; first and last cells sit on the section's edges.
   • Table, sort: the chevron shows only on the sorted column, before the label in right-aligned heads, so the label ends on the cells' edge.
   • Isometric blueprint: new pair() and blueprint() helpers; sizes are rendered CSS pixels; a row of three draws each at size.blueprintLg (now 300px, was 280px) or its full column, never under size.blueprintMd; captions and titles sit level across a row.
   • Split opener: every content section opens with the full opener (h2 and description), never a filter or count in its place; prose sits space.32 under its opener (was space.96); a content home's featured block is a mono "FEATURED" label over its plate; the opener link ends in "→" ("↓" for an in-page anchor).
   • Hairlines: never two hairlines with nothing between them, at any distance (was: under 32px apart).
   • Typography: the closing statement is clamp(h2, 6vw, display), two short sentences that break only between them; counts and result lines are uppercase mono labels in every app; headings balance and paragraphs wrap pretty; fonts are self-hosted, never from a font CDN.
   • Spacing and layout: settings groups are space.48 apart, built into the recipe CSS; one left edge per page (articles narrow from the right instead of centering); a form keeps its error summary directly above its actions and moves focus to the first invalid field.
   • Spec plate: the first eight items use all eight kinds, and no kind repeats in a grid row, a grid column or between neighbours; a caption fact is at most 18 characters and wraps rather than truncates.
   • Navigation: a detail page keeps its section marked; phone navigation wraps instead of clipping or scrolling.
3. 2026-10-17

   First release of Graphite Blueprint: a near-black instrument panel. Graphite greys stacked in five steps, 1px hairlines, pill controls and one indigo kept for focus and selection. The product's own interface is the main image, set on a softly lit stage; work in progress speaks in a 5x5 dot matrix and a passing shimmer, and explanations are drawn as isometric hairline blueprints with mono figure captions. Dark is the default, with a light mode in cool neutral greys.

   Details (5)

   • Ten defining rules and a Never list: the ground covers most of every screen, text in four steps of grey, indigo at most three times a screen, hairlines instead of shadows, pills and 8px panels.
   • Six signature recipes: the spotlit stage, the dot-matrix status glyph, isometric blueprints with marching connectors, spec plates for items without a picture, the working shimmer, and the split section opener.
   • Motion in two speeds: state changes in 100 to 160ms, slow stepped loops only for work in progress, and every loop frozen on a readable frame under reduced motion.
   • Layout rules for dense screens: side-by-side panels end together, tables keep a pinned first column on small screens, and frames never nest more than two deep.
   • 13 specified components with designed states, Inter and Geist Mono (both openly licensed).