Not applicable: Rows never point to their own page.
visited
Not applicable: Visited rows keep their colour for a calm list.
expanded
Not applicable: Does not open.
Tokens
Part
Token
row.rule
--rule-hair --line
label.font
--type-strong
description.color
--ink-2
arrow.color
--ink
--rows-list-t-ink
var(--ink)
--rows-list-gap-space-2
var(--space-2)
--rows-list-gap-space-7
var(--space-7)
--rows-list-padding-space-7
var(--space-7)
--rows-list-padding-space-4
var(--space-4)
--rows-list-border-top-rule-hair
var(--rule-hair)
--rows-list-border-top-line
var(--line)
--rows-list-transition-dur-moderate
var(--dur-moderate)
--rows-list-transition-ease-standard
var(--ease-standard)
--rows-list-border-bottom-rule-hair
var(--rule-hair)
--rows-list-border-bottom-line
var(--line)
--rows-list-border-top-color-ink
var(--ink)
--rows-list-font-type-h3
var(--type-h3)
--rows-list-letter-spacing-ls-h3
var(--ls-h3)
--rows-list-color-ink-2
var(--ink-2)
--rows-list-transition-dur-weave
var(--dur-weave)
--rows-list-text-underline-offset-space-3
var(--space-3)
--rows-list-gap-space-5
var(--space-5)
--rows-list-padding-space-6
var(--space-6)
--rows-list-padding-space-2
var(--space-2)
--rows-list-t-indigo
var(--indigo)
--rows-list-t-madder
var(--madder)
--rows-list-t-saffron
var(--saffron)
--rows-list-t-teal
var(--teal)
--rows-list-t-indigo-ink
var(--indigo-ink)
--rows-list-t-madder-ink
var(--madder-ink)
--rows-list-t-teal-ink
var(--teal-ink)
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-5 vertical padding per row.
external
Inside the wrap.
rhythm
Follows its section heading.
Motion
Aspect
Value
moves
The arrow, 4 px to the right.
trigger
Hover or focus on the row.
duration
--dur-quick
easing
--ease-standard
interruptible
Yes; it returns when the pointer leaves.
reduced
The arrow does not move; the underline still shows.
why
A small cue that the whole row 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
label
8 words
The page title
description
1 sentence
What the reader gets
Good: “The manifesto · Why design systems need operations, not more documentation.”
Bad: “Click here”
Japanese: Rows on Japanese pages use reviewed nav-ja labels.
Icons and illustrations
None: this element uses no icon or illustration of its own.
Decisions and exceptions
None.
Usage
17 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.