Design System

Built from tokens.

Every value on this site comes from the tokens below, generated into CSS custom properties. Components use variables only, so light and dark themes follow automatically.

Colors

Neutral surfaces, one teal brand colour. Accent is for fills only, never text.

TokenLightDarkUsage
--surface-100#fafafa#0e1514Page background.
--surface-200#ffffff#151e1dHeader, nav pill, cards and inputs on surface-100.
--ink#1c2321#eef3f1Headings, nav and body text on surface-100 and surface-200.
--ink-muted#4d5a57#a3b3afIntro paragraphs and captions on surface-100 and surface-200.
--brand#0a7a68#3fd1b5Links, step numbers (01, 02), active-item bar, focus. Teal text on surface-100 and surface-200.
--on-ink#ffffff#0e1514Text on ink-filled buttons (the dark primary button).
--on-brand#ffffff#0b1f1bText and icons on brand fills.
--accent#1fd1b0#1fd1b0Bright teal of the logo mark, chat button and highlights. Fill only, never text.
--on-accent#0b1f1b#0b1f1bText and icons on accent fills.
--hairline#e6e8e7#25322fSection dividers and header rule; decorative only.
--focus#0a7a68#3fd1b52px focus ring, at least 3:1 on every surface.
--success#1f7a4d#6fcf9fSuccess text and icons on surface-100; always with a word or icon.
--danger#b3361f#ff8a73Error text and icons on surface-100; always with a word or icon.

Typography

Serif for the hero, Poppins for everything else. Light headings with bold key words.

display
"Source Serif 4", Georgia, serif
sans
"Poppins", system-ui, sans-serif
mono
"JetBrains Mono", ui-monospace, monospace

Headings

  • .type-display-xl64px/72px, 600

    Secure every step

    Hero first line in ink. Second line: same style in italic (display-italic) in brand.

  • .type-display-italic64px/72px, 500, italic

    of your growth.

    Hero second line, in brand: 'of Your Growth.'

  • .type-display-lg40px/48px, 300

    When you have the big idea

    Section titles such as 'When You Have the Big Idea' in the sans face; key words at 600.

  • .type-heading24px/32px, 500

    Cloud migration

    Card and sub-section titles.

Text

  • .type-eyebrow14px/20px, 600

    Software development company

    Uppercase kicker such as 'IP AND BUSINESS LAW FIRM', and step numbers, in brand. Set text-transform: uppercase for kickers.

  • .type-body-lg18px/32px, 300

    We design, build and run software that ships on schedule.

    Intro paragraphs in ink-muted.

  • .type-body16px/24px, 400

    Clear contracts, clear scope, clear delivery.

  • .type-link16px/24px, 500

    Web development

    Arrow links in brand.

  • .type-label15px/24px, 500

    Contact us

    Nav items, buttons.

  • .type-caption14px/20px, 400

    Your idea. Your software. Clear on price.

Code

  • .type-code14px/22px, 400

    npm run build

Spacing

Five steps on an 8px rhythm.

  • --space-1

    8px

    Icon gaps.

  • --space-2

    16px

    Default gap, link row gap 24px = space-3.

  • --space-3

    24px

    Between links and paragraphs.

  • --space-4

    32px

    Item padding.

  • --space-5

    64px

    Section spacing.

Radius

Soft corners, three sizes.

  • --radius-sm

    8px

    Buttons, nav pill, inputs.

  • --radius-md

    12px

    Cards.

  • --radius-lg

    24px

    Large images and panels.

Shadows

Floating layers only. Cards stay flat with a hairline border.

  • --shadow-sm

    0 1px 2px rgba(28,35,33,0.08)

    Nav pill, small floating bubbles such as 'Need help?'.

  • --shadow-md

    0 8px 24px rgba(28,35,33,0.12)

    Dropdown menus and popovers.

  • --shadow-lg

    0 24px 64px rgba(28,35,33,0.18)

    Modals and dialogs.

Icons

Thin outline icons, 24px grid, 1.5px stroke, inheriting the text colour.

  • arrow-right
  • arrow-up-right
  • arrow-down
  • search
  • user
  • language
  • chat
  • close
  • code

Components

The building blocks of every page.

Eyebrow

Short uppercase kicker above a headline.

Software development company

Badge

Status with a word, never colour alone.

LiveFailedNew

Field

Label, input and hint. Errors always include the word Error.

We reply within one business day.

Error: enter a full email address.

Card

Flat container with a hairline border. Do not nest cards.

Cloud migration

Move workloads with zero downtime and a clear rollback plan.

StepItem

Numbered journey step. The active item shows a brand bar.

  1. 01

    When you have the big idea

    Validate the concept, pick the stack and plan the first release.

    Discovery workshopPrototyping