The grammar of GoSmartR.

01 · Editable

Colour tokens

Click a swatch to open your browser’s colour picker, or type a hex value. Edits apply immediately and persist until you reset.

• Primary button

  --accent-cta

  Charcoal buttons with white labels.

• Accent

  --accent

  The indigo detail in the GoSmartR identity.

• Accent hover

  --accent-hover

  A softer charcoal for hover states.

• Background

  --bg-dark

  The primary page surface.

• Elevated

  --bg-elevated

  A quiet grey surface for cards and panels.

• Subtle

  --bg-subtle

  Inset details, table stripes, raised insets.

• Primary text

  --fg-primary

  Headings, body copy, the things you actually read.

• Secondary text

  --fg-secondary

  Supporting copy, dek lines, captions.

• Muted text

  --fg-muted

  Supporting labels and captions on light surfaces.

02 · In vivo

Components, themed live

Edit a token above and watch these update in real time. Same tokens are used across the site. These edits stay in the playground when you navigate away.

03 · Read-only

Fluid type scale

Eight steps using clamp() so type scales smoothly from mobile to ultrawide without a single breakpoint. Resize the window to watch each row breathe.

• XS · 12-14

  Mono micro-label · 0.5em letterspacing

  clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem)

• SM · 14-16

  Small body — captions, footnotes, fine print.

  clamp(0.875rem, 0.8rem + 0.35vw, 1rem)

• BASE · 16-18

  Default body copy. Most paragraphs land here.

  clamp(1rem, 0.9rem + 0.5vw, 1.125rem)

• LG · 18-22

  Lede paragraphs and intro copy.

  clamp(1.125rem, 1rem + 0.6vw, 1.375rem)

• XL · 20-28

  Card titles, sub-headings.

  clamp(1.25rem, 1rem + 1.2vw, 1.75rem)

• 2XL · 24-40

  Section heads.

  clamp(1.5rem, 1rem + 2.5vw, 2.5rem)

• 3XL · 28-48

  Page titles.

  clamp(28px, 3.6vw, 48px)

• Display · 48-100

  Hero only.

  clamp(48px, 7vw, 100px)

04 · Read-only

Spacing rhythm

One named token — --space-section — drives vertical padding on every section so the rhythm stays consistent across pages.