Colour palette

Primitives are hidden from pickers. Periwinkle is deprecated in v1.1 and kept for existing pages only.

color-nautical #001420
color-fly-blue #0033cc
color-sky #66bfff
color-mint #5dfbd7
color-deep-blue #002554
color-light-blue-50 #c9ebff
color-light-blue-100 #a5d9ff
color-cream #f3ebdd
color-ice #e6ecf5
color-grey #efefef
color-rule-grey #999999
color-black #000000
color-white #ffffff
color-text-muted #3d4f63
color-accent-text #0070a0
color-success #0f6b3a
color-error #b91c1c
color-periwinkle #b3c2ff

Theme modes

Five surfaces as Theme modes. Set the mode on the frame a block sits on and every sem token resolves. Components never use raw colour primitives.

White

sem-surface
sem-text
sem-heading
sem-text-muted
sem-link
sem-primary
sem-primary-text
sem-secondary-text
sem-secondary-border
sem-border
sem-accent-stroke
sem-feature-slash

Muted text for secondary content.

Inline link

Mint

sem-surface
sem-text
sem-heading
sem-text-muted
sem-link
sem-primary
sem-primary-text
sem-secondary-text
sem-secondary-border
sem-border
sem-accent-stroke
sem-feature-slash

Muted text for secondary content.

Inline link

Sand

sem-surface
sem-text
sem-heading
sem-text-muted
sem-link
sem-primary
sem-primary-text
sem-secondary-text
sem-secondary-border
sem-border
sem-accent-stroke
sem-feature-slash

Muted text for secondary content.

Inline link

Nautical

sem-surface
sem-text
sem-heading
sem-text-muted
sem-link
sem-primary
sem-primary-text
sem-secondary-text
sem-secondary-border
sem-border
sem-accent-stroke
sem-feature-slash

Muted text for secondary content.

Inline link

Black

sem-surface
sem-text
sem-heading
sem-text-muted
sem-link
sem-primary
sem-primary-text
sem-secondary-text
sem-secondary-border
sem-border
sem-accent-stroke
sem-feature-slash

Muted text for secondary content.

Inline link

Gradients

Marketing site only. One gradient per section, never two gradient sections adjacent, text always on the solid part.

Aurora
Aurora Mobile
Deep water
Logo sweep
Shallows
Signal
Signal hairline

Typography

Playfair Display for page titles (h1) only; Inter for everything else. Sizes shown as Desktop / Tablet / Mobile. Resize the browser to see fluid scaling.

Display/2XL 100 / 53 / 48 (D / T / M) Playfair Display, 400

Marketing that earns its place

Display/XL 80 / 43 / 42 (D / T / M) Playfair Display, 400

Marketing that earns its place

Heading/L 64 / 36 / 36 (D / T / M) Inter, 700

Structured thinking for B2B growth

Heading/M 56 / 32 / 32 (D / T / M) Inter, 700

Structured thinking for B2B growth

Heading/S 42 / 28 / 28 (D / T / M) Inter, 700

Structured thinking for B2B growth

Heading/XS 38 / 26 / 26 (D / T / M) Inter, 700

Structured thinking for B2B growth

Text/XL 28 / 22 / 22 (D / T / M) Inter, 400

Structured thinking for B2B growth

Text/LG 24 / 20 / 20 (D / T / M) Inter, 700

Structured thinking for B2B growth

Text/LG Lead 24 / 20 / 20 (D / T / M) Inter, 400

Structured thinking for B2B growth

Text/Body 18 / 16 / 16 (D / T / M) Inter, 400

Structured thinking for B2B growth

Text/Body Bold 18 / 16 / 16 (D / T / M) Inter, 700

Structured thinking for B2B growth

Text/Button 18 / 16 / 16 (D / T / M) Inter, 600

Structured thinking for B2B growth

Text/SM 17 / 15 / 15 (D / T / M) Inter, 400

Structured thinking for B2B growth

Text/XS 15 / 14 / 14 (D / T / M) Inter, 400

Structured thinking for B2B growth

Spacing and shape

Spacing space-1 to space-12. Square corners everywhere (radius/none); screenshots take radius/screenshot. No shadows.

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-7
32px
space-8
40px
space-9
48px
space-10
60px
space-11
80px
space-12
112px

Shape tokens

radius-none: 0
radius-screenshot: 0.5rem

Motion tokens

Values live in the Motion collection. Everything respects reduced motion: it appears complete and still. Below 768, ambient motion runs at half amplitude and pauses off screen.

Token Value Usage
duration-fast 200ms Small state changes
duration-normal 300ms Hovers and state changes
duration-reveal 700ms One-off reveals (1/3 in view)
duration-stagger 130ms Delay between staggered items
duration-ambient 26s Gradient drift loop, max 40px
duration-connector 3s StackMap dotted connector flow
duration-ribbon-a 11s StatBand ribbon A
duration-ribbon-b 13s StatBand ribbon B, offset so they never sync

Easings

ease-default: ease
ease-reveal: cubic-bezier(0.16, 1, 0.3, 1)

Motifs

The 65 degree slash, the 24px dot pitch and the AccentStroke. Fixed geometry: these never scale with the viewport.

The 65 degree slash

One job per form:

Thick, filled light blue slash behind a drawing (FeatureIcon, illustrations)

Feature title

Thick, filled slash beside text in accent stroke colour (FeatureList titles)

47%

Thin line after a number (AccentStroke on Stat, StatBand, ProofStrip)

Dot pitch

24px pitch, dots in sem/border. DotField masks stretch while dots stay on the grid.