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 34 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.
coloradoptedfontadoptedtypeadoptedpageadoptedradiusadoptedrevealadoptedmotionadoptedbuttonadoptedcontroladoptedtextadoptedspaceadoptedscreenadoptedgapadoptedborderadoptedstackadoptedcaseadoptedpairsadoptedfocusadoptedmediaadoptedcardadoptedgridadoptedpaneladoptedcarouseladoptedfocusRingadoptedzIndexadoptednavadoptedheroadoptedheroPanelsadoptedentranceadoptedlogoadoptedannouncementadoptedfooteradoptedsetsadoptedviewportadopted
Coloradopted
color.accent#3b5bdbcolor.accentOnDark#3b5bdbcolor.ink#14161acolor.paper#ffffffcolor.error#b91c1ccolor.inkMuted#4a5058color.rule#878d95color.scrim#000000
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.
FAILS AAA — informational Passes AA. Nothing to fix — AAA is a stricter, optional bar.
FAILS AAA — informational Passes AA. Nothing to fix — AAA is a stricter, optional bar.
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.
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.
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 setsadopted
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.
No named sets declared.
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.
No voice set. Add one to src/content/pages/_section.yml — see STYLE-GUIDE.md#voice.
Typeadopted
font.body — Inter Variable, falling back to 'Inter Fallback', system-ui, sans-serif inherited
Body copy renders in the body font at its real size, constrained to the site's measure.
font.heading — Fraunces Variable, falling back to 'Fraunces Fallback', Georgia, serif inherited
Kitchen gardens built for the way you cook
font.display — Fraunces Variable, falling back to 'Fraunces Fallback', Georgia, serif inherited
The quick brown fox jumps over the lazy dog.
font.ui — Inter Variable, falling back to 'Inter Fallback', system-ui, sans-serif inherited
The quick brown fox jumps over the lazy dog.
font.mono — ui-monospace, falling back to 'SF Mono', Menlo, Consolas, monospace inherited
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
Spacingspace: adoptedstack: adopted
space.section6remspace.heroStartclamp(2rem, 10vw, 9rem)space.heroEnd4remspace.kickerStart8remspace.pageEnd5remspace.flushEnd3remstack.eyebrowToHeading0.5remstack.headingToSubheading0.75remstack.headingToBody1.5remstack.subheadingToBody1remstack.headingToBlock3remstack.displayTrim0em
Radii & motionradius: adoptedmotion: adopted
radius.sm4pxradius.lg16px
motion.hover150ms easemotion.panel620ms cubic-bezier(0.19, 0.86, 0.24, 1)motion.swap260msmotion.zoomIn600msmotion.zoomOut400msmotion.zoomScale1.07
Breakpointsadopted
Named rather than numeric, because the name is what gets said out loud.
| Name | Value |
|---|---|
sm | 40rem |
md | 48rem |
lg | 64rem |
xl | 80rem |