Wordnerds — Design System

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

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

logos/logo-on-white.svg logos/logo-on-white.png

On dark / black backgrounds

logos/logo-on-black.svg logos/logo-on-black.png

On brand yellow backgrounds

logos/logo-on-yellow.svg logos/logo-on-yellow.png

Marque (icon only)

On white

marque-yellow.svg

On dark

marque-yellow.svg

On brand yellow

marque-black.svg

White (dark bg, no yellow)

marque-white.svg

Favicon / app icon

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

Filter button

.wn-filter

Black pill with yellow filter icon. Active state flips to yellow fill with black text — the standard "engaged" signal used across the product.

Inactive

Hover

Active

Usage

<button class="wn-filter wn-filter--inactive">
  <svg class="wn-filter__icon" viewBox="0 0 14 14" fill="currentColor">
    <path d="M1 2h12l-4.5 5.5V12L5.5 13V7.5L1 2z"/>
  </svg>
  Edit Filters
</button>
States: --inactive · --hover · --active

Dropdown

.wn-dropdown

Pill-shaped selector with sort icon and caret. Selected option shown with a yellow underline when the menu is closed.

Inactive

Hover

Active (open)

Closed after selection

Tooltip

.wn-tooltip

Circular "?" glyph. Very muted inactive; hover darkens the ring; active renders the bubble above.

Inactive

Hover

Active

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

Export button

.wn-export

Circular icon button. Very muted in inactive state to avoid visual noise. Active fills with brand yellow.

Inactive

Hover

Active

Chart row

.wn-chart-row

Diverging sentiment bar with label and count. Hover washes cool; active inverts to black. The only valid in-product use of the sentiment colour palette.

Row states

Inactive

Contractors

100

Hover

Contractors

100

Active (selected)

Contractors

100

Hover on sentiment segment

Contractors

100

Summary card variant

😄500 are happy

😐200 are neutral

🙁50 aren't happy

😠50 are pissed

Theme / topic lozenge

.wn-lozenge

Pill tags for theme/topic selection. Quiet inactive state; active fills brand yellow. Close glyph on active inverts on hover to signal destructive intent.

Inactive

Attendance / wait times

Hover

Attendance / wait times

Active (selected)

Theme×

Active: hover on close

Theme×

Table styles

.wn-cell

Three cell rendering modes. Text for plain values; wheel (donut) for percentage scores defaulting to brand yellow; bar for volume comparisons defaulting to brand blue.

Text

10,000

Wheel (donut)

33

Bar

Verbatim card

.wn-verbatim

Social post card with white body on a cool-grey surround. Supports closed/open text, theme tag pills, and an emoji sentiment picker. Always shown against the grey page background.

Closed post

Default

Published 10 months ago

"I went to asda's, the manager was brilliant. He helped me find the blue moon. I only needed…"

Sentiment picker hover

Published 10 months ago

"I went to asda's, the manager was brilliant. He helped me find the blue moon. I only needed…"

Expanded post with themes

Published 10 months ago

"I went to asda's, the manager was brilliant. He helped me find the blue moon. I only needed Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis interdum."

Theme Theme Theme Theme

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

Full name

Focus

Full name

With hint

Work email We'll use this to set up your demo

Error

Work email Please enter a valid email address

Disabled

Full name

Textarea states

Default

Message

Focus

Message

Error

Message This field is required

Disabled

Message

CTA button variants

Primary

Secondary

Ghost

Primary large

Disabled

Complete form example

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