01 — FOUNDATIONS
Tokens
Every colour decision the system can make, named once. There is no palette underneath — no `blue`, no `grey-400`. Ask for a colour by how it looks and you have built something nobody can retheme, which is the failure this layer exists to prevent.
THE ROLES
GROUNDThree depths, never more. Sections alternate; nothing floats.
ground
--ds-groundPage ground and the deepest surfacesunk
--ds-sunkAlternating sections and control wellsraised
--ds-raisedHover states and held rowscream
--ds-creamThe one warm surface — CTAs and open slotsINKThe steps of text, each with a stated job, plus the two bound to a filled surface.
ink
--ds-inkHeadings and primary textink-read
--ds-ink-readLong-form body copy at 17px and upink-soft
--ds-ink-softSupporting paragraphs and descriptionsink-faint
--ds-ink-faintLabels, meta, captionsink-on-cream
--ds-ink-on-creamAnything sitting on the cream surfaceink-on-accent
--ds-ink-on-accentAnything sitting on the filled accent — a chip that is open, an avatar, the selectionLINE & ACCENTOne hairline weight; the accent is a pointer, not a decoration. And the deep one is a surface, never a word.
rule
--ds-ruleSection and grid dividersrule-strong
--ds-rule-strongControl borders and focusable edgesaccent
--ds-accentSection numbers, links, active stateaccent-deep
--ds-accent-deepFilled accent surfaces and selectionaccent-warm
--ds-accent-warmCaptions on the warm placeholder tintrule-on-cream
--ds-rule-on-creamThe hairline ON the cream surface — the dark rule is far too harsh thereSTATEFour colours the controls need and nothing else may use.
state-error
--ds-state-errorError border, label and hint — 7.4:1 on groundstate-success
--ds-state-successSuccess border and kicker — 8.4:1 on groundink-disabled
--ds-ink-disabledDisabled controls only — 2.4:1 on sunk, below AA by intentmuted-on-cream
--ds-muted-on-creamSecondary text on the cream surface — 6.1:1PLACEHOLDERTwo tints for empty media, each with its caption ink bound to it.
tint-cool
--ds-tint-coolDefault media placeholdercaption-on-cool
--ds-caption-on-coolCaptions on tint-cool — 6.1:1tint-warm
--ds-tint-warmAlternate placeholder, breaks a run of bluecaption-on-warm
--ds-caption-on-warmCaptions on tint-warm — 7.2:1USING THEM
Every role also generates a utility class, for a page laying out something the library has no component for.
bg-ground
text-ink-faint
border-ruleComponents read the variable directly, never the utility. That is what lets the component layer work with no build step at all.
background: var(--ds-ground);
color: var(--ds-ink-faint);Reference
Read from themes/portfolio-dark.css when this page was built, so it cannot fall behind the stylesheet.
CLASSES
READSNothing from the theme — it is arrangement only.