◆ Design System

Kate Hong Designs

One source of truth for the brand and the site — foundations, voice, and the pieces they build into. Everything here is generated from the same tokens the site runs on (app/globals.css and lib/motion.ts), so the reference and the product never drift.

◍ Brand

One studio, four moods.

The mark is a set, not a single logo. Four shapes — each with its own color and typographic voice — let the identity shift register without losing itself. The primary wordmark anchors everything; the shape system adds play.

Primary mark — used in the nav and anywhere the brand signs off. Give it clear space and never recolor it.

Shape set

Rings

#326bb8

Quatrefoil

#f4adb3

Pinwheel

#5d922a

Starburst

#e55732

Hero-mode wordmark faces

Rings

kate

Neue Haas Display

--color-mode-rings

Clover

kate

Redaction (italic)

--color-mode-clover

Burst

kate

Barbra

--color-mode-burst

Fan

kate

JetBrains Mono

--color-mode-fan

Usage

✓ DoLet one shape lead per surface, paired with its own accent and type face.

✕ Don’tDon’t crowd multiple shapes together or mix a shape with a mismatched accent.

◐ Voice & Tone

Warm, clear, and human-first.

The writing sounds like a person who cares about the problem and the people in it. Confident but never corporate; strategic but never cold.

“I’m Kate, a designer who loves intuitive experiences, strategic storytelling, creating clarity, and people.”

Human-first

Lead with the person, not the feature. “problems that feel impossible until you talk to the person living them.”

Clear over clever

Plain words, short sentences, no jargon. Clarity is the whole point of the work.

Strategic

Ground claims in research and outcomes — insights, friction, trade-offs, not adjectives.

Lightly playful

A little whimsy is on-brand — “doodles, daydreams” — but it never undercuts the substance.

◆ Color

Ink on ghost-white, with four accents.

A near-white canvas and warm-black ink do most of the work. Four accents — sampled straight from the logo — carry energy and map one-to-one to the brand shapes; the same four tint the interactive wordmark. Depth comes from opacity, not new colors.

Core

#f8f8ff

Canvas

--color-canvas

#efe5d2

Canvas warm

--color-canvas-warm

#1a1818

Ink

--color-ink

#4a4543

Ink soft

--color-ink-soft

Accents (brand)

#326bb8

Blue — Rings

--color-blue

/10

/15

/20

/45

/65

#5d922a

Green — Pinwheel

--color-green

/10

/15

/30

/55

/100

#e55732

Orange — Starburst

--color-orange

/10

/15

/35

/100

#f4adb3

Pink — Quatrefoil

--color-pink

/20

/40

/55

/100

◍ Typography

A serif that leads, a sans that carries.

Source Serif 4 sets the voice on titles; Neue Haas Display handles everything functional. Three display faces are reserved strictly for the hero wordmark. All sizes are fluid clamp() scales.

Source Serif 4

Display serif · titles

.font-display / --font-display

Creating clarity.

Neue Haas Display

Sans · body & UI

.font-sans / --font-sans

Research-led, content-first.

Redaction

Wordmark only — Clover

.font-wm-redaction

kate hong designs

Barbra

Wordmark only — Burst

.font-wm-barbra

kate hong designs

JetBrains Mono

Wordmark only — Fan

.font-wm-mono

kate hong designs

Type scale

Hero.text-heroclamp(56px, 9vw, 144px)

Heading 1.text-h1clamp(40px, 5.5vw, 84px)

Heading 2.text-h2clamp(28px, 3.5vw, 48px)

Heading 3.text-h3clamp(22px, 2.4vw, 32px)

Meta / eyebrow.text-meta0.8125rem · 0.08em · uppercase

◆ Spacing & Layout

One container, one gutter.

Every section lines up to a single max width and a shared responsive gutter — so the hero, the work grid, and this page all breathe on the same rhythm. Complex layouts sit on a 12-column grid.

--layout-max

1320px

Shared content max-width (mx-auto).

--gutter

1.5rem (24px)

Page side padding, mobile.

--gutter-lg

2.5rem (40px)

Page side padding, sm and up.

12-column grid

◍ Radii & Shadows

Softly squared, gently lifted.

Corners stay tight and editorial. Elevation is used sparingly — a single resting shadow for cards and a deeper one for overlays.

--radius-card

4px · rounded-card

Cards, images, frames.

--radius-control

6px · rounded-control

Toggles & control groups.

--shadow-card

0 14px 38px -12px rgba(0,0,0,.32)

Resting card elevation.

--shadow-modal

0 28px 60px -22px rgba(0,0,0,.45)

Modals & overlays.

◐ Texture

A quiet dot grid underneath it all.

A fixed, parallaxing dot grid gives every page a subtle sense of paper and depth. A denser variant sits inside placeholders and frames.

.bg-dotgrid

--dot-ink · --dot-size (22px) — page background

.bg-dotgrid-card

--dot-ink-strong · --dot-size-card (16px) — frames

◆ Motion

One curve, a handful of speeds.

Everything moves on a single ease-out curve (EASE_OUT) and a small duration scale (DUR). Entrances reveal on scroll; interactions use spring physics. It all respects prefers-reduced-motion.

transition={ duration: 0.7, ease: EASE_OUT }

Every entrance, hover, and reveal shares this one curve. Under prefers-reduced-motion the site degrades to instant.

◍ Components

The pieces, assembled.

Recurring UI built from the foundations above — the same components the site ships.

Project card

Product Designer

Project title

Category pills

WebsiteArtworkToolExperiment

Tag / meta pill

Mobile

Underlined link

More about me

Shape toggle

Accent cards

Blue

Green

Orange

Pink

◐ Imagery

Real work, framed simply.

Case-study imagery is shown at rest inside 4px frames — no colored outlines, no heavy treatments. Video previews loop muted. When a real asset isn’t ready, a dotted placeholder holds the space honestly.

Framed asset · aspect-[16/9]◍ placeholder

· Fill the frame with object-cover; corners are rounded-card.
· No accent borders on real images — let the work speak.
· Loop card videos muted; provide a poster frame.
· Placeholders use .bg-dotgrid-card + the ◍ label.