Design System · v1

A system built from the mark.

Colour, type, buttons and components — every token derived from the dingir and the Lagoon teal. Light and dark, mobile-first, and checked against WCAG AA so contrast is never a question.

Space Grotesk · GeistDisplay / Copy
Fira CodeMono
Lagoon + PapayaPrimary / Secondary
4 semantic rolesSuccess · Warning · Danger · Info
01

Colour

Lagoon is the signature; Papaya is its warm counterweight — a vivid coral that plays against the cool teal without competing with it. Each ramp runs 50→900; the base and hover stops are marked. Click any swatch to copy its hex.

Lagoon — primary
Papaya — secondary
Neutral — ink & structure
Core tokens
Lagoon#08A8A3Primary · links · focus · accents
Deep#067F7BPrimary button fill (AA)
Papaya#FF854DSecondary accent & button fill
Papaya Deep#B75020Accessible secondary text (AA)
Semantic roles — tint + solid, contrast-checked
Successtext AA ✓
DeployedConfirm#12A56A
Warningtext AA ✓
PendingReview#E1930C
Dangertext AA ✓
FailedDelete#E5484D
Infotext AA ✓
NoteDetails#3B7DE6
02

Ink & surfaces

Text never sits on pure black or pure white — Ink #10131A on light, Paper #F4F6F7 on dark. Softer than #000/#fff, still comfortably above AA. Every pairing below states its measured contrast ratio.

Surfaces — three elevations, both themes

Background

The page floor. Everything rests on it.

--bg

Surface

Cards, panels, inputs — one step up.

--surface

Secondary surface

Papaya-tinted fills for warmth & grouping.

--surface-secondary
Text on background — contrast ledger
Primary text — InkHeadings, body copy, high-emphasis—AA ✓
Secondary text — SlateDescriptions, metadata, sub-labels—AA ✓
Muted textHints, disabled, non-essential only—Large / UI
Primary link — LagoonInline links, interactive text—AA ✓
03

Foundations

The invisible scaffolding — spacing, radius, elevation, motion and icons. Consistent primitives are what make the system feel like one product rather than a pile of screens.

Spacing · 4px base

Radius

sm · 8
md · 12
lg · 16
xl · 20
pill

Elevation

sm
md
lg

Motion · hover to preview

--easecubic-bezier(.22,.61,.36,1)
--dur-fast / --dur / --dur-slow120 · 200 · 350ms

Iconography · Lucide, 1.75px stroke

Line icons on a 24 grid, 1.75–2px stroke, round caps & joins. Sizes 16 / 18 / 20 / 24 to sit with text. Ship Lucide; match its grid and stroke for any custom glyph.

04

Typography

Three roles, three faces. Space Grotesk carries the wordmark and every heading so display type always matches the logo. Geist handles long-form copy and UI. Fira Code is the mono for code, data and labels.

Space Grotesk

Display · headings
Between two rivers.
AaBbCcDdEe · 0123456789 · &@#% — the dingir
enkeydo400 · Regular
enkeydo500 · Medium
enkeydo600 · SemiBold · wordmark
enkeydo700 · Bold

Geist

Copy · UI · body
Clear at any size.

The mark is the Sumerian dingir: eight cuneiform wedges that scribes pressed before the name of a god. Geist keeps long passages calm and legible while Space Grotesk stays the distinctive voice — a neutral, contemporary companion that never competes for attention. It reads cleanly from 13 px captions to 19 px lead paragraphs.

Regular400 · body
Medium500 · labels
SemiBold600 · emphasis

Fira Code

Mono · code · data
01 → FF854D
// tokens are the source of truth
const primary = "#067F7B"; // AA on white
const radius = 12; // ligatures: != >= => ---
Type scale — 1.25 major-third, Space Grotesk display
DisplayBetween two rivers56 / 1.05 / −.04em · 700
H1A system from the mark40 / 1.1 / −.03em · 600
H2Colour & contrast31 / 1.15 / −.03em · 600
H3Button system24 / 1.2 / −.02em · 600
H4Section label19 / 1.3 / −.02em · 600
Body-lgLead paragraph copy18 / 1.6 · Geist 400
BodyDefault body copy16 / 1.6 · Geist 400
SmallCaptions & helper text13.5 / 1.5 · Geist 400
Label / monoMETADATA · 012311 / .12em · Fira Code
05

Buttons

One primary action per view. The CTA fills with Deep Lagoon (4.9:1 on white — passes AA); the Papaya secondary uses the vivid coral with dark ink text (7.8:1). Neutral outline, quiet ghost, and a danger variant for destructive actions.

Variants
CTA states
Sizes
Full width
✓Do

Exactly one primary CTA per screen. Pair it with the Papaya secondary, an outline, or a ghost. Keep labels to verbs.

✕Don't

Stack two solid CTAs side by side, put white text on bright Lagoon or Papaya (fails AA), or use danger red for anything non-destructive.

06

Form controls

Inputs, selection and toggles — all sharing the button system's focus ring, radius and motion, so a form feels of a piece with everything else. Every control shows its states.

Text input · states

Enter a valid email address.

Select

Checkbox

Radio

Switch

07

Components in context

The tokens proven together — inputs, badges, alerts, a card and a pricing panel. This is the system doing real work, not swatches in isolation.

Create workspace

Name it and invite your team. You can change everything later.

Enter a valid email address.
Helps teammates recognise the space.

Alerts

Deployed to production
Your changes are live across all regions.
Usage nearing limit
You've used 82% of this month's quota.
Build failed
Step 3 exited with code 1. Check the logs.
Scheduled maintenance
Read-only mode Sunday 02:00–03:00 UTC.

Badges & tags

Primary Secondary Active Pending Overdue Draft
Studio plan
$48/ month

Everything a small team needs to ship.

  • Unlimited projects
  • Up to 10 teammates
  • Priority support
08

Token reference

The semantic layer developers consume — these remap per theme so you style once. Full CSS lives in tokens.css; drop it in and use the variables below.

TokenLightRole
--bg#FAFBFCPage background
--surface#FFFFFFCards, panels, inputs
--surface-secondary#FFF2EAPapaya-tinted grouping
--text#10131APrimary ink (18.9:1)
--text-2#565B63Secondary text (6.4:1)
--primary#08A8A3Links · focus · accent
--primary-solid#067F7BCTA fill (white text, AA)
--secondary-solid#FF854DPapaya fill (dark text, 7.8:1)
--secondary-fg#B75020Papaya text / links (AA)
--border#E4E8EBHairlines, dividers
--r-md12pxDefault corner radius
Copied