Studio Ardium™ — Design System v1
Build anything
One source of truth — tokens, type, colour and components. Compose new elements from these and they will always look like Ardium.
tokens.css → components.css → styles.css · est. 2025 · 34.77°N
( 01 — Colour )
Ink #0A0A0A
Text · inverted surfaces
Cobalt #1E32FF
Primary · links · the mark
Signal #FF4A1C
Secondary · rare emphasis
Canvas #FCFCFA
Page background
Bone #F4F4F2
Secondary surface
Grey #9A9A9A
Metadata · captions
( 02 — Typography )
Archivo
Display & interface — weights 400–900 · var(--ard-font-display)
Instrument
Editorial accent — italic only, one word at a time · var(--ard-font-serif)
JetBrains Mono
Labels & metadata — uppercase, tracked · var(--ard-font-mono)
Display .ard-display · hero / page opener
Heading 2 accent .ard-h2 · with .ser italic accent
Lead paragraph — the intro sentence that sets up a section with a little more size and air.
.ard-lead
Body copy. Long-form reading text at a comfortable measure and a generous line height for editorial calm. Used for paragraphs across case studies and the studio story.
.ard-body
( 03 — Buttons & Links )
Start a project →
View work →
Read more
.ard-btn · .ard-btn--cobalt · .ard-btn--ghost
.ard-textlink · .ard-link
( 04 — Tags )
Branding
Web Design
Art Direction
Motion
.ard-tag — hover to invert
( 05 — Cards & Metrics )
Brand Systems Identity, logo and the rules that hold a brand together across every surface.
Digital Product Websites and interfaces designed with the same rigour as the brand itself.
Art Direction Photography, motion and the visual tone that gives work its atmosphere.
.ard-card · .ard-metric
( 06 — Media )
.ard-media — grayscale, hover-zoom, mono corner tag
( 07 — Dark surface )
Let's talk .
Add .ard-dark-surface to any section to flip the whole block to the inverted palette — type, body and rules adapt automatically.
( 08 — Core tokens )
--ard-ease cubic-bezier(.16,1,.3,1) — the one true easing--ard-maxw 1280px · --ard-gutter-lg 56px · --ard-section-y 88px--ard-radius 0 — corners are always sharp--ard-shadow-cobalt 0 24px 50px -28px rgba(30,50,255,.5)--ard-1…--ard-10 4 · 8 · 12 · 16 · 24 · 32 · 48 · 60 · 88 · 104px