Skip to main content
JR JR
Back home

Styleguide

Design system reference

All tokens, components, and patterns used across this site. Light and dark mode compatible. WCAG AA Compliant.

Typography

DM Sans — Primary

Semibold 600 · clamp(2rem, 4vw, 3rem) · −0.02em

Display Headline

Semibold 600 · 1.75rem · −0.015em

Section Title

Light 300 · 1rem · 1.8 — .body-text

Body text — used for descriptions and prose. Designed to be readable at comfortable line lengths.

Regular 400 · 0.9rem · 1.75 — body-sm

Body small — card descriptions, secondary content

Regular 400 · 0.78rem · 1.6 — small

Small text — metadata, captions, supporting info

DM Mono — Secondary

Regular 400 · 0.8rem · 1.6 — mono

Code, tags, metadata, numbers, timestamps

Medium 500 · 0.62rem · uppercase · 0.12em — .label

Section Label

Colors

Background

--bg

L: #F8F8F6 · D: #0A0A08

Surface

--bg-2

L: #EFEFEC · D: #141412

Surface Raised

--bg-3

L: #E5E5E1 · D: #1C1C1A

Text Primary

--text

L: #0A0A08 · D: #F0F0EC

Text Secondary

--text-2

L: #3D3D3A · D: #AAAAA6

Text Tertiary

--text-3

L: #767672 · D: #717170

Accent

--accent

L: #FF5F40 · D: #FF5F40

Accent Hover

--accent-hover

L: #E54E30 · D: #FF7A5C

Accent Tint

--accent-light

L: #FAE8E4 · D: #1F0E08

On Accent

--on-accent

L: #0A0A08 · D: #0A0A08

Border

--border

L: #E0E0DC · D: #222220

Online

--color-online

L: #22C55E · D: #22C55E

Accent Slate

--accent-slate

L: #435663 · D: #7BA3B8

Buttons

Primary button Ghost button Disabled

Usage

.btn-primary — bg: var(--accent), color: var(--on-accent)

.btn-ghost — border: var(--border), hover: var(--accent)

Tags

Design Systems Leadership Systems Active LABEL Coming soon

Default tag — bg-2 + border + text-2

Mono tag — bg-2 + border + text-3 + DM Mono

Accent tag — accent-light bg + accent border + accent text

Label — .label utility class (DM Mono, 11px, uppercase, tracking)

Coming badge — .coming-badge (DM Mono, 0.58rem, pill border, text-3)

Icons

Lucide icon set. All rendered as inline SVG. Standard sizes: 14px, 16px, 18px.

user
briefcase
compass
shield
layers
globe
message
github
arrow-up-right
lock
map-pin
cloud-rain
cloud
sun
mic
book-open

stroke-width: 1.75 · stroke-linecap: round · stroke-linejoin: round

Spacing

Tailwind 4px base unit. Key spacing values used site-wide.

1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px
24
96px

Border Radius

sm

0.375rem / 6px

md

0.5rem / 8px

lg

0.75rem / 12px

full

9999px

Elevation

flat

sm shadow

md shadow

lg shadow

Accessibility

Focus Ring

outline: 2px solid var(--accent) · offset: 3px · border-radius: 4px

Or this link

Skip Navigation

Appears on Tab keypress · links to #main-content

Skip to main content

^ visible only on keyboard focus (simulated above)

WCAG AA Contrast

AA requires ≥ 4.5:1 normal text · ≥ 3:1 large text / UI

Aa

--text on --bg (dark)

17.8:1 AA ✓
Aa

--text-2 on --bg (dark)

7.2:1 AA ✓
Aa

--accent on --bg (dark)

5.1:1 AA ✓
Aa

--text on --bg (light)

19.6:1 AA ✓
Aa

--text-2 on --bg (light)

10.2:1 AA ✓
Aa

--text-3 on --bg (light)

4.6:1 AA ✓
Aa

--on-accent on --accent

5.2:1 AA ✓

Components

Base Card

Card Title

Card body text with a comfortable reading size and relaxed line height.

Coming Soon Badge — Work item badge

Docusign Ink Design SystemComing soon

.coming-badge · DM Mono · 0.58rem · pill · border · text-3

Community Card — With hover arrow

Friends of Figma Miami

Co-leading the Miami chapter — organizing events and workshops for the local design community.

Arrow top-right · opacity 0 → 1 on hover · translate(1px, -1px)

Profile Card

headshot

Current Role

Sr. Product Design Manager

Docusign · Miami, FL

LinkedIn Email Resume

Book Cover Card

cover

UX for AI

Greg Nudelman

cover

Sentient Design

Josh Clark

Pre-ordered · June 2026

Weather Item — Currently card

Currently

weather 82°F · Sunny · Miami

Icon Button