Design System - Mark Hou

Color

A black-and-white base with a single accent blue, used consistently for every interactive/selection state across the site.

Core

Ink Black

#000000

Body text, nav, titles

Paper White

#FFFFFF

Page background, card fill

Charcoal

#292929

Dark gradient base (legacy sections)

Nav Ink

#111111

Nav wordmark text

Accent

Select Blue

#8CC9FF

Hover borders, active dots, links

Select Glow

#E0E1FF

Hover glow shadow

Neutral

Tagline Gray

#B2B2B2

Hero tagline text

Muted 50

#808080

Breadcrumbs, sidebar links

Muted 65

#595959

Body copy on white

Hairline

#E6E6E6

Card borders, dividers

Typography

Three typefaces, each with one job: Anta for big display moments, Aldrich for UI labels and section titles, Inter for everything you actually read.

Anta

MARK HOU

Hero title, footer wordmark, project titles

Aldrich

Hi, I'm Mark!

Nav links, section titles, timeline cards, takeaway numbers

Inter

The quick brown fox jumps.

Body copy, descriptions, labels - weights 400 / 500 / 600 / 700

Scale

Aa64px - Hero / footer wordmark

Aa48px - Project title (max)

Aa32px - Greeting / tagline tags

Aa28px - Section headings

Aa22px - Timeline card title

Aa19px - Takeaway title

Aa15px - Body copy

Aa14px - Small / labels (--font_small)

Components

The one signature interaction - "hover select" - shows up everywhere: project cards, nav logo, Other Projects, the headshot. Sharp blue border, white corner handles, soft purple glow.

Hover Select

Hover me

Used on: nav logo, project cards, Other Projects cards, About headshot

Pills & Labels

TimeLine • Founder, CEO In progress, coming soon...

01 Start Before You Feel Ready

Timeline

About page "My Story" - active dot in Select Blue

Navigation

Active = bold black. Hover = fades to 55% black.

Iconography

A mix of native emoji (zero asset weight) and flat social/tool logos, used sparingly as accents rather than a full icon system.

Emoji accents

🎨

Design

💻

Product

📢

Branding

☀️

Daytime

🌙

Nighttime

📍

Location

🎓

Education

Social

X

GitHub

Instagram

Tools

Figma

Illustrator

React

VS Code

Spacing

An 8px-leaning gap scale, used for flex/grid gaps throughout - not a strict system, but consistent in practice.

8px - tight icon gaps

12px - nav meta, pill padding

16px - card padding, row gaps

20px - timeline / media gaps

24px - nav links, meta gaps

32px - grid gaps, footer gap

40px - section row gaps

64px - between project page sections

Borders & Radius

Soft rounding at rest, snapping to sharp corners on hover select - a deliberate "selected" feeling borrowed from Figma itself.

0 - hover select (sharp)

8px - logo frame

16px - card media

20px - --border_radius

999px - pills, dots

50% - avatars, social icons

Motion

Short, quiet transitions - nothing over half a second. Crossfades are used instead of hard swaps wherever content changes (card hover, lightbox, mobile story cards).

Toggle Blur 0.2s

Dropdown menus, "Read more" blur reveal

transition: max-height .3s ease, filter .2s ease;

Lightbox Fade 0.25s

Click-to-enlarge image overlay in/out

transition: opacity .25s ease;

Hover Select 0.3s

Default - border, color, opacity (most common)

transition: border-color .3s ease, box-shadow .3s ease;

Card Crossfade 0.4s

Card image swap, caption reveal on hover

transition: opacity .4s ease, transform .4s ease;

Tag Zoom 0.6s

Hero tagline tags grow on hover

transition: transform .6s cubic-bezier(.22,1,.36,1);

Materials

Glassmorphism used sparingly, only where it earns its keep - overlays that sit on top of real content.

Frosted caption
project card hover

Lightbox scrim
image overlay

Progress blur
"coming soon" cards