",
"css": ".ds-box { background: var(--rst-surface, #ffffff); border: 1px solid var(--rst-line, #e5e7eb); border-radius: var(--rst-radius, 8px); color: var(--rst-text, #1a1d21); font-size: 0.875rem; line-height: 1.6; margin: 0; padding: 1.1rem 1.25rem; } .ds-box > :first-child { margin-top: 0; } .ds-box > :last-child { margin-bottom: 0; } .ds-box-head { align-items: baseline; display: flex; gap: 1rem; justify-content: space-between; margin: 0 0 0.5rem; } .ds-box-head h2 { color: var(--rst-text, #1a1d21); font-size: 0.875rem; font-weight: 600; margin: 0; } .ds-box-foot { border-top: 1px solid var(--rst-line, #e5e7eb); color: var(--rst-text-muted, #4b5563); font-size: 0.78125rem; margin-top: 1rem; padding-top: 0.75rem; }"
},
{
"name": "Navigation Rail",
"kind": "nav",
"refersTo": null,
"description": "The sidebar shell's rail. The current item is marked by three signals at once — tint, colour and weight — plus aria-current in the markup.",
"html": "",
"css": ".ds-nav { display: flex; flex-direction: column; gap: 0.1rem; inline-size: 220px; padding: 0.5rem; } .ds-nav a { border-radius: var(--rst-radius-sm, 6px); color: var(--rst-text-muted, #4b5563); display: block; font-size: 0.875rem; padding: 0.4rem 0.6rem; text-decoration: none; } .ds-nav a:hover { background: var(--rst-surface-2, #f6f7f8); color: var(--rst-text, #1a1d21); } .ds-nav a[aria-current] { background: var(--rst-accent-soft, #eef3fe); color: var(--rst-accent, #2464e0); font-weight: 600; } .ds-nav a:focus-visible { outline: 2px solid var(--rst-accent, #2464e0); outline-offset: 2px; }"
},
{
"name": "Stat Band",
"kind": "custom",
"refersTo": null,
"description": "The instrument strip a dashboard opens with. One cell may be the lead; the change carries its own sign, and its tone is supplied rather than derived.",
"html": "
Revenue this month€48,210+12%vs. last month
Orders today318
Average basket€41.20−3%
",
"css": ".ds-stats { background: var(--rst-surface, #ffffff); border: 1px solid var(--rst-line, #e5e7eb); border-radius: var(--rst-radius, 8px); display: flex; flex-wrap: wrap; } .ds-stat { border-inline-start: 1px solid var(--rst-line, #e5e7eb); display: flex; flex: 1 1 9rem; flex-direction: column; gap: 0.15rem; min-inline-size: 0; padding: 1rem; } .ds-stat:first-child { border-inline-start: 0; } .ds-stat-lead { flex-basis: 14rem; } .ds-stat-label { color: var(--rst-text-muted, #4b5563); font-size: 0.71875rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; } .ds-stat-num { color: var(--rst-text, #1a1d21); font-size: 1.5rem; font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1.1; } .ds-stat-lead .ds-stat-num { font-size: 2.1rem; } .ds-stat-delta { font-size: 0.78125rem; font-variant-numeric: tabular-nums; font-weight: 600; } .ds-stat-up { color: var(--rst-tone-positive-fg, #166534); } .ds-stat-down { color: var(--rst-tone-negative-fg, #b91c1c); } .ds-stat-note { color: var(--rst-text-faint, #656c78); font-size: 0.71875rem; }"
}
],
"narrative": {
"northStar": "A Default With a Point of View",
"overview": "This is the interface an application has before anyone has styled it, and it should look like someone chose it. day is near-greyscale with hairline borders, one cobalt for anything that acts, crisp corners, and natural depth: light comes from above, cards rest on the page, controls press in and slowly lift. It aims to read as professional, in the family of the tools people already trust, and to be recognisably this system's.\n\nRemixability is still the thesis. Every colour, radius, shadow, highlight and strength resolves through a custom property, and the three shipped themes prove the axes work rather than offering a menu of three answers: day turns depth on, plain and signal turn it off and render as they always did. An app that wants a fourth writes one :root block. Files are delivered once and app-owned from that moment: edit them, or delete what you do not use.\n\nThe system is deliberately under-designed at the component level so an app's own character can land on top without a fight. It is explicitly not the SaaS gradient template — no purple-to-blue washes, glassmorphism, oversized rounded cards or decorative blobs — and explicitly not a vendor-branded admin kit that stamps someone else's identity on an app and resists removal. Both hand you an identity you did not choose, which is the one thing this system exists not to do.",
"keyCharacteristics": [
"Small, dense type: a 14px base with 12.5px and 11.5px steps below it.",
"Near-flat surfaces separated by 1px hairlines; depth is a theme axis.",
"One accent, carrying action and position; status carries its own four-tone palette.",
"Every colour is a light-dark() pair, so light and dark are one declaration rather than two stylesheets.",
"Works with JavaScript off. Scripts are enhancement and each is deletable on its own."
],
"rules": [
{
"name": "The Gated Pair Rule",
"body": "A colour that carries text owes 4.5:1 against the surface it actually sits on, and a control boundary owes 3:1 — and owes it in every theme and both schemes, in the contrast gate, before it ships. Adding a colour means adding its pair to that gate. A tone chosen against a tinted ground says nothing about the same tone on a plain card.",
"section": "colors"
},
{
"name": "The Two-Signal Rule",
"body": "State is never colour alone. A status pill renders its label, a meter prints its fraction as text beside the bar, and a stat's change carries its own + or − sign. Colour is the second signal, never the first.",
"section": "colors"
},
{
"name": "The Light-Dark Rule",
"body": "Every colour is declared once as light-dark(, ) under color-scheme: light dark. There is no dark stylesheet and no second palette to keep in step; an explicit theme choice re-resolves the same declarations by setting color-scheme.",
"section": "colors"
},
{
"name": "The Small-Base Rule",
"body": "The base is 14px, not 16px, and every step is declared in rem so the whole scale tracks a reader who has raised their browser default. Do not convert any of it to px.",
"section": "typography"
},
{
"name": "The Weight-Not-Size Rule",
"body": "Hierarchy inside a screen is carried by weight and colour before size. A card's h2 is body-sized at 600; reaching for a larger size to make a section feel important is how this system loses its density.",
"section": "typography"
},
{
"name": "The Derived Rule Rule",
"body": "The page header's underline is not authored per theme: it is color-mix(in oklab, var(--rst-accent) N%, var(--rst-line)), mixed at 45% in signal, and left as the plain hairline in plain and in day, which keeps its cobalt for things that act. A theme that changes its accent gets a matching rule with no second value to keep in step. It is decorative and carries no contrast floor.",
"section": "shapes"
},
{
"name": "The Grouped Number Rule",
"body": "Every number a person reads as a quantity is grouped for their locale — 54,173 in English, 54.173 in German, ٥٤٬١٧٣ in Arabic. Never a bare run of digits. The exception is exact: an identifier is not a quantity. Reference codes, order numbers, years, versions and port numbers are labels made of digits, and grouping one changes what it appears to be. Ruled 2026-09-02 and not yet met: form.FormatCents writes $1284.50 today.",
"section": "typography"
}
],
"dos": [
"Do change the system by setting custom properties. Every colour, radius, shadow and type family resolves through one; a fourth theme is a single :root block.",
"Do declare colours as light-dark(, ) pairs under color-scheme: light dark, so light and dark stay one declaration.",
"Do add any new colour that carries text to the contrast gate, at 4.5:1 against the surface it actually sits on, in all three themes and both schemes.",
"Do give state a second signal besides colour — a label, a sign, a number as text.",
"Do keep type in rem and the base at 14px, so the scale tracks a reader's own browser setting.",
"Do use logical properties (border-inline-start, margin-block-end) so borders and dividers land correctly in Arabic.",
"Do let the scriptless rendering be the real one; add script only as enhancement that can be deleted.",
"Do group the digits of any number a person reads as a quantity, for their locale — and never group an identifier, a year or a version."
],
"donts": [
"Don't reach for the SaaS gradient template — purple-to-blue washes, glassmorphism, oversized rounded cards, decorative blobs.",
"Don't stamp a vendor kit's identity onto an app. This system is under-designed on purpose so the app's own character can land on top.",
"Don't use the accent as decoration or mood. It marks what you can act on and where you are; status has its own four tones.",
"Don't float a resting surface. A card rests on the page with the theme's ambient light; a pop shadow means something has left the page plane.",
"Don't make a section feel important by making it bigger. Weight and colour carry hierarchy before size; a card's h2 is body-sized.",
"Don't shrink control padding without re-measuring against WCAG 2.2's 24px target-size minimum.",
"Don't compose a heading, a paragraph and a button side by side in a flex row. Screens stack vertically; horizontal arrangement is reserved for the idioms that ship it."
]
}
}