Obsidian
Page background
--color-obsidian#0A0A0F
Design system · Living documentTokens, patterns, primitives
The Oaler style guide — tokens, patterns, primitives.
Every surface, letterform and micro-interaction in one place. Copy a token, inspect a component, or read the motion notes — this doc is the source of truth we ship against.
Colors
01 / 08Tokens declared in OKLCH — perceptually uniform, P3-ready. Hex values shown for reference only.
Obsidian 2
Surface
--color-obsidian-2#14141C
Obsidian 3
Elevated
--color-obsidian-3#1B1B26
Ink
Primary text
--color-ink#F5F5F7
Ink 2
Softer body
--color-ink-2#C7C7CC
Muted
Meta / eyebrow
--color-muted#8E8E96
Faint
Faintest utility
--color-faint#5E5E66
Line
Subtle border
--color-line#222222
Line 2
Stronger border
--color-line-2#2E2E36
Accent
Electric lime
--color-accent#E7FF52
Accent 2
Hover state
--color-accent-2#D2E93A
Accent Ink
Text on accent
--color-accent-ink#14140F
Typography
02 / 08Display H1 · Bricolage Grotesqueclamp(3.5rem, 9.5vw, 9rem)
Design that outlasts the trend cycle.
Heading H2text-4xl md:text-5xl
A quiet studio for loud brands.
Heading H3text-2xl md:text-3xl
Section titles carry the rhythm.
Body large · Geist
Every letterform is chosen so it can carry a lead paragraph without shouting — Geist Variable at 18px with generous leading.
Body base
Default paragraph size for long-form editorial. Uses ss01 and cv11 feature sets for a subtly warmer set.
Meta · JetBrains Mono
Section 03 — Approach · CPH → TYO
Caption
Fig. 04 — Wordmark study for Rive Éditions, 2026.
Forms
04 / 08Cards
05 / 08
EditorialKinfolk Quarterly
Issue 52 · Editorial system
Oaler read the brief and returned twice the intent.
Projects shipped
84
Across editorial, product and identity since 2019.
Icons
06 / 08arrow
plus
minus
external
chevron
check
x
search
mail
star
heart
bolt
Motion
07 / 08--ease-out-expocubic-bezier(0.16, 1, 0.3, 1)
--ease-out-quartcubic-bezier(0.25, 1, 0.5, 1)
--ease-in-out-quartcubic-bezier(0.76, 0, 0.24, 1)
duration / short500ms
duration / medium700ms
duration / long1400ms
Hover me
Scale · fade · expo
700ms with cubic-bezier(0.16, 1, 0.3, 1)
Spacing
08 / 08gutter · mobile
--page-gutter
gutter · desktop
clamp(2rem, 5vw, 4rem)
card · padding
p-8
section · py
py-24 md:py-32
container · max
max-w-[104rem]