Design System

Foundations

Tokens, colour, type and spacing — the shared base every Wordnerds surface is built on.

Colours

Production token values from Ray's spec (May 2026). Brand yellow and off-black are the primary signal colours. Sentiment palette is reserved exclusively for data visualisation — never for UI states.

Primary brand
Brand Yellow
--wn-brand-yellow#FAB316
Primary CTA & active states only
Off-Black
--wn-off-black#222222
Nav, sidebar, chrome
Brand Blue
--wn-brand-blue#39B8E1
Secondary CTAs, info accents
Grey scale
Dark Grey
--wn-dark-grey#444444
Body text, icons
Menu Grey
--wn-menu-grey#555555
Mid Grey
--wn-mid-grey#707070
Secondary text
Light Mid Grey
--wn-light-mid-grey#7A7A7A
Border Grey
--wn-border-grey#B9B9B9
Off-Black Muted
--wn-off-black-muted#BFBFBF
Background Grey
--wn-background-grey#EEEEEE
Light Grey
--wn-light-grey#EAF0F4
Card footers, cool surfaces
Lighter Grey
--wn-lighter-grey#F8F8F8
Card backgrounds
White
--wn-white#FFFFFF
Section background tints — marketing page rhythm only
Yellow Tint
--wn-section-yellow-tint#FEF4DC
Section wrappers only — .wn-section--yellow-tint
Blue Tint
--wn-section-blue-tint#E1F4FB
Section wrappers only — .wn-section--blue-tint
Sentiment palette — data visualisation only
Very Happy
--wn-sent-very-happy#6BB32D
Happy
--wn-sent-happy#95C11F
Neutral
--wn-sent-neutral#CFD9DF
Sad
--wn-sent-sad#EA752B
Angry
--wn-sent-angry#E94C1E
Blue intensity ramp — heat maps & volume viz
Blue 0
--wn-blue-0 / #EEEEEE
Blue 1
--wn-blue-1 / #A1E2F8
Blue 2
--wn-blue-2 / #39B8E1
Blue 3
--wn-blue-3 / #2B59C3
Blue 4
--wn-blue-4 / #001545

Typography

Two typefaces. Museo Sans for body and UI text. Museo Sans Rounded reserved for display only: headings, sidebar labels, card headers. Never swap them.

Type scale
size-1 2.35rem · Display
Wordnerds insights
size-3 2rem · Card headers
Card header title
size-4 1.31rem · Section labels
Section label
size-5 1.125rem · Body copy
Body copy — league table rows, topic text
size-6 1rem · Base body
Base body — the default font size across the product
size-7 0.85rem · Fine print
Fine print, card footers, metadata, labels
Font stacks
--wn-font-regular · body / UI
Museo Sans — body copy, UI text, default
'Museo Sans', 'Museo Sans Rounded', 'Nunito', system-ui, sans-serif
--wn-font-rounded · display only
Museo Sans Rounded — headings & display
'Museo Sans Rounded', 'Museo Sans', 'Nunito', 'Quicksand', system-ui, sans-serif

Spacing & Radii

Spacing scale
--wn-space-1
0.125rem
--wn-space-2
0.25rem
--wn-space-3
0.5rem
--wn-space-4
1rem
--wn-space-5
1.5rem
--wn-space-6
2rem
--wn-space-7
2.5rem
--wn-space-8
3rem
--wn-space-9
3.5rem
--wn-space-10
4rem
--wn-gap
30px
Border radius
sm
6px
md
1rem
card
1.5rem
input
2rem
input-lg
3rem
pill
999px

Brand

Logos and marque, and how to use them.

Logos

All logos use brand yellow (#FAB316). SVG is the preferred format for all digital and web use — it scales without loss and is smaller than PNG for vector artwork. Use PNG only where SVG is unsupported (email clients, some slide tools).

Full wordmark
On white / light backgrounds
Wordnerds
logos/logo-on-white.svg logos/logo-on-white.png
On dark / black backgrounds
Wordnerds
logos/logo-on-black.svg logos/logo-on-black.png
On brand yellow backgrounds
Wordnerds
logos/logo-on-yellow.svg logos/logo-on-yellow.png
Marque (icon only)
On white
Wordnerds marque
marque-yellow.svg
On dark
Wordnerds marque
marque-yellow.svg
On brand yellow
Wordnerds marque
marque-black.svg
White (dark bg, no yellow)
Wordnerds marque white
marque-white.svg
Favicon / app icon
Wordnerds favicon
favicon.png
Usage rules
SVG firstAlways use SVG on websites, apps, and digital documents. PNG only when the target doesn't support SVG (email clients, PowerPoint, some slide tools).
Variant selectionOn white or light: logo-on-white. On dark or black: logo-on-black. On brand yellow: logo-on-yellow. Never place a logo intended for one background type on a different one.
Marque on yellowUse marque-black on yellow backgrounds. The yellow marque is invisible on yellow — this is the one case where the black variant is required.
Clear spaceMinimum clear space on all four sides = the height of the marque icon. Never crowd the logo against other elements.
Min sizeWordmark: 120px wide minimum on screen, 30mm in print. Marque alone: 24px × 24px minimum.
Don'tsDon't stretch, rotate, recolour, add drop shadows, or place on busy photographic backgrounds without a solid colour block beneath.
File locations
design-system/brand-assets/logos/ logo-on-white.svg ← SVG preferred; .png available logo-on-black.svg ← SVG preferred; .png available logo-on-yellow.svg ← SVG preferred; .png available marque-yellow.svg ← icon on light or dark bg; .png available marque-black.svg ← icon on yellow bg only; .png available marque-white.svg ← icon on dark bg when yellow unavailable; .png available favicon.png ← 32×32 browser tab / app icon

Marketing components

The components a marketing-site page actually renders — if you are building a website page, these are the ones you need.

Text link

.wn-link

Dark grey with underline, weight 500. Hover deepens colour and thickens the underline stroke — no colour change needed.

Inactive
Unmatched data
Hover
Unmatched data

Form inputs

.wn-form-*

Marketing site form components — text/email input, textarea, and CTA button. Pill radius on inputs; card radius on textarea and buttons. Focus ring uses brand yellow. Error state signals via dark border + icon badge (sentiment red is reserved for data viz — never used here).

Text & email input states
Default
Focus
With hint
We'll use this to set up your demo
Error
Please enter a valid email address
Disabled
Textarea states
Default
Focus
Error
This field is required
Disabled
CTA button variants
Primary
Secondary
Ghost
Primary large
Disabled
Complete form example
We'll use this to set up your demo
Usage
<div class="wn-form-group"> <label class="wn-form-label" for="id">Label</label> <input class="wn-form-input" id="id" type="text" placeholder="…"> <span class="wn-form-hint">Helper text</span> </div> Error: add .wn-form-input--error to input + <span class="wn-form-error">message</span> Button: <button class="wn-btn wn-btn--primary">Book a demo</button> Variants: --primary · --secondary · --ghost | Modifiers: --lg · --full