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 #14161A colors.ink → --color-ink
surface #FFFFFF colors.surface → --color-surface
muted #59616E colors.muted → --color-muted
subtle #EEF0F3 colors.subtle → --color-subtle
border #D0D5DD colors.border → --color-border
border-strong #7D8794 colors.border-strong → --color-border-strong
primary #3538CD colors.primary → --color-primary
on-primary #FFFFFF colors.on-primary → --color-on-primary
accent #BE123C colors.accent → --color-accent
on-accent #FFFFFF colors.on-accent → --color-on-accent

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 · 80px · 600
The quick brown fox .text-display-2 typography.display-2 · 56px · 600
The quick brown fox .text-heading typography.heading · 32px · 600
The quick brown fox .text-subheading typography.subheading · 24px · 400
The quick brown fox .text-body-lead typography.body-lead · 20px · 400
The quick brown fox .text-body typography.body · 16px · 400
The quick brown fox .text-caption typography.caption · 14px · 400
The quick brown fox .text-label typography.label · 12px · 400

Spacing scale (fluid)

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

3xs 4px
2xs 8px
xs 12px
sm 16px
md 24px
lg 40px
xl 64px
2xl 96px
3xl 144px

Radius

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

none
0px
sm
4px
md
8px
lg
16px
xl
28px
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.5rem layout.gutter-lg 2.5rem layout.content-width min(68rem, 90vw) layout.content-width-lg min(68rem, 88vw) layout.content-width-2xl min(72rem, 82vw) layout.breakout-width min(100rem, 96vw) layout.breakout-width-2xl min(110rem, 94vw) layout.prose-width min(38rem, 90vw) layout.section-gap clamp(3rem, 8vw, 7rem) layout.section-gap-tight clamp(1.5rem, 4vw, 3rem)

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

Buttons (variant × size × state, via vocalcom_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 `ink` on `surface` for body copy and `on-primary` on `primary` for filled buttons.
  • Do reach for the spacing and type scales before typing a raw pixel value.
  • Do use `.content-grid` breakout classes for width instead of nested max-width wrappers.
  • Don't put body text on `accent` or `primary`, or pair `muted` with anything darker than `subtle`.
  • Don't add a new color, radius, or type size in CSS. Add it here and run `npm run tokens`.
  • Don't stack drop shadows for hierarchy. Use spacing, the subtle fill, and the border first.

Blocks (11) → sandbox

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
Use Cases blocks/_block-use-cases.scss block_use_cases
Articles blocks/_block-articles.scss block_articles
Webinars blocks/_block-webinars.scss block_webinars
Logos blocks/_block-logos.scss block_logos