Wordnerds — Design System

Foundations

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

Colours

Colour has its own page: every colour shown on black and on white, with its contrast, what it is for and what to avoid. Open the Colour page.

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

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

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

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