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.

• Accent

  --accent

  Primary brand colour — used on CTAs, eyebrows, focus rings.

• Accent hover

  --accent-hover

  Slightly brighter on hover. Should harmonise with --accent.

• Background

  --bg-dark

  The primary page surface.

• Elevated

  --bg-elevated

  Cards, panels, modals — one notch lighter than bg-dark.

• 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

  Labels, mono uppercase, low-priority hints.

02 · In vivo

Components, themed live

Edit a token above and watch these update in real time. Same tokens drive the rest of the site, so your changes follow you 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 · 32-72

  Page titles.

  clamp(2rem, 1rem + 5vw, 4.5rem)

• Display · 48-224

  Hero only.

  clamp(3rem, 0.5rem + 14vw, 14rem)

04 · Read-only

Spacing rhythm

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