Design System
chaewonlim.com
The colors, type, spacing, motion, and components behind this site — kept here as a living reference, the same way liumichelle.com documents theirs.
Color
fg (charcoal)
#1a1a1a
Body text, headings
logo charcoal
#2b2b2b
Logo circle, wordmark
muted
#8a8a8a
Secondary text, metadata
border
#e8e8e8
Card borders, dividers
periwinkle
#7c7fbf
Numbered hero badges, accents
periwinkle hover
#62659e
Badge hover state
green
#3a9d5e
Availability dot
soft blue
#f3f1fa
Background gradient end
bg
#ffffff
Page & card surfaces
Typography — Satoshi
Chaewon Lim is a research-driven product designer
Hero H1
32–48px (clamp) · 450
Work
Section heading
24px · 500
UX/UI Design — Product Detail Pages
Card title
18px · 500
Designed UI and product detail pages with Figma.
Body
16px · 400
Mar 2025 – Apr 2026
Caption / meta
14px · 400
SKILLS & TOOLS
Micro label
12px · 500
Spacing scale
Motion
hover / underline
Nav underline, badge scale
200ms · cubic-bezier(0.2,0,0,1)
card lift
Project card hover translateY
250ms · cubic-bezier(0.2,0,0,1)
thumbnail zoom
Card image scale on hover
350ms · cubic-bezier(0.2,0,0,1)
cursor swap
Dot → arrow-circle cursor transition
220ms · cubic-bezier(0.2,0,0,1)
reveal on scroll
Section fade + rise on intersection
500–700ms · ease-out
Components
Org · Year
Project card
Hover to see the lift, border-color shift, and cursor swap used across the Work grid.
Custom cursor
A small faint dot at rest; hovering a .project-card element swaps it for a white circle with a black arrow. Move your mouse over the card above to see it.