Create Next App

Design System

Live reference driven by design-system/tokens.ts. Every entry is derived from the same token that controls the site.

Typography

Source: tokens.ts typographyTokens · CSS: globals.css @utility

Han Sun

name

class

.type-name

size var

--type-name-size: 20px

lh var

--type-name-lh: 1.25

color

text-foreground

description

Person name — largest text on the page

AI-friendly and Human-friendly applications of the AI operating system era.

name

title

class

.type-title

size var

--type-title-size: 16px

lh var

--type-title-lh: 1.25

color

text-foreground

description

Section title or project title

What I'm working on right now

name

label

class

.type-label

size var

--type-label-size: 14px

lh var

--type-label-lh: 1.5

color

text-muted-foreground

description

Section caption / status label

The complexity of space launch now is exceeding the capability of excel spreadsheet and manual operations.

name

body

class

.type-body

size var

--type-body-size: 14px

lh var

--type-body-lh: 1.5

color

text-muted-foreground

description

Paragraph body text

2 Designers + 1PM + 3 Engineers

name

meta

class

.type-meta

size var

--type-meta-size: 13px

lh var

--type-meta-lh: 1.5

color

text-muted-foreground/70

description

Project metadata labels and values

Color

Source: globals.css :root + .dark · tokens.ts colorTokens for documentation

name

background

cssVar

--background

value

oklch(1 0 0)

usage

bg-background

desc

Page and section background

name

muted

cssVar

--muted

value

oklch(0.97 0 0)

usage

bg-muted

desc

Placeholder fills, subtle surfaces

name

foreground

cssVar

--foreground

value

oklch(0.145 0 0)

usage

text-foreground

desc

Primary text, icons

name

muted-foreground

cssVar

--muted-foreground

value

oklch(0.556 0 0)

usage

text-muted-foreground

desc

Secondary text, captions, labels

name

border

cssVar

--border

value

oklch(0.922 0 0)

usage

bg-border

desc

Standard border color

name

separator

cssVar

foreground / 6%

value

rgba(foreground, 6%)

usage

bg-foreground/[0.06]

desc

Section divider lines

name

dot-border

cssVar

foreground / 30%

value

rgba(foreground,30%)

usage

bg-foreground/30

desc

Separator corner dots

name

accent-green

cssVar

#1db954

value

#1db954

usage

—

desc

Status indicator (Spotify green)

Spacing

Source: tokens.ts spacingTokens · CSS: globals.css @utility + generateCSS()

name

section-padding-x

cssVar

--space-section-x: 4rem (64px)

utility

.section-pad

description

Horizontal padding inside every section

name

section-padding-y

cssVar

--space-section-y: 4rem (64px)

utility

.section-pad

description

Vertical padding inside every section

name

text-col-width

cssVar

--space-text-col: 900px (900px)

utility

.prose-col

description

Max width for text content blocks — matches main area width

name

image-margin

cssVar

--space-image: 3rem (48px)

utility

.image-margin

description

Top & bottom margin around media

name

project-gap

cssVar

--space-project-gap: 3rem (48px)

utility

.project-gap

description

Gap between project cards

name

label-gap

cssVar

--space-label-gap: 2rem (32px)

utility

.label-gap

description

Section label → first content item

name

title-meta-gap

cssVar

--space-title-meta: 0.75rem (12px)

utility

.title-meta-gap

description

Project title → meta grid

name

meta-col-gap

cssVar

--space-meta-col: 2rem (32px)

utility

.gap-x-[var(--space-meta-col)]

description

MetaGrid label / value column gap

Border Radius

Source: tokens.ts radiusTokens · hardcoded, two values only

name

interactive

value

4px

usage

.rounded-[4px]

description

Buttons, inputs, nav items, tags

name

media

value

8px

usage

.rounded-[8px]

description

Images, cards, large placeholders

Components

Source: tokens.ts componentRegistry · live renders below

SectionLabel

components/section-label.tsx

Green dot + label text. Used at the top of every section.

MetaGrid

components/meta-grid.tsx

2-column key/value grid for project metadata.

ProjectCard

components/project-card.tsx

Full project entry: title + MetaGrid + media + body.

default

Full project detail — title, metadata, image, and description. Use for featured or standalone project entries.

image-only

Image + title only. Use in grid layouts (2-column) where density matters more than detail.

ProjectHeader

components/project-header.tsx

Project detail page header: optional caption (SectionLabel) + project name + thumbnail.

Section

components/section.tsx

Section wrapper with standard section-pad applied.

ContactButtons

components/contact-buttons.tsx

SpotlightButton (primary) + LinkedIn anchor (secondary).

Separator

app/page.tsx (inline)

Full-bleed h-px divider with corner dots. Page-layout-specific.

NavBar

components/nav-bar.tsx

Fixed top nav with frosted glass, mouse spotlight, scroll progress bar, and theme toggle.

ThemeToggle

components/theme-toggle.tsx

Dark/light mode toggle button. Lives inside NavBar.

GalleryScroll

components/gallery-scroll.tsx

Infinite looping image carousel with auto-advance and arrow controls.

AnimatedLines

components/animated-lines.tsx

Canvas animation. Balls travel along section separator lines. Fixed to viewport, z-10.

.media-frame

app/globals.css

CSS class. Clips image to rounded corners, hover scales to 1.02x inside the frame.

.light-band

app/globals.css

CSS class. 16×1px light source on Separator, downward glow only. Dark mode only — hidden in light mode.

SectionLabel · components/section-label.tsx

Section label text

MetaGrid · components/meta-grid.tsx

Team

2 Designers + 1PM + 3 Engineers

Duration

4 Months