On this page Do and don't Rules API Contract details Organism · stable · v1.0.0 · owner: Site system lead · contract 19 of 20 points (open: figma)
Do and don't
Tile colour is structure, cycling the dyes. Say what changes. Rules
Rule Why Check Tiles cycle the dyes in a fixed order. Colour is structure; no role is ranked by colour. Automated: tests/unit/site-system.test.ts
API
Prop Type Required Default What it does roleslist Yes Roles: label, text, href, meet.
Contract details
The full contract: identity, anatomy, variants, states, tokens, layout, motion, accessibility, content, tests Identity
Aspect Value Id roles-gridLayer Organisms Category navigation Owner Site system lead Status stable Version 1.0.0 Source apps/showcase/site/system/organisms/roles-grid.ts (private repository; the contract and the render function are this one module)
Version Date Change 1.0.0 2026-10-26 Roles grid as one module: its markup moved out of the page builder (scripts/site) into the system.
Use when The landing's roles section. Why: Each reader finds their role in one glance. Do not use when On role pages. Why: The Role switcher does that job quietly. Anatomy
Part What it is root ul.roles-grid tile li.field-<colour> with a: b.rg-role, span.rg-win, span.rg-meet, span.rg-go (aria-hidden arrow)
Made of: dye-field , text .
Used in: roles-section .
Variants
Variant When Why default Wherever the page declaration places it. One shape per job keeps pages predictable.
States
State Rendered or not applicable default default hover The tile tints by 10%, the arrow moves and the line underlines. focus-visible A 3 px currentColor outline inset by 6 px. active Not applicable: A link. disabled Not applicable: Every role has a page. loading Not applicable: Build time. empty Not applicable: Skipped when empty. error Not applicable: No data that can fail. current Not applicable: Not on role pages. visited Not applicable: Tile text keeps its colour for contrast. expanded Not applicable: Does not open.
Tokens
Part Token tile.background --field-bg (cycling indigo, madder, saffron, teal, ink)role.font --type-small-strongwin.font --type-h3@hover.tint color-mix --field-fg 10%--roles-grid-gap-space-2 var(--space-2)--roles-grid-gap-space-4 var(--space-4)--roles-grid-padding-space-8 var(--space-8)--roles-grid-padding-space-7 var(--space-7)--roles-grid-transition-dur-moderate var(--dur-moderate)--roles-grid-transition-ease-standard var(--ease-standard)--roles-grid-font-type-small-strong var(--type-small-strong)--roles-grid-font-type-h3 var(--type-h3)--roles-grid-letter-spacing-ls-h3 var(--ls-h3)--roles-grid-font-type-small var(--type-small)--roles-grid-transform-space-2 var(--space-2)--roles-grid-padding-space-6 var(--space-6)--roles-grid-padding-space-5 var(--space-5)--roles-grid-font-type-body var(--type-body)--roles-grid-font-weight-weight-strong var(--weight-strong)--roles-grid-background-field-bg var(--field-bg)--roles-grid-color-field-fg var(--field-fg)--roles-grid-background-field-fg var(--field-fg)--roles-grid-color-field-fg-2 var(--field-fg-2)
Layout
Aspect Value breakpoints Required review at 390, 768, 1024 and 1440 px; execution is not implied by this declaration; columns stack under 768 px; the wrap keeps a 16 px gutter on phones. wrapping Text wraps; nothing scrolls sideways. textExpansion Japanese runs 20 to 40% longer; headings break between phrases (jaBreaks) and blocks grow downwards.
Spacing and rhythm
Aspect Value internal --space-8 padding per tile. external 2 px seams. rhythm Under the roles heading.
Motion
Aspect Value moves The arrow, --space-2 to the right. trigger Hover with a fine pointer. duration --dur-moderate easing --ease-standard interruptible Yes. reduced No movement; the underline still shows. why A cue that the tile is the link.
Runtime and reuse Render-only element; mount any registered child enhancements separately. Preserve required Site CSS, fonts, responsive and locale rules from nativeElement.
Accessibility passport
Aspect Value role a landmark or list, as stated in its parts name Its visible text keyboard Links and buttons inside, in reading order. focus The --focus ring on every link and button inside. screenReader Read in source order; decorative weaving is aria-hidden. contrast Ink on cotton 14:1; text on every dye field 4.5:1 or better (checked by check-brand). target Links and buttons are 44 px tall.
Content
Slot Length Voice role 3 words The role win 1 sentence What changes for them
Good: “Design-system leads · Decisions stay made.”
Bad: “For you”
Japanese: Roles from landing.ja.md.
Icons and illustrations
None: this element uses no icon or illustration of its own.
Decisions and exceptions
Usage
50 uses across the built pages (measured by npm run site:system).
Tests
Aspect Value unit tests/unit/site-system.test.ts: renders every do and don't example through the registry and checks the classes it owns visual Not yet: there are no screenshot baselines; the Library page is checked for sideways scroll at 1440 px by tests/site/system.spec.ts a11y tests/site/system.spec.ts: axe (0 serious or critical) on the element's Library page in light and dark parity scripts/site/system/check.ts: Library examples are rendered by the same render function the site imports
Figma
not-yet: The Loom Site Figma library is the last stage of the plan; this element is not mapped yet.
Open in Storybook