Hana Yoon — Design Journal

Hana Yoon

Product designer exploring the space between intention and interaction.

Recent Writing

Thoughts on design systems, user research, and building products that feel right.

San Francisco, 2026

Journal

Essays on design, product thinking, and creative process.

Projects

Case studies from the field. The messy reality behind polished portfolios.

Design system component audit — before the redesign

Design Tokens

1:root {
2  --hn-primary: #5d50d2;
3  --hn-surface: #f9f7ff;
4  --hn-text: #30285e;
5  --hn-border: #e0d5ff;
6  --hn-caption: #72777F;
7  --hn-radius-sm: 8px;
8  --hn-radius-md: 12px;
9  --hn-radius-lg: 16px;
10  --hn-spacing-xs: 4px;
11  --hn-spacing-sm: 8px;
12  --hn-spacing-md: 16px;
13  --hn-spacing-lg: 24px;
14  --hn-spacing-xl: 32px;
15}
16
17@media (prefers-color-scheme: dark) {
18  :root {
19    --hn-primary: #9984fe;
20    --hn-surface: #1d1830;
21    --hn-text: #f3eeff;
22    --hn-border: rgba(255, 255, 255, 0.05);
23  }
24}

Design system tokens — consistent across light and dark modes

Tools & Stack

Category	Tool	Purpose
Design	Figma	UI design, prototyping
Code	VS Code	Development
Framework	React + TypeScript	Component architecture
Motion	Framer Motion	Micro-interactions
Testing	Storybook	Component documentation
Color	OKLCH	Perceptual color system

This is a fictional showcase built for Cravo demonstration purposes. All names, content, and details are fictitious and not associated with any real person, company, or service.

More Sites Built with Craft.do

All sites built with Cravo — turn Craft.do documents into websites.

Menu