Building this website

A small subset of the system and design choices that support this website. The true source of truth is maintained in CLAUDE.md — setting context and mitigating drift.

See CLAUDE.md Visit Github

Typography

A role-based type scale, all set in font-normal. Volume comes from size, never weight — bold belongs on labels, not headlines.

Breakpoints

Content dictates form

text-display

Hero headlines only

Content dictates form

text-h1

Page-level headings

Content dictates form

text-h2

Section headings, pull quotes, stats

Content dictates form

text-h3

Sub-section headings within a section

Content dictates form

text-body-biggest

Card titles, sub-headings, overview prose

In order to create the universal, you must pay very great attention to the specific.

text-body-big

Primary prose, bio copy

In order to create the universal, you must pay very great attention to the specific.

text-body-small

Secondary prose, links, nav, badges

Design Systems · 2024 · Lead Designer

text-small

Captions only

Role · Team · Local Time

text-small

Footer headers, TOC title, metadata field labels

Icons

Lucide. Stroke weight scales inversely with size — bolder for UI, lighter for decorative.

ArrowUpRight

ArrowDownRight

ArrowRight

ArrowLeft

MapPin

Lock

Play

Pause

Size

size={20} strokeWidth={2}

UI icons at body-small scale — buttons, inputs, nav, inline links

size={24} strokeWidth={2}

Inline with body-small text, standalone icons

size={32} strokeWidth={1.5}

Decorative / card icon

size={48} strokeWidth={1.5}

Large decorative icon — stat cards, hero accents

Color

Visit GitHub

Color inherits from adjacent text — never set explicitly when an icon sits next to a word.

Color

Two layers — atomic raw values, semantic roles. Components only ever reference roles, so a retheme is a token swap, never a markup edit.

Neutral Scale · Atomic

neutral-000#FFFFFF→ bg-secondary, text-inverse

neutral-050#fafaf9→ bg

neutral-100#f5f5f4→ border-subtle

neutral-200#e7e5e4→ bg-tertiary, border

neutral-300#d6d3d1→ border-strong, text-placeholder

neutral-400#a8a29e

neutral-500#78716c→ text-tertiary

neutral-600#57534e→ text-secondary

neutral-700#44403c

neutral-800#292524

neutral-900#1c1917→ bg-inverse, text-primary

neutral-950#0c0a09

Primary · Atomic

Brand pink. Used for inline emphasis in case-study prose, callout numbers, and stat metrics.

primary#DA007B

Text · Semantic

text-text-primary#1c1917

text-text-secondary#57534e

text-text-tertiary#78716c

text-text-placeholder#d6d3d1

text-text-disabled#d6d3d1

text-text-inverse#FFFFFF

text-text-link#085fa0

text-text-link-hover#064b7d

text-text-on-brand#FFFFFF

Background · Semantic

bg-bg#fafaf9

bg-bg-secondary#FFFFFF

bg-bg-tertiary#e7e5e4

bg-bg-inverse#1c1917

bg-bg-brand#EAF4F4

Border · Semantic

border-border-subtle#f5f5f4

border-border#e7e5e4

border-border-strong#d6d3d1

border-border-focus#000ECD

Highlights · Application

Riley is an experience strategist, interaction designer and designer engineer based in Brooklyn, NY.

Gradient · Semantic

Two gradients. red→pink for hero copy and testimonial quotes; pink→orange for decorative use only — Footer wordmark, Nav logo dot, About glow.

from-gradient-red to-gradient-pink#f02065 → #d5189b

from-gradient-red from-[22%] to-gradient-orange#f02065 → #ff7700

Inline text highlights

from-gradient-red to-gradient-pink — the only gradient used as a text highlight. See components/Hero.tsx and components/TestimonialCarousel.tsx.

Spacing

4px base unit. Every gap on the site is a step on this ladder.

Scale

Semantic role on this site

1

4px

Inline link inner gap (gap-1); footer column gap (gap-1)

1.5

6px

Tag inner padding vertical (py-1.5); metadata cell gap (gap-1.5)

2

8px

Button icon gap (gap-2); nav links row gap (gap-2)

2.5

10px

Nav logo gap (gap-2.5); Tag horizontal padding (px-2.5); TOC item padding horizontal

3

12px

Filter Pill (small) / Tab / Segmented Control segment horizontal padding (px-3)

4

16px

Filter Pill (default) horizontal padding (px-4); Button icon gap row spacer

6

24px

Button horizontal padding (px-6)

7

28px

Callout card vertical padding (py-7)

8

32px

Two-column gap, section inner gap (gap-8); small vertical spacer (h-8)

10

40px

Horizontal page padding desktop (px-10); callout horizontal padding (px-10)

12

48px

Medium vertical spacer before images (h-12); hero bottom padding (pb-12)

16

64px

Hero top padding (pt-16); cover image bottom padding (pb-16)

20

80px

3-column body section vertical padding (py-20)

24

96px

Between subsections (h-24); next section bottom padding (pb-24)

Radius

Three radii do the work — a subset of Tailwind's default scale. Soft but precise: enough rounding to feel approachable, never so much that the geometry goes soft.

Class

Value

Use

rounded-sm

4px

Cards, callout cards, image blocks, cover image, InlineCode chip, Segmented Control segments (primary use)

rounded-md

8px

Button (primary + outline); Segmented Control container

rounded-full

9999px

IconButton, Filter Pill, Tag, Carousel Dot, nav logo dot

Shadow

Reserved for media excerpts and elements that obviously float above the page. One shadow does the work — shadow-sm — for controlled, subtle emphasis.

Motion

Two duration budgets. 150ms for color, 200ms for transform — color shifts feel snappiest fast and definite; transforms feel more intentional with slightly more travel time.

Page entry

animate-fade-in-up

0.55s ease-out · fires on scroll

Hover to lift

Hover lift

duration-200

200ms · transform

Hover me

Arrow rotate

transition-transform

150ms · rotate-45° on group-hover

Hero stagger delays are hand-tuned per page — picked by eye for each page's pacing, not derived from a shared scale.