Aspects

Every value below comes from src/design/aspects.ts. Change a value there and it changes everywhere it is used — that is the guarantee this page exists to demonstrate.

Design system groups

The kit ships 48 aspect groups. A site can declare which of them it has actually adopted as its own design system — an adopted group is a decision this site made; an inherited group is the kit's own default, still merged into every page's CSS, but not something this site chose. Every value below still renders — this only changes what it claims to be.

coloradopted
fontadopted
typeinherited
pageadopted
radiusadopted
revealinherited
motioninherited
buttoninherited
controlinherited
textinherited
spaceinherited
screeninherited
gapinherited
borderinherited
stackinherited
caseinherited
pairsinherited
focusinherited
mediainherited
cardinherited
gridinherited
panelinherited
carouselinherited
focusRinginherited
zIndexinherited
consentinherited
navinherited
cardsRowFeatureinherited
testimonialQuoteinherited
clientRosterinherited
bodyCopyinherited
bodySlotinherited
listinherited
statementinherited
servicesIndexinherited
workIndexinherited
filterNavinherited
heroinherited
heroDoorsinherited
heroCopyEntranceinherited
heroSettleinherited
heroPanelsinherited
entranceinherited
logoinherited
announcementinherited
footerinherited
setsadopted
viewportinherited

Color adopted

Color pairs

Color is never used loose — every foreground/background combination is a named pair, measured against the WCAG contrast formula. AA is the level this framework requires; AAA is a stricter, optional bar shown for information only. The ratio a pair must clear comes from its use field — text needs more contrast than a UI border, so the same measured ratio can pass one pair and fail another.

A WCAG contrast issue never stops a local build — it warns, so a genuine violation is visible without blocking someone mid-design. The deploy gate is the check that matters: it still blocks a WCAG failure, and only a human can override it, deliberately and on purpose — see STANDARDS.md#accessibility.

Pair: body
Use: text
Measured ratio: 15.87:1, #e4e4eb on #07070e — use: text requires 4.5:1
AA: Passes WCAG 1.4.3 Contrast (Minimum), which requires 4.5:1.
AAA: Passes WCAG 1.4.6 Contrast (Enhanced), which requires 7:1.

Pair: cta-solid
Use: text
Measured ratio: 10.37:1, #07070e on #8CBFF2 — use: text requires 4.5:1
AA: Passes WCAG 1.4.3 Contrast (Minimum), which requires 4.5:1.
AAA: Passes WCAG 1.4.6 Contrast (Enhanced), which requires 7:1.

Pair: hero-over
Use: large-text
Measured ratio: 1.05:1, #07070e on #000000 — use: large-text requires 3:1
AA: Fails WCAG 1.4.3 Contrast (Minimum), which requires 3:1.
AAA: Fails WCAG 1.4.6 Contrast (Enhanced), which requires 4.5:1.

FAILS AA — violation This pair ships with a real contrast violation. It has no recorded exemption — see STANDARDS.md#the-escape-hatch to add one, or fix the pair.

Pair: hero-under
Use: large-text
Measured ratio: 15.87:1, #e4e4eb on #07070e — use: large-text requires 3:1
AA: Passes WCAG 1.4.3 Contrast (Minimum), which requires 3:1.
AAA: Passes WCAG 1.4.6 Contrast (Enhanced), which requires 4.5:1.

Pair: hero-card
Use: text
Measured ratio: 15.87:1, #e4e4eb on #07070e — use: text requires 4.5:1
AA: Passes WCAG 1.4.3 Contrast (Minimum), which requires 4.5:1.
AAA: Passes WCAG 1.4.6 Contrast (Enhanced), which requires 7:1.

Pair: hero-card-heading
Use: large-text
Measured ratio: 15.87:1, #e4e4eb on #07070e — use: large-text requires 3:1
AA: Passes WCAG 1.4.3 Contrast (Minimum), which requires 3:1.
AAA: Passes WCAG 1.4.6 Contrast (Enhanced), which requires 4.5:1.

Pair: invert
Use: text
Measured ratio: 15.87:1, #07070e on #e4e4eb — use: text requires 4.5:1
AA: Passes WCAG 1.4.3 Contrast (Minimum), which requires 4.5:1.
AAA: Passes WCAG 1.4.6 Contrast (Enhanced), which requires 7:1.

Pair: announcement
Use: text
Measured ratio: 15.87:1, #07070e on #e4e4eb — use: text requires 4.5:1
AA: Passes WCAG 1.4.3 Contrast (Minimum), which requires 4.5:1.
AAA: Passes WCAG 1.4.6 Contrast (Enhanced), which requires 7:1.

Pair: link
Use: text
Measured ratio: 10.37:1, #8CBFF2 on #07070e — use: text requires 4.5:1
AA: Passes WCAG 1.4.3 Contrast (Minimum), which requires 4.5:1.
AAA: Passes WCAG 1.4.6 Contrast (Enhanced), which requires 7:1.

Pair: form-error
Use: text
Measured ratio: 3.1:1, #b91c1c on #07070e — use: text requires 4.5:1
AA: Fails WCAG 1.4.3 Contrast (Minimum), which requires 4.5:1.
AAA: Fails WCAG 1.4.6 Contrast (Enhanced), which requires 7:1.

FAILS AA — violation This pair ships with a real contrast violation. It has no recorded exemption — see STANDARDS.md#the-escape-hatch to add one, or fix the pair.

Pair: muted
Use: text
Measured ratio: 5.81:1, #8888a0 on #07070e — use: text requires 4.5:1
AA: Passes WCAG 1.4.3 Contrast (Minimum), which requires 4.5:1.
AAA: Fails WCAG 1.4.6 Contrast (Enhanced), which requires 7:1.

FAILS AAA — informational Passes AA. Nothing to fix — AAA is a stricter, optional bar.

Pair: edge
Use: ui
Measured ratio: Not measurable — one of these colors is not an opaque hex value.
AA: Fails WCAG 1.4.11 Non-text Contrast, which requires 3:1.
AAA: Not applicable — use: ui has no AAA threshold.

FAILS AA — violation This pair ships with a real contrast violation. It has no recorded exemption — see STANDARDS.md#the-escape-hatch to add one, or fix the pair.

Pair: logo
Use: text
Measured ratio: 15.87:1, #e4e4eb on #07070e — use: text requires 4.5:1
AA: Passes WCAG 1.4.3 Contrast (Minimum), which requires 4.5:1.
AAA: Passes WCAG 1.4.6 Contrast (Enhanced), which requires 7:1.

Pair: heading
Use: text
Measured ratio: 15.87:1, #e4e4eb on #07070e — use: text requires 4.5:1
AA: Passes WCAG 1.4.3 Contrast (Minimum), which requires 4.5:1.
AAA: Passes WCAG 1.4.6 Contrast (Enhanced), which requires 7:1.

Pair: footer
Use: text
Measured ratio: 15.87:1, #e4e4eb on #07070e — use: text requires 4.5:1
AA: Passes WCAG 1.4.3 Contrast (Minimum), which requires 4.5:1.
AAA: Passes WCAG 1.4.6 Contrast (Enhanced), which requires 7:1.

Pair: footer-muted
Use: text
Measured ratio: 5.81:1, #8888a0 on #07070e — use: text requires 4.5:1
AA: Passes WCAG 1.4.3 Contrast (Minimum), which requires 4.5:1.
AAA: Fails WCAG 1.4.6 Contrast (Enhanced), which requires 7:1.

FAILS AAA — informational Passes AA. Nothing to fix — AAA is a stricter, optional bar.

Failure states (demonstration)

The real palette above has no failing pair to show, and adding one there would ship a genuine violation just to prove a point. These two rows are fabricated fixture data — never part of any site's palette — kept here so the failing states stay visible on every build.

Pair: demo-fails-aa
Use: text
Measured ratio: 3.03:1, #949494 on #ffffff — use: text requires 4.5:1
AA: Fails WCAG 1.4.3 Contrast (Minimum), which requires 4.5:1.
AAA: Fails WCAG 1.4.6 Contrast (Enhanced), which requires 7:1.

FAILS AA — violation This pair ships with a real contrast violation. Recorded with a signed exemption: Demonstration fixture, not a real pair — shows what a signed AA exemption looks like.

Demonstration fixture — fabricated colors, not part of this site’s palette.

Pair: demo-fails-aaa
Use: text
Measured ratio: 5.74:1, #666666 on #ffffff — use: text requires 4.5:1
AA: Passes WCAG 1.4.3 Contrast (Minimum), which requires 4.5:1.
AAA: Fails WCAG 1.4.6 Contrast (Enhanced), which requires 7:1.

FAILS AAA — informational Passes AA. Nothing to fix — AAA is a stricter, optional bar.

Demonstration fixture — fabricated colors, not part of this site’s palette.

Named sets adopted

A named set is a value picked by key, not the job-based role color holds — a keyed palette or a line-weight family a page reaches by name (crystal.ruby), rather than a role it fills. The kit ships none: this is a place for a site to put its own. Contrast is measured only for a set that declares a pairWith background and a use — a member with no declared pairing, or one that is not itself a solid color, says so rather than guessing.

`gold`paired with `color.paper` · use: text

gold.linergba(206, 188, 150, 0.28)Not a solid color — contrast not computed.
gold.solid#d8c59611.81:1 against color.paper #07070e — passes AA (4.5:1)
gold.deep#b8995f7.42:1 against color.paper #07070e — passes AA (4.5:1)

`crystal`paired with `color.paper` · use: text

crystal.lapis#7AA2F77.97:1 against color.paper #07070e — passes AA (4.5:1)
crystal.amber#E0AF6810.04:1 against color.paper #07070e — passes AA (4.5:1)
crystal.peridot#9ECE6A10.99:1 against color.paper #07070e — passes AA (4.5:1)
crystal.amethyst#B79CF28.65:1 against color.paper #07070e — passes AA (4.5:1)
crystal.ruby#F7768E7.59:1 against color.paper #07070e — passes AA (4.5:1)
crystal.morganite#E8A0909.43:1 against color.paper #07070e — passes AA (4.5:1)

Voice

Voice is a named, per-site value like a color or a type size, and it sits here for the same reason: a change request has to land in one place. It cascades per field, so a section can be warmer without restating the person or the word choices.

Resolved for about/community

Tone

concrete
energetic
plain-spoken
playfully confident

Person

Second person — you, your

Word choices

Settled once, so they are not re-argued per page.

agents like Claude Code or Codex: not Claude
anyone running AI agents: not developers
crystal rail: not Crystal Rail
agency owner: not technical marketer
crystl counts the tokens every turn burns: not crystl is able to count tokens
summon a hero: not you can summon a hero

Phrases this site does not use

Kept short on purpose. A long banned list produces stilted avoidance, which reads worse than the phrase did.

seamless
robust
cutting-edge
world-class
delve
game-changer
deep dive

Examples

The most useful part for whoever writes the next page. A real sentence, its weaker twin, and why one wins.

WriteNo orchestrator required: agents in a quest self-coordinate.

NotAn orchestrator is not a requirement, as agents in a quest are able to coordinate among themselves.

Claim, colon, the concrete thing. The most common move in the copy Chris writes, and it survives being read fast.

WriteThe Quest Master never gets to be the boss; its only job is to author questlines and unblock the quest.

NotThe Quest Master is a powerful orchestration tool that unlocks seamless questline authoring.

Say what it does not do, then name the one thing it does. Denying the software credit is what makes the claim believable.

WriteSummon a single hero as a shard: a solo specialist with its own agent, model, and persona.

NotHero shards are a feature that allows users to create specialists.

A verb the reader can perform, not a sentence about what a feature is. "X is a feature that" is the shape to delete on sight.

WriteYou and the agent see the same list. It checks items off and adds what it finds as it goes.

NotThe workbench provides shared visibility into task state for both the user and the agent.

Two short sentences narrating an action beat one long one classifying a capability.

WriteThis works in the free version too.

NotThis powerful capability is also available to users on our free tier.

Six words, no adjectives, answers the question the reader actually had.

Type adopted

font.body — Inter, falling back to -apple-system, system-ui, sans-serif inherited

Body copy renders in the body font at its real size, constrained to the site's measure.

font.heading — Inter, falling back to -apple-system, system-ui, sans-serif inherited

Kitchen gardens built for the way you cook

font.display — Inter, falling back to -apple-system, system-ui, sans-serif inherited

The quick brown fox jumps over the lazy dog.

font.ui — JetBrains Mono, falling back to ui-monospace, monospace inherited

The quick brown fox jumps over the lazy dog.

font.mono — JetBrains Mono, falling back to ui-monospace, monospace inherited

The quick brown fox jumps over the lazy dog.

font.wordmark — Cormorant Garamond, falling back to Georgia, serif adopted

The quick brown fox jumps over the lazy dog.

font.tagline — IM Fell English, falling back to Georgia, serif adopted

The quick brown fox jumps over the lazy dog.

Heading stack

The most frequently broken thing in a design system — see STANDARDS.md#the-heading-stack. Every gap below is measured off the real rendered DOM, not copied from the aspect value.

Eyebrow + subheading

Services

Kitchen gardens

Built for the way you cook

Body copy begins here, the anchor every gap above is measured against.

eyebrow · upper — heading · sentence — subheading · sentence

Eyebrow only

Services

Kitchen gardens

Body copy begins here, the anchor every gap above is measured against.

eyebrow · upper — heading · sentence — subheading · sentence

Subheading only

Kitchen gardens

Built for the way you cook

Body copy begins here, the anchor every gap above is measured against.

eyebrow · upper — heading · sentence — subheading · sentence

Neither

Kitchen gardens

Body copy begins here, the anchor every gap above is measured against.

eyebrow · upper — heading · sentence — subheading · sentence

Display role · type.lineDisplay

Big lines sit close together

type.lineDisplay · var(--type-line-tight) — type.lineTight · 1.15 — measured · …

Beside-panel split inherited

How sheet at beside, story-flow and hero-standard at beside share a row between photograph and copy from md up. The larger share follows the photograph to either side. Below md the panel is one column.

This site — 1fr media, 1fr copy · side: 'left'

Packaging that sells the shelf

A short paragraph of copy, so the column the copy gets is visible.

This site — 1fr media, 1fr copy · side: 'right'

Packaging that sells the shelf

A short paragraph of copy, so the column the copy gets is visible.

Demonstration — 3fr media, 2fr copy · side: 'left'

Packaging that sells the shelf

A short paragraph of copy, so the column the copy gets is visible.

Demonstration — 3fr media, 2fr copy · side: 'right'

Packaging that sells the shelf

A short paragraph of copy, so the column the copy gets is visible.

Card reveal inherited

This site: reveal.cards: 'module'. Demonstration of 'media':

Packaging
The text under each photograph never moves.
Signage
Only the photograph fades and rises.
Workspace
Each one once, as it scrolls in.

Hero copy card inherited

What hero.copySurface: 'card' puts under a photo hero's copy, on every photo hero: a solid card in the hero-card and hero-card-heading pairs. This site sets copySurface: 'scrim' andcopyCardOpacity: '1'. Below md the card spans the gutter.

This site — hero-card ink on paper, h1 ink · copyPosition: 'bottom-start'

A kitchen garden laid out in raised beds at golden hour