Styleguide

Every design partial, rendered with the live theme CSS and tied back to its DESIGN.md source.

This theme is generated from DESIGN.md - the single source of truth for colors, type, spacing, radius, and component recipes. Change a token there and the whole SCSS system + this page regenerate. To adjust:

edit DESIGN.md→npm run tokens→npm run build→reload

Colors

DESIGN.md colors → --color-*. The value under each swatch is the source hex.

ink #063B52 colors.ink → --color-ink
text #3E5B69 colors.text → --color-text
muted #5C6B7A colors.muted → --color-muted
surface #EDF9FB colors.surface → --color-surface
surface-raised #FFFFFF colors.surface-raised → --color-surface-raised
subtle #DDF4F8 colors.subtle → --color-subtle
border #CFE7EE colors.border → --color-border
border-strong #6E8B95 colors.border-strong → --color-border-strong
primary #0078AA colors.primary → --color-primary
primary-deep #0E5E7D colors.primary-deep → --color-primary-deep
on-primary #FFFFFF colors.on-primary → --color-on-primary
accent #063B52 colors.accent → --color-accent
on-accent #FFFFFF colors.on-accent → --color-on-accent
accent-cyan #35BCD2 colors.accent-cyan → --color-accent-cyan
accent-gold #BFA76A colors.accent-gold → --color-accent-gold
danger #CC1818 colors.danger → --color-danger
success #3C5528 colors.success → --color-success
success-subtle #E9F0DF colors.success-subtle → --color-success-subtle

Typography

DESIGN.md typography.<role> → --type-<role>-*. The source fontSize is the desktop target; the build turns it into a fluid clamp().

The quick brown fox .text-display-1 typography.display-1 · 66px · 700
The quick brown fox .text-display-2 typography.display-2 · 44px · 700
The quick brown fox .text-heading typography.heading · 32px · 700
The quick brown fox .text-subheading typography.subheading · 22px · 700
The quick brown fox .text-body-lead typography.body-lead · 19px · 400
The quick brown fox .text-body typography.body · 17px · 400
The quick brown fox .text-caption typography.caption · 14px · 400
The quick brown fox .text-label typography.label · 12px · 600

Spacing scale (fluid)

DESIGN.md spacing → --space-*. Source px shown; the bar is the resolved fluid width.

3xs 6px
2xs 10px
xs 14px
sm 20px
md 24px
lg 30px
xl 40px
2xl 56px
3xl 72px

Radius

DESIGN.md rounded → --radius-*. Match radius to element size.

none
0px
sm
12px
md
18px
lg
24px
xl
32px
full
9999px

Layout - breakout grid

DESIGN.md layout → --layout-*. Viewport-relative widths, so each level steps at any screen size. One .content-grid; each child opts into a width with one class.

layout.gutter 1.75rem layout.gutter-lg 2.5rem layout.content-width min(72.5rem, 90vw) layout.content-width-lg min(72.5rem, 88vw) layout.content-width-2xl min(76rem, 82vw) layout.breakout-width min(100rem, 96vw) layout.breakout-width-2xl min(110rem, 94vw) layout.prose-width min(38rem, 90vw) layout.section-gap clamp(3.5rem, 6vw, 4.5rem) layout.section-gap-tight clamp(1.75rem, 3vw, 2.5rem)

content
.breakout4
.breakout3
.breakout2
.breakout1
.full-width

Buttons (variant × size × state, via coolstep_btn)

DESIGN.md recipes button-primary / button-secondary / button-accent.

specimendefaulthoverfocusdisabled
.btn--primary .btn--small Primary Primary Primary
.btn--primary .btn--medium Primary Primary Primary
.btn--primary .btn--large Primary Primary Primary
.btn--secondary .btn--medium Secondary Secondary Secondary
.btn--accent .btn--medium Accent Accent Accent

Components

DESIGN.md recipes card / note, plus form controls.

Card

The default content surface, from the card recipe in DESIGN.md.

Note. A quiet informational well (subtle fill, muted text).

Form controls

DESIGN.md recipe control. Every one is a NATIVE element restyled, not a div - so focus, keyboard and screen-reader behaviour are the browser's, not ours.

Checkbox

Radio

Pick one

Switch

Segmented

View

Select

Input group

https://

Range

File

Guidelines (from DESIGN.md)

  • Do use `surface-raised` for anything that should read as lifted: inputs, cards, popovers.
  • Do use `ink` for headings and `text` for body. They are different tokens on purpose.
  • Do use `border-strong` on anything a visitor can click or type into, and `border` only for rules.
  • Do reach for the spacing and type scales before typing a raw pixel value.
  • Don't put `primary` text on a `subtle` band (4.31:1). Use `ink` there.
  • Don't use `accent-cyan` or `accent-gold` for text at any size. They are card borders.
  • Don't add a new colour, radius or type size in CSS. Add it here and run `npm run tokens`.

Blocks (19)

Hero blocks/_block-hero.scss block_hero
Text blocks/_block-text.scss block_text
Media + text blocks/_block-media-text.scss block_media_text
Cards blocks/_block-cards.scss block_cards
CTA blocks/_block-cta.scss block_cta
Form blocks/_block-form.scss block_form
Video blocks/_block-video.scss block_video
Quote blocks/_block-quote.scss block_quote
Contact blocks/_block-contact.scss block_contact
About band blocks/_block-about-band.scss block_about_band
Service paths blocks/_block-service-paths.scss block_service_paths
About me blocks/_block-about-me.scss block_about_me
FAQ blocks/_block-faq.scss block_faq
Calendar blocks/_block-calendar.scss block_calendar
Article text blocks/_block-article-text.scss block_article_text
Article image blocks/_block-article-image.scss block_article_image
Article gallery blocks/_block-article-gallery.scss block_article_gallery
Article table blocks/_block-article-table.scss block_article_table
Article callout blocks/_block-article-callout.scss block_article_callout