Foreground — text roles (light-mode focus)
--fg-1 ·
--fg-2 ·
--fg-3 ·
--fg-high-contrast ·
OPT-IN. It never rebinds the general gradient-surface foreground ramp; a bounded element or region may opt into it only once registered. It is not the default foreground and is not selected by font size. Density, legal, tabular, accessibility, or a comparable context may justify proposing a use — none of them authorizes one. Approved uses are registered in the repo README, under High-contrast foreground — registered uses; a new one requires measured need, explicit ASK authorization, and registration there before merge.
--ask-white · · --ask-lavender-ask ·
The wordmark carries its own mode-specific pairing and is never body text: white on the light gradient, lavender-ASK on the dark gradient. This specimen swaps with the mode selector above, so what you see is what that mode ships. A flat lavender field belongs to the exported standalone asset, not to a UI placement. --ask-white stays an ordinary core token in the palette inventory below — it is the light-mode mark color, not a dark-mode treatment.
Foreground on surfaces
--fg-1 on --surface-glass
--surface-solid is a fixed lavender fill in both themes, so --fg-on-card is a fixed high-contrast foreground rather than one that flips with the theme — a registered use of --fg-high-contrast.--fg-on-card · on --surface-solid
Color — core + named
--ask-white--ask-lavender-light--ask-lavender-ask--ask-fg-light--ask-ink-light--ask-ink-darkColor — surfaces + UI accents
--ask-surface--ask-surface-hover--ask-ui-accent-1--ask-ui-accent-2Color — emphasis accents (sparing)
--ask-emphasis-magenta--ask-emphasis-violet--ask-emphasis-cyanType roles — role-driven hierarchy
The defined scale steps distinguish semantic roles, and within a role weight and foreground carry contrast. Two defined roles may sit on different steps — a 24px primary label over 18px supporting copy is a role distinction, not ad-hoc sizing. Inventing a size merely for emphasis remains prohibited.
Heading one
Heading two
Heading three
Body — the weight gap does the work; one idea per sentence.
Type — Inter + JetBrains Mono
The two role exceptions apply only through their canonical selectors, never the generic .mono utility.
Spacing scale (4px base)
Radii
--radius-sm--radius-md--radius-lg--radius-xlComponents
Card
Frosted glass surface over the gradient — the canonical container.
Compact action
The label on a small control — a chip, a route action, a repo link. Caption-sized, not the Caption role: sentence-cased, zero tracking, weight 300. The contract styles a native anchor and a native button identically, so the consumer keeps whichever element the job actually calls for.
Left: native <a>. Right: native <button> on the secondary foreground. Same geometry, same type — secondary changes foreground only.
The same two forms at one explicit width, which is the case that motivates both white-space: normal and box-sizing: border-box. A long label wraps inside the control, and the anchor and button hold the same outer width, line count, height and alignment.
CTA
The Primary / Ghost pair above. It is deliberately larger, sans, and heavier: a page-level call to action rather than a compact navigation control. It is not governed by surface-action.css and must not be conformed to it.
Textual link
A link inside running prose or a structural title, opted in by class. The resting rule is the emphasis accent at partial opacity — its own hue at a reduced dose, never mixed toward the foreground. Hover raises it to full opacity. Focus is governed separately and independently. The module declares no text color: an ordinary link inherits its context, and a role-colored anchor keeps its own.
This is the default-ASK treatment, and no strict AA claim is made for it. The resting underline measures 1.72:1 and 1.82:1 against the light gradient stops and 2.11:1 and 2.23:1 against the dark — below the strict 3:1 non-text floor in both themes. In light that floor is unreachable at any opacity, full included; in dark a higher opacity would reach it, but that would be a different treatment from the single uniform default. The affordance rests on the presence of a rule where the surrounding prose has none, plus the independently governed focus indicator, which does clear its own requirement. No AA alternate ships in this unit.
The design system is published at design-system-ASK, and the catalog lists every surface and artifact pattern it exhibits.
A consuming role may color its own anchors, and the module leaves that alone: this link is deliberately quieter than the prose above it, and carries the same rule.
Top: ordinary prose links, inheriting the payload foreground. Bottom: an anchor its own role colors to --fg-3, unchanged by the module. Hover either to see the rule rise to full opacity, and Tab to one for the independent focus indicator.
At this column width a single anchor long enough to break across more than one line fragments, and the rule follows each fragment.
A shaped object announces itself by geometry and takes no class: compact action — while an unboxed link announces itself only by its rule.
Top: the fragmenting case — a text decoration follows each line's own text, which a box-drawn indicator cannot. Bottom: the boundary on one line. The module is opt-in for that reason — the excluded set is open-ended, so the class is added to the links that qualify rather than withheld from the ones that do not.
Browser / under-page edge
The area a browser paints beyond the document — the over-scroll pocket above and below the page — plus how it renders scrollbars and form controls. A browser derives the first from a solid background color, not from a gradient, and the second from color-scheme. Both are page-wide, so the foundation owns both on the root. --bg-edge is the semantic role; it binds existing palette values and creates none. It is painted on html beneath the gradient, so nothing visible on the page changes.
Use the mode selector above to check all three theme paths. body stays transparent on purpose: the root carries the solid, and the root's background is what propagates to the canvas.
These readouts are necessary, not sufficient. They show the values the browser is being handed. The pocket itself sits outside the viewport and cannot be judged in a desktop window — confirm it on a real device by over-scrolling past the top and bottom of the page in both light and dark.
Live preview · links ../colors_and_type.css · all colors via var() + computed labels (never hardcoded) · supersedes the retired per-aspect preview/*.html fragments.