v5 / source of truth

The design system.

Tokens, primitives, and rules for the boutique-agency aesthetic. Reference this page when building features — if it's not here, it doesn't exist yet.

01 / Palette

Color tokens

Surfaces
dark
light

bg.base

#0E1218

/

#F7F4ED

dark
light

bg.surface

#161B23

/

#FFFFFF

dark
light

bg.elevated

#1E242F

/

#F2EFE6

dark
light

bg.overlay

#2A3140

/

#E5E0D3

Text
dark
light

text.primary

#F2EFE6

/

#1A1F2E

dark
light

text.secondary

#B8B4A8

/

#3D434F

dark
light

text.tertiary

#7A786F

/

#6B7280

Accent
dark
light

accent.emerald

#2D6A4F

/

#1B4332

dark
light

accent.emerald-hover

#40916C

/

#2D6A4F

dark
light

accent.gold

#B8860B

/

#8B6914

dark
light

accent.gold-soft

#D4AF37

/

#B8860B

Semantic
dark
light

semantic.error

#A8324E

/

#7A1F2D

dark
light

semantic.warning

#C9892C

/

#92671F

dark
light

semantic.success

#2D6A4F

/

#1B4332

02 / Type scale

Typography

display-xl

Take back what's yours.

Take back what's yours.

display-lg

The detective is in.

The detective is in.

display-md

Open a new case.

Open a new case.

display-sm

Recent verdicts.

Recent verdicts.

body-lg

Owly is the detective in your corner.

Owly is the detective in your corner. Bills go in. Money comes back.

body

Default paragraph copy.

The agency takes on disputes that smaller shops won't — junk fees, misapplied charges, silent rate hikes. We do the paperwork. You see the refund.

body-sm

Secondary supporting copy.

Metadata, timestamps, and supporting paragraph copy live at this size.

caption

Smallest readable size.

Filed on 2026-04-18 · Last updated 14 days ago

label · mono · restricted

CASE FILE · VERDICT · STATUS

Case File·The Agency

Mono is restricted to tag/badge labels, code, and small section headers. Not body, not CTAs, not hero kickers.

03 / Rhythm

Spacing scale

p-2

8px

p-4

16px

p-6

24px

p-8

32px

p-12

48px

p-16

64px

04 / Components

Primitives

Surface variants
variant="base"

Page-level background.

variant="elevated"

Hovered cards, modals.

variant="overlay"

Dividers, borders.

Card

Default card · p-6 · border

Brass edge

Used SPARINGLY — only on case-file moments or focal panels.

Paper grain

Subtle noise texture overlay. Almost invisible — that's correct.

Tag variants
defaultfiledverdict · recoveredverdict · deniedverdict · pending
Button variants
LampGlow · single light source
corner="tl" · subtle
corner="br" · medium
PaperGrain · standalone overlay
PaperGrain <-- noise overlay

The grain is intentionally subtle. It's not supposed to read as "noise".

05 / Geometry

Borders & radii

input · 8px
card · 12px
button · 20px
pill · 9999px
06 / Light

Shadows

warm-shadow

Soft directional shadow simulating warm light from the upper-left. One light source per scene.

no shadow · flat

Default cards stay flat. Reserve warm-shadow for focal panels.