01/Design system

One set of tokensbehind every screen.

Ink and Paper carry it. Signal points. Type is the primary material, a 4px grid holds it, and every diagonal runs at 45°.
Horizontal lockup · min 160px

02/Colour

Four locked colours. Every other colour is a role.

  • Ink

    #0D0E10

    RGB 13 14 16

    The dark ground and dark text. Never pure black.

  • Paper

    #F2F3F4

    RGB 242 243 244

    The light ground and light text. Never pure white as a page.

  • Ink on Signal 10.4:1

    Signal

    #1AD1E6

    RGB 26 209 230

    Spark, Axon, Spark stop. Accent only, 10% of a surface at most.

  • White

    #FFFFFF

    RGB 255 255 255

    Cards on Paper, the logo on photography.

Interface roles with their Paper and Ink values
RolePaperInkUse it for
bg#F2F3F4#0D0E10Page background
surface#FFFFFF#16181BCards, panels, inputs
fg#0D0E10#F2F3F4Headlines, body, values
fg-muted#474C54#B7BCC3Ledes, descriptions
fg-subtle#5F656D#8E949CCaptions, metadata
line#D9DCDF#2A2E33Dividers, card borders
line-strong#80868E#6E757EMeaningful borders, axes
signal-ink#00717F#1AD1E6Accent text, links, active nav
signal-subtle#DDF5F8#0B2B30Selected rows, highlights
focus#00717F#1AD1E6Keyboard focus ring

Signal never sets text on Paper (1.67:1). Accent text on Paper uses signal-ink #00717F (5.15:1).

03/Type

If it has a verb, it is Instrument Sans.

Aa

Instrument Sans

Display and text

Every headline and every sentence: ledes, body, buttons, navigation, captions.

Aa

Geist Mono

Labels and data

Uppercase labels, eyebrows, slash rows, numbers in data UI, code and file names. Never a sentence.

Aa

Instrument Serif

Accent

One word in a marketing headline, at most. Never UI, never a number.

  • display-xl

    96 / 96 · 56 / 56 below 720

    Automate the routine

  • display

    72 / 76 · 44 / 48

    Sense. Signal. Act.

  • h1

    56 / 60 · 36 / 40

    One house, five practices.

  • h2

    40 / 48 · 30 / 36

    We answer to your numbers.

  • h3

    28 / 36 · 24 / 32

    Ranked list of fixes

  • body-lg

    18 / 28

    We agree the target metric before we start and report on it every week.

  • body

    16 / 24

    AI scores every lead. Your sales lead sees the top ten each morning.

  • caption

    12 / 16

    Product screen, sample data.

  • label · Geist Mono

    12 / 16 · 0.18em caps

    NERV / GROWTH

  • data · Geist Mono

    14 / 20 · tabular

    ₹2,40,000 ₹18,42,000 ₹71.3L

04/Spacing and grid

A 4px grid under everything.

  • space-1 4Icon to label
  • space-2 8Inside controls
  • space-3 12Chip padding
  • space-4 16Mobile margin and gutter
  • space-5 20Control padding
  • space-6 24Desktop gutter, card padding
  • space-8 32Tablet margin
  • space-10 40Between groups
  • space-12 48Desktop margin
  • space-16 64Section padding, mobile
  • space-24 96Section padding, desktop
  • space-32 128Desktop hero
  • space-40 160Chapter breaks

Columns

Below 720px
4 columns · 16 margin · 16 gutter
720 to 1023px
8 columns · 32 margin · 24 gutter
1024px and up
12 columns · 48 margin · 24 gutter
Content max
1280px, centred. Body text 680px, a lede 560px.

05/Shape

One radius, one angle.

  • radius-2xs4px · H 18Checkbox, badge
  • radius-xs6px · H 28Chip, tag
  • radius-sm8px · H 36Compact button, input
  • radius-md10px · H 44Button, input, select
  • radius-lg16px · H 72Tile, card, panel
45°

Corners round at 2/9 of their height, capped at 16px. Lines run flat, upright or at 45°. Never 30° or 60°, never curved.

06/Devices

Spark, Axon, Pulse.

Device / Node

Spark

The point where a signal fires. One live Spark per screen. Hover to fire.

Device / Line

Axon

The path from insight to action. 2px, flat or 45°, up and to the right. It ends in a Spark.

Device / Supergraphic

Pulse

The N monogram used large, from 320px. It bleeds two edges at most, never the top. Shown here reduced for reference.

07/Icons

24 icons, one drawing system.

  • ads
  • ai
  • alert
  • analytics
  • automation
  • calendar
  • chat
  • check
  • crm
  • document
  • email
  • funnel
  • growth
  • layers
  • link
  • mobile-app
  • play
  • search
  • settings
  • social
  • target
  • team
  • user
  • web

24 × 24 master, 1.5px stroke, square caps, mitred joins. Icons take currentColor and are never stroked in Signal.

08/Components

Buttons, fields and states.

Buttons

Book a Signal Audit Connect a sourceSee the work Cancel

One Signal action per view. Labels start with a verb. 44px minimum height.

Tags and status

Sample dataNERV / GROWTH Live Needs review

Status is always an icon and a word, never colour alone.

Fields

Enter your company name.

Labels above fields, always visible. Focus is a 2px ring in the focus token.

09/Data

Charts lead with the client's number.

Cost per lead, indexed to week 1

71 vs 95 benchmark

Sample data
6080100W1W4W7W10W12
Client BenchmarkSource: sample data for illustration. Not a client result.
  • 01The client's series is data-1. Comparison is data-2.
  • 02One Spark marks the latest point.
  • 03No rainbows, gradients, 3D or two y-axes.
  • 04Every chart carries a source line. Sample data says so.
  • 05Money is INR with Indian grouping: ₹2,40,000 · ₹71.3L.

10/Motion

Trace, then fire. Then rest.

  • --dur-180ms

    Press feedback

  • --dur-2160ms

    Hover, colour and border

  • --dur-3240ms

    Toggles, tooltips, menus

  • --dur-4400ms

    Panels, page transitions

  • --dur-trace640ms

    The Axon draws to its Spark

  • --dur-fire800ms

    A 2px ring, 1× to 2.5×, fades

Ease in on cubic-bezier(0.2, 0, 0, 1). Paths run straight or at 45°, no arcs, no bounce. Only a live indicator loops. Under reduced motion everything ends at once. Hover a tile to play its timing.