Visual companion to
docs/skills/style-guide.md (the style log). Tokens &
rules are authoritative in code; this page renders samples. px labels
reflect the desktop size — several styles are responsive (see the log).
.p-text-h1 — Extended, u-text-3xl (2.8rem / 44.8px), uppercase, sm: tracking-wider
.p-text-h2 — Extended, u-text-xl (2rem / 32px), uppercase, sm: tracking-wider
.p-text-h3 — Extended, u-text-2xl → sm: u-text-3xl (2.8rem / 44.8px)
.p-text-h4 — Standard light, u-text-2xl → sm: u-text-3xl (2.8rem / 44.8px)
.p-text-h5 — Standard light italic, u-text-2xl → sm: u-text-3xl
.p-text-h6 — Standard light italic, u-text-xl → sm: u-text-2xl (2.4rem / 38.4px)
.p-text-h7 — Standard light, u-text-lg (1.6rem / 25.6px)
.p-text-body — Standard light, u-text-base (1.4rem / 22.4px)
.p-text-body-medium — Standard medium, u-text-base
.p-text-body-italic — Standard light italic, u-text-base
.p-text-body-2 — Standard light, u-text-sm (1.2rem / 19.2px)
.p-text-eyebrow — Extended regular, u-text-sm, uppercase, tracking-wide
.p-text-eyebrow-2 — Extended medium, u-text-xs (1rem / 16px), uppercase
.p-text-article-heading — Standard light, u-text-3xl → sm: 4.8rem (article pages only)
.p-text-link — inline-block, animated underline (border-current on hover)
Core brand palette
Primary UI color is greenblue / greenblue-dark (buttons, inputs, nav, text). Use these for new work.
White
.u-bg-white .u-text-white
Black
.u-bg-black .u-text-black
Light Grey
.u-bg-grey-light .u-text-grey-light
Medium Grey
.u-bg-grey .u-text-grey
Warm Grey
.u-bg-grey-warm .u-text-grey-warm
Gold
.u-bg-gold .u-text-gold
Dark Gold (ADA)
.u-bg-gold-dark .u-text-gold-dark
Cantaloupe
.u-bg-cantaloupe .u-text-cantaloupe
Light Cantaloupe
.u-bg-cantaloupe-light .u-text-cantaloupe-light
Red (legacy)
.u-bg-red .u-text-red
New Red
.u-bg-newred .u-text-newred
New Red Light
.u-bg-newred-light .u-text-newred-light
New Red Pink
.u-bg-newred-pink .u-text-newred-pink
Brick
.u-bg-brick .u-text-brick
Light Brick
.u-bg-brick-light .u-text-brick-light
Green Blue
.u-bg-greenblue .u-text-greenblue
Dark Green Blue
.u-bg-greenblue-dark .u-text-greenblue-dark
Slate
.u-bg-slate .u-text-slate
Light Slate
.u-bg-slate-light .u-text-slate-light
Neutrals & later additions
neutralgreen and sage are the same hex under two
names. grey-dark / grey-darkest are flagged "not
from styleguide" in colors.js — use sparingly.
Whisper Rose
.u-bg-whisperrose .u-text-whisperrose
Beige
.u-bg-beige .u-text-beige
Neutral Beige
.u-bg-neutralbeige .u-text-neutralbeige
Neutral Green
.u-bg-neutralgreen .u-text-neutralgreen
Sage (= Neutral Green)
.u-bg-sage .u-text-sage
Dark Grey (not styleguide)
.u-bg-grey-dark .u-text-grey-dark
Campaign / seasonal — do not extend
Expired marketing palettes promoted into the global token map. Don't reuse
for new work and don't add new seasonYY tokens — scope
campaign colors to their component instead. See the style log.
Summer 23 Green
.u-bg-summer23green .u-text-summer23green
Summer 23 Green Light
.u-bg-summer23green-light .u-text-summer23green-light
Summer 23 Red
.u-bg-summer23red .u-text-summer23red
Summer 23 Red Light
.u-bg-summer23red-light .u-text-summer23red-light
Fall 23 Green
.u-bg-fall23green .u-text-fall23green
Fall 23 Orange
.u-bg-fall23orange .u-text-fall23orange
Fall 23 Red
.u-bg-fall23red .u-text-fall23red
Chablis Pink
.u-bg-chablispink .u-text-chablispink
Holiday
.u-bg-holiday .u-text-holiday
Holiday Light
.u-bg-holiday-light .u-text-holiday-light
Autumn Ember
.u-bg-autumnember .u-text-autumnember
All buttons compose the .a-button atom + BEM modifiers.
Hover/focus/active state is the is-active class (or the
matching pseudo-state).
Modifiers
a-button--small · a-button--narrow · a-button--full
a-button--underline · a-button--disabled · a-button--wishlist
Form atoms live under
src/base-app/components/atoms/. Bottom-border aesthetic,
greenblue-dark accent.
.a-input (bottom-border, uppercase extended placeholder)
.a-input.a-input--alert (gold-dark border)
.a-select (inline base64 caret — no icon dependency)
.a-checkbox + __input + __label (hidden input, ::before box)
.a-radio + __input + __label (hidden input, ::after dot)
.a-textarea (min-height 8rem)
.a-swatch (is-selected / is-active shows the ring)
.a-link.a-link--underline — UI chrome link, animated ::after underline
.p-text-link — in-prose link, animated bottom border on hover
Inline-SVG snippets rendered by flat basename. Never prefix with
icons/. Prefer fill="currentColor" over
hardcoded hex when touching an icon.
{% render 'icon-chevron-right' %} — flat basename only
