v1.0 Design system

A quiet, considered system for AI coworkers built in Copenhagen.

Cool light greys, a single ink black, italic Space Grotesk for emphasis, and the occasional yellow-green “live” pulse. No neon, no gradient blobs, no emoji — the visual brand reflects the product: compliant by design.

SurfacesWeb + Print (A4)
Type pairSpace Grotesk × Figtree
StatusLiving
ARMADILLO.
Hosted in DK · MIT core Live
01 Brand

The wordmark, the surface, the orbit illustration.

Three visual primitives carry the brand: a five-bar armadillo silhouette paired with a wide-tracked wordmark, the signature cool-grey page gradient, and an abstract “orbit” coordinate-frame motif used to illustrate the platform anatomy.

Logo Open ↗
Surface gradient Open ↗
Orbit illustration SVG · 1.2 stroke Open ↗
02 Color

Cool greys, one ink, one functional lime.

The default page is not white — it’s a cool light grey with a barely visible vertical gradient. White is reserved for inside cards. No blue, no cobalt, no neon. Italic emphasis is grey. Lime green appears only as the 6px pulsing “live” dot.

--bg → --paper → --dark
4 families · 14 tokens
SurfaceOpen ↗
Dark surfacesOpen ↗
FunctionalOpen ↗
TokenHexWhen to use
--bg#DEDEE0default page background
--paper#ECECEEcards, raised panels
--ink#15161Aprimary text, primary button
--accent#6B6C71italic emphasis (never colored)
--lime#C8E45Fwordmark dot, ghost-btn hover, "live" pings
--periwinkle#D1D8F1selected state, in-product highlights
--dark#0C0C0Acompliance & footer panels
03 Type

A geometric display paired with a humanist body.

Headlines are tight and confident in Space Grotesk; body copy is open and readable in Figtree. Italic emphasis inside headlines renders in grey accent — never bold, never color. Eyebrow labels are uppercase Space Grotesk with a 22×1 leading rule.

Display & headings Space Grotesk · 400/500 Open ↗
Body, labels & meta Figtree · 17/1.55 Open ↗
StyleFamilyTokenSize
Display (hero)Space Grotesk 400--t-displayclamp(3rem, 7vw, 6.4rem)
H1Space Grotesk 500--t-h1clamp(2.2rem, 4.6vw, 3.6rem)
H2Space Grotesk 500--t-h2clamp(1.6rem, 3vw, 2.4rem)
BodyFigtree 400--t-body17px / 1.55
Label (eyebrow)Space Grotesk 500 caps--t-label0.78rem · 0.04em tracking
MonoJetBrains Mono / ui-mono--font-monodata & ledger only
04 Spacing, radii & shadow

8 px base. Three radii. Four soft, ink-tinted shadows.

Sections breathe at --s-10 · 130px on desktop. Radii step 8 / 14 / 22; pills are full-radius. Shadows are layered, soft, and use translucent ink — never pure black.

Spacing scale--s-1 → --s-10Open ↗
ShadowsOpen ↗
05 Iconography

Two systems. One pulsing dot.

UI line icons follow Lucide — 24×24, currentColor stroke, 1.5 weight, round caps. Brand concept glyphs are custom 40×40 SVGs wrapped in a coordinate-frame with corner ticks and a tiny accent dot. The 6px lime dot is the only place a saturated color is permitted.

UI line iconsLucide · 24 · 1.5Open ↗
Brand glyphs40×40 · coord frameOpen ↗
Status dots6px · radar pulseOpen ↗
06 Imagery

Portraits, framed mocks, and a Nordic editorial frame.

Four sanctioned image modes: portraits (B&W, tight crop), product mocks (UI inside a paper-grey frame), editorial (desaturated photography of real work situations and Danish locations — natural light, no eye contact, ample negative space), and abstract orbit glyphs. Off-brand: 3D renders, gradient blobs, isometric scenes, AI-generated photos, glossy corporate stock.

Editorial — work & place grayscale 0.78 · 1px hairline · DK-rooted Open ↗
PortraitsB&W · tight cropOpen ↗
Product mocksframed UIOpen ↗
07 Components

The small kit that builds every surface.

Pill buttons (primary ink / ghost outline), 22px-radius cards that lift on hover, status pills, large stat blocks, and the side-by-side compare row used on Pricing & Foundations.

ButtonsOpen ↗
Compare rowArmadillo · alternativesOpen ↗
08 UI kits & print

The system, applied.

High-fidelity recreations of the marketing site and an A4 print one-pager, built directly on top of these tokens. Use them as the starting points for new surfaces — fork, don’t reinvent.

Marketing site HTML · responsive Open ↗
Print one-pager A4 · @page · print.css Open ↗