Design System · v1

MOVE THE
NEEDLE.

The system behind the portfolio — an editorial, high-contrast language built on Bebas Neue, Epilogue, and DM Mono, anchored by a single decisive red. Documented here so every page stays consistent. Flip the toggle to see both themes.

01

PRINCIPLES

BIG TYPE, FEW WORDS

Oversized display headlines carry the page. Copy stays lean — every word earns its place.

Voice
ONE LOUD COLOR

Neutral greys do the work; a single red marks what matters. Accent is a scalpel, not a coat of paint.

Color
STRUCTURE SHOWS

Hairline rules, mono labels, and split layouts make the grid legible. Order is part of the aesthetic.

Layout
02

COLOR

Two themes share one token set. Surfaces stay near-neutral; --accent-d (#E63020) is the only saturated value and signals action, highlight, and state. Toggle the theme in the nav to preview dark.

Light · default
Background
#F4F4F4
--bg
Surface 2
#EBEBEB
--bg2
Ink
#0E0E0E
--ink
Body
#383838
--body
Muted
#5C5C5C
--muted
Accent
#E63020
--accent-d
Dark
Background
#0E0E0E
--bg
Surface 2
#1A1A1A
--bg2
Ink
#F0F0F0
--ink
Body
#ADADAD
--body
Muted
#888888
--muted
Accent
#E63020
--accent-d
03

TYPOGRAPHY

Three families, three jobs. Bebas Neue for display, Epilogue for reading (300–700 + italic), DM Mono for labels, metadata, and eyebrows.

DISPLAY
Bebas Neue · clamp 52–124px · ls .02em
SECTION TITLE
Bebas Neue · clamp 40–76px
CARD HEADING
Bebas Neue · 28–30px
Lead paragraph — the line that frames a section.
Epilogue · 21px · 300
Body copy. Calm, readable, and unhurried at 1.7 line-height. Bold pulls the eye to the phrase that matters.
Epilogue · 16–18px · 300/700
Eyebrow · Metadata · Label
DM Mono · 10–12px · uppercase · ls .1–.14em
04

COMPONENTS

The recurring parts. All pull from the shared tokens, so a theme flip cascades everywhere.

Section Tag
Eyebrow label
Tags & eyebrows
SaaSMobileResearch
Buttons & chips
+32%
Animated count-up metric
Metric tile
Ooreva
MARKETSQUARE
Work card

Fix the friction, trust follows.

Pull quote
Light / dark toggle · custom cursor · scroll reveal
Signature interactions
05

USING IT

Every page links two shared files, then adds its own page styles. Theme choice persists across the site via localStorage, so the homepage and a case study always agree.

<link rel="stylesheet" href="assets/ds.css">
<script src="assets/ds.js"></script>
Fonts: Bebas Neue · Epilogue · DM Mono (Google Fonts)