Brand Guide

Brand Colors

Click any hex to copy.

Components & Typography

Type scale, buttons, and spacing tokens

h1Clamp 44 → 32

Display headline — quick brown fox

h2Clamp 28 → 22

Section title — jumps over lazy dog

body16 / 1.55

Body text uses site’s current font stack. Inline link, inline code, and bold.

buttonsvariants

Spacing scale

4 8 12 16 24 32 48 64

Edit spacing values in :root.

Components

Brand Primary Tile

Uses --brand-primary via utility background on media band.

New

Secondary Variant

Same component; different token emphasis and hover elevation.

Hover me

Chip Filter Badge Submit›

These use your global NW.copy and NW.toast helpers—handy for docs and playgrounds.

Underline link Arrow link› Accent link

Visualized grid helpers with ghost tiles (no content yet).

grid-2 · A

grid-2 · B

grid-3 · 1

grid-3 · 2

grid-3 · 3

Utilities Playground (full‑bleed band)

Utility • A

Utility • B

Utility • C

Common flex patterns with adjustable gap.

ItemItemItem

CenteredRowLayout

SpaceBetweenTop‑aligned

Aspect ratios for media blocks.

1:1

16:9

4:3

Experiments

Palette: —

Buttons

Tiles

Bold Block A

Compact, graphic tile with crisp solid color.

Bold Block B

Alternate emphasis, same layout system.

Accent C

Strong accent for CTAs, badges, or chips.

Shapes & Outlines

Pill

Outline

Dashed

Palette Chips