Design Systemjiajialin.me

Delights

Small details most people won't consciously notice, and why each one is there. 35 of them, all live.

Arriving

A notification with somewhere to go
A Notes notification announces the essay. It opens what it’s about, and swipes away to the right like on a Mac.
desktop/ExploringCard.tsx
The painting moves
A slow current drifts the painting under the glass, which bends and frosts whatever passes beneath it.
river/River.tsx
The painting keeps Stanford time
The river follows Jia’s clock: warm amber at the real Stanford sunset, cooler and dimmer after dark, untouched by day.
Try it: Add ?time=19:05 to the address to see golden hour.river/StanfordLight.tsx
It remembers where you left off
Come back another day and a “Welcome back” notification offers what you last had open. It never opens anything by itself.
desktop/WelcomeBack.tsx
A tip that only shows once
A macOS Tip teaches Spotlight a few seconds in. It shows once, and not at all if you’ve already found it.
desktop/SpotlightTip.tsx

Spotlight

Search the whole site
⌘K, “/” or the magnifier opens Spotlight, or just start typing on the desktop. It searches everything on the site.
Try it: Press ⌘K on the desktop.desktop/Spotlight.tsx
It says hi back
Type “hi”, “hire” or “coffee” and it answers like a person: “Say hi to Jia”.
desktop/spotlightIndex.ts
It’s honest about the résumé
Search “resume” and it says there isn’t one yet, and offers to email Jia for it.
desktop/spotlightIndex.ts

macOS, down to the details

Windows grow out of what opened them
Windows grow out of whatever opened them and shrink back into it. Focus follows.
desktop/Window.tsx
The dock behaves like a dock
Apps bounce once as they launch and get a dot while running. When Work is full screen, the dock hides until you reach for it.
desktop/Dock.tsx
The traffic lights work
Red closes, yellow minimizes, and green takes Work full screen and back.
desktop/TrafficLights.tsx
Minimize shrinks into the dock
Minimized windows shrink into a thumbnail at the end of the dock and come back exactly as you left them.
Try it: Open Art and click the yellow light.desktop/Window.tsx
Contact opens right above its icon
Contact opens a small Messages window right above its dock icon, with email and LinkedIn as bubbles.
Try it: Click Contact in the dock.desktop/windows/MessagesWindow.tsx
Windows have a little weight
Small windows lean as you drag them, settle on a spring, and glide a little after a flick. Big ones just follow.
Try it: Open Contact and fling it across the desktop.desktop/Window.tsx
Windows stay where you left them
Leave the desktop and come back: every window is where you left it, minimized ones included.
desktop/DesktopProvider.tsx
Right-click the desktop
Right-click the desktop for a real macOS menu where every item works. Get Info is the site’s colophon.
Try it: Right-click an empty part of the desktop.desktop/DesktopMenu.tsx
The clock is Jia’s
The menu bar shows the time at Stanford, not yours.
desktop/StanfordClock.tsx
So is the weather
Beside the clock: Stanford’s weather right now, with the condition on hover.
desktop/StanfordWeather.tsx
Mission Control
Every open window spreads out so you can pick one, then goes back exactly where it was. Hold the pointer in the top-left corner to open it, like a macOS hot corner.
Try it: Open a few windows, then push the pointer into the top-left corner, or press fn F3.desktop/MissionControl.tsx
Scroll to explore
Scroll down on the desktop and Spotlight opens, so you choose where to go: the work, the photos, the notes, or a way to say hi.
Try it: Scroll down on the desktop.desktop/ScrollToSpotlight.tsx

Reading the work

Studies open as a sheet
Case studies open as a sheet inside Safari, with their own shareable URL. Back closes them.
case/CaseSheet.tsx
Safari loads the page
Safari’s thin blue progress line runs under the address as a study opens.
desktop/windows/SafariWindow.tsx
Expand grows in place
Expand grows the same sheet to fill Safari. Nothing reloads.
case/CaseSheet.tsx
Closing goes one step at a time
Full page, then sheet, then grid. Focus lands back on the card you opened.
case/CaseSheet.tsx
A wrong password shakes
A wrong password shakes the field, like the macOS login, and offers to email Jia for access.
case/LockPanel.tsx
Unlocking starts from the top
After unlocking, a study starts at the top with focus on its title.
case/FocusOnArrival.tsx
Studies print cleanly
⌘P gives a plain document: the whole study, finished, with no desktop around it.
Try it: Open a case study and press ⌘P.case/CasePrint.tsx
Long stories keep their place
Long stories get a sticky section nav that highlights where you are.
case/SectionNav.tsx

Art

A photo on the desktop
Under the About card, a Photos widget slowly crossfades through the film photos, and holds still while you hover it. Click it and Art opens on that same photo.
desktop/PhotosWidget.tsx
Photos grow out of their tiles
Photos grow out of their thumbnails and shrink back. Arrow keys step through.
desktop/windows/ArtWindow.tsx
Films play like they’re on a Mac
Films play under macOS-style controls that fade once you stop moving.
desktop/windows/FilmPlayer.tsx

Underneath

The blueprint doorway
Hover the “jia” mark and it turns into a blueprint. Click it, or Design System in the dock, and the desktop outlines every surface on the way here.
blueprint/BlueprintMark.tsx
A Control Center for visitors
The switches icon opens a Control Center: turn motion off, or see the painting sharp. Your choices are remembered.
Try it: Click the switches icon next to the clock.desktop/ControlCenter.tsx
Every animation has an off switch
Every effect has a designed still version for reduced motion, not just a switched-off one.
styles/motion.module.css
Focus is never lost
Focus moves into windows when they open and back when they close.
desktop/DesktopProvider.tsx

Accessibility

Reduced motion gets a still composition. The painting holds still and “feel” is already written.
Control Center puts the settings in view. Reduce Motion and a sharp painting, one click from the menu bar, remembered on your device.
Everything works from the keyboard. Windows take focus, close with Esc, and hand focus back.
Focus rings follow the surface. White on the painting, near-black on white.
Glass keeps its text readable. A faint tint under the glass keeps white text at WCAG contrast over pale water.
Nothing is said by motion alone. The painting is decoration; everything you can read is real HTML.

Surfaces

Every window and page, captured from the live site.

Desktop
The home screen: menu bar, About card, notification, headline and dock over the painting.
app/page.tsxFigma 8300:1685
Work · Safari window
The case studies, full screen. The dock hides like macOS; tabs jump between sections.
desktop/windows/SafariWindow.tsxFigma 8300:2053
Case study sheet
A study opens over the dimmed grid with its own URL. Esc, × or the grid closes it.
case/CaseSheet.tsx
Case study page
The same template as a full page, for direct links and refreshes.
case/CaseStudy.tsxFigma 8312:10220
Lock panel
Protected studies check the password on the server before loading the full story.
case/LockPanel.tsxFigma 8300:1196
About · Notes window
Apple Notes with two notes: about, and the essay.
desktop/windows/NotesAboutWindow.tsxFigma 8494:6464
Art · Photos window
Photography and films, opening into the Photos detail view.
desktop/windows/ArtWindow.tsxFigma 8241:16331

Color

Everything sits on a painting, so most of the palette is white at different strengths. Each swatch sits over the painting and over white.

text

Aatext-primary#ffffffFigma10 files
Aatext-strongrgba(255, 255, 255, 0.9)Figma2 files
Aatext-secondaryrgba(255, 255, 255, 0.8)Figma2 files

glass

glass-barrgba(255, 255, 255, 0.09)Figma1 file
glass-widgetrgba(255, 255, 255, 0.13)Figma1 file
glass-chiprgba(255, 255, 255, 0.1)Figma3 files
glass-borderrgba(255, 255, 255, 0.2)Figma3 files
glass-border-strongrgba(255, 255, 255, 0.33)Figma2 files
glass-separatorrgba(255, 255, 255, 0.14)Merged1 file
glass-dock-dividerrgba(255, 255, 255, 0.27)Figma1 file

window chrome

window-titlebar-borderrgba(255, 255, 255, 0.1)Figma1 file

Window controls

traffic-close#ff5c60Figma2 files
traffic-minimize#fac800Figma2 files
traffic-zoom#35c759Figma2 files
traffic-borderrgba(0, 0, 0, 0.45)Figma1 file

Hero cards

card-about-bgrgba(255, 255, 255, 0.1)Figma2 files
card-avatar-borderrgba(255, 255, 255, 0.38)Figma1 file
card-row-bgrgba(255, 255, 255, 0.1)Figma1 file
Aacard-row-mutedrgba(255, 255, 255, 0.7)Figma2 files
Aatimeline-apple#9cc4ecFigma1 file
Aatimeline-goldman#a9cfa0Figma1 file
Aatimeline-sequoia#efcb86Figma1 file
Aatimeline-meta#f0b7c6Code1 file
Aatext-card-subtitlergba(255, 255, 255, 0.65)Figma1 file

Notification

notif-bgrgba(255, 255, 255, 0.82)Figma1 file
notif-close-bgrgba(246, 246, 246, 0.92)Code1 file
notif-close-borderrgba(0, 0, 0, 0.12)Code1 file
notif-icon-bg#f0f0f5Figma1 file
notif-icon-borderrgba(255, 255, 255, 0.21)Figma1 file
Aanotif-title#0d0d0dFigma2 files
Aanotif-time#808080Figma1 file
Aanotif-bodyrgba(38, 38, 38, 0.7)Figma2 files

Darkening behind the headline only

headline-scrimradial-gradient(ellipse 60% 40% at 50% 52%, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0) 100%)Figma1 file

Dock

dock-mini-bg#f6f6f8Figma1 file
glass-dockrgba(255, 255, 255, 0.15)Figma1 file
dock-over-window-bgrgba(96, 104, 114, 0.5)Code1 file

Glass windows

window-glass-bgrgba(255, 255, 255, 0.12)Figma1 file
window-glass-scrimlinear-gradient(rgba(22, 36, 50, 0.3), rgba(22, 36, 50, 0.3))Code1 file
Aawindow-glass-titlebarrgba(255, 255, 255, 0.08)Figma1 file
window-glass-dividerrgba(255, 255, 255, 0.05)Figma1 file
video-bgrgba(0, 0, 0, 0.85)Figma2 files

Keyboard focus rings

focus-ring-on-darkrgba(255, 255, 255, 0.95)Code6 files
focus-ring-on-lightrgba(29, 29, 31, 0.85)Code8 files

TV window

tv-page#f5f3efFigma3 files
Aatv-ink-muted#6e6e73Figma1 file
tv-rule#dedad3Figma3 files
tv-barrgba(245, 243, 239, 0.86)Code1 file

Figma

photos-content#f8f8f8Figma1 file
Aaphotos-inkrgba(0, 0, 0, 0.85)Figma2 files
photos-item#1a1a1aFigma1 file
Aaphotos-labelrgba(0, 0, 0, 0.6)Figma1 file
photos-accent#0088ffFigma1 file
photos-selectedrgba(0, 0, 0, 0.07)Figma1 file
photos-dividerrgba(0, 0, 0, 0.06)Figma1 file
photos-buttonrgba(0, 0, 0, 0.08)Figma1 file
Aaphotos-search-ink#727272Figma1 file
photos-search-bgrgba(255, 255, 255, 0.55)Figma2 files
photos-tile#a3a3a3Figma1 file
photos-play-overlayrgba(0, 0, 0, 0.35)Figma1 file
photos-play-bgrgba(255, 255, 255, 0.85)Figma1 file
photos-viewer#ffffffFigma1 file

One shading for every dock icon

dock-icon-edgergba(0, 0, 0, 0.08)Figma2 files

Dock tooltip, not in Figma

dock-tip-bgrgba(236, 236, 232, 0.82)Code4 files
dock-tip-borderrgba(255, 255, 255, 0.6)Code4 files
Aadock-tip-ink#1d1d1fCode3 files

Messages window

messages-page#ffffffCode2 files
messages-barrgba(246, 246, 246, 0.92)Code1 file
messages-linergba(0, 0, 0, 0.08)Code1 file
messages-in#e9e9ebCode1 file
Aamessages-in-ink#000000Code1 file
messages-meta#8e8e93Code1 file

404 alert

alert-bgrgba(246, 246, 246, 0.84)Code2 files
alert-borderrgba(255, 255, 255, 0.6)Code2 files
Aaalert-ink#1d1d1fCode3 files
Aaalert-bodyrgba(29, 29, 31, 0.72)Code2 files
alert-buttonrgba(0, 0, 0, 0.06)Code1 file
alert-button-hoverrgba(0, 0, 0, 0.1)Code1 file

Desktop right-click menu + Get Info

Aacontext-menu-selectedrgba(0, 0, 0, 0.08)Figma1 file
Aacontext-menu-separatorrgba(0, 0, 0, 0.1)Figma1 file
info-page#f6f6f6Figma1 file
info-linergba(0, 0, 0, 0.08)Figma1 file
Aainfo-label#6e6e73Figma2 files

Mission Control

mission-dimrgba(10, 16, 24, 0.32)Figma1 file

Stanford light over the painting

light-goldenrgb(255, 158, 77)Figma1 file
light-nightrgb(31, 43, 92)Figma1 file

Control Center

cc-tile-bgrgba(0, 0, 0, 0.05)Code1 file
cc-tile-hoverrgba(0, 0, 0, 0.08)Code1 file
cc-glyph-offrgba(0, 0, 0, 0.08)Code1 file
cc-glyph-on#1d1d1fCode1 file
spotlight-bgrgba(255, 255, 255, 0.82)Code2 files
Aaspotlight-ink#0d0d0dCode2 files
Aaspotlight-bodyrgba(38, 38, 38, 0.7)Code1 file
Aaspotlight-faint#6e6e73Code2 files
spotlight-selectedrgba(0, 0, 0, 0.07)Code1 file
spotlight-dividerrgba(0, 0, 0, 0.06)Code1 file

Window and page palettes (11 groups)

Photos widget

photo-widget-caption-scrimlinear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45))Figma1 file

Safari "Work" window

menubar-selected-bgrgba(255, 255, 255, 0.22)Code1 file
scrollbar-thumbrgba(0, 0, 0, 0.28)Code1 file

Safari 26

safari-capsule-bgrgba(255, 255, 255, 0.78)Code2 files
safari-capsule-dividerrgba(60, 60, 67, 0.16)Code1 file
safari-tab-hoverrgba(0, 0, 0, 0.04)Code4 files
safari-segment-bgrgba(0, 0, 0, 0.05)Code2 files
safari-page#ffffffCode3 files
safari-borderrgba(0, 0, 0, 0.1)Code3 files
safari-toolbarrgba(236, 238, 241, 0.86)Code1 file
safari-dividerrgba(0, 0, 0, 0.06)Code1 file
safari-iconrgba(60, 60, 67, 0.8)Code1 file
safari-icon-dimrgba(60, 60, 67, 0.3)Code1 file
Aasafari-ink#1d1d1fCode4 files
Aasafari-ink-strong#1c1c1eCode2 files
Aasafari-ink-card#1d1d1fCode1 file
Aasafari-ink-muted#86868bCode2 files
safari-pill-bgrgba(255, 255, 255, 0.8)Code1 file
safari-pill-borderrgba(0, 0, 0, 0.1)Code1 file

Notes "About" window

notes-chromergba(244, 245, 246, 0.9)Figma1 file
notes-line#e0e0e0Figma2 files
Aanotes-ink#1c1c1eFigma3 files
Aanotes-muted#8e8e93Figma2 files
notes-selected#0a60ffFigma1 file
notes-selected-soft#e0f0ffFigma1 file
notes-tagrgba(0, 0, 0, 0.04)Figma2 files
button-blue#007affFigma2 files

Case study pages

case-page#f5f5f7Figma1 file
case-window#ffffffFigma5 files
case-chrome#f9fafbFigma2 files
case-line#e5e7ebFigma3 files
Aacase-ink#111827Figma4 files
Aacase-muted#6b7280Figma4 files
Aacase-body#374151Figma3 files
Aacase-faint#86868bFigma1 file
Aacase-link#2563ebFigma3 files
case-barrgba(255, 255, 255, 0.85)Figma1 file
case-sheet-scrimrgba(0, 0, 0, 0.18)Figma1 file
case-hero-tintlinear-gradient(90deg, #e2e4ec, #f1edf6 50%, #ebf1f5)Figma1 file
case-badge-blue-bg#e0e6f8Figma1 file
case-badge-blue#2563ebFigma1 file
case-badge-green-bg#ecfdf5Figma1 file
case-badge-green#059669Figma1 file
case-error#c81e1eFigma1 file

Protected stories

Aacase-body-strong#111827Figma1 file
case-accent#2563ebFigma2 files
case-accent-midrgba(37, 99, 235, 0.45)Figma1 file
case-accent-softrgba(37, 99, 235, 0.18)Figma1 file
case-bar-lead#60b8ffFigma1 file
Aacase-bar-muted#cbd5e1Code1 file
case-bar-current#d1d5dbFigma1 file
case-tint-bg#eff6ffFigma1 file
case-tint-line#bfdbfeFigma1 file
case-missing-bg#fee2e2Figma1 file
case-missing#b91c1cFigma1 file
case-partial-bg#fef3c7Figma1 file
case-partial#92400eFigma1 file
case-unlocked-bg#ecfdf5Figma1 file
case-unlocked-line#a7f3d0Figma1 file
case-unlocked#047857Figma1 file
case-insight-bg#fff7f8Figma1 file
case-insight-linergba(244, 164, 176, 0.3)Figma1 file

Capsule

cover-accent#7297c5Figma1 file
Aacover-apple-title#e5e5eaFigma1 file
cover-apple-glowrgba(248, 248, 248, 0.25)Figma1 file
cover-apple-glow-hoverrgba(248, 248, 248, 0.5)Code1 file
Aacover-sequoia-title#fffFigma1 file
cover-sequoia-shadowrgba(0, 0, 0, 0.25)Figma1 file
cover-lightrgba(255, 255, 255, 0.55)Code1 file
case-violet#6d28d9Figma1 file
case-violet-bg#f5f3ffFigma1 file
case-violet-line#ddd6feFigma1 file
case-grad-warmlinear-gradient(225deg, #ff967d 14.6%, #f4a4ce 85.4%)Figma1 file
case-grad-coollinear-gradient(225deg, #f4a4ce 14.6%, #6c8cee 85.4%)Figma1 file
case-grad-deeplinear-gradient(225deg, #6c8cee 14.6%, #9678e6 85.4%)Figma1 file

Lock panel

lock-panel-bg#f5f5f7Figma1 file
lock-icon-bg#e8e8edFigma1 file
lock-line#d1d5dbFigma1 file
Aalock-placeholder#9ca3afFigma1 file
lock-arrow#60b8ffFigma1 file

Photos window

photos-glasslinear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1))Figma1 file
photos-barlinear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))Figma1 file
photos-borderrgba(255, 255, 255, 0.2)Figma2 files

Player controls

player-barrgba(40, 40, 40, 0.55)Figma2 files
player-bar-edgergba(255, 255, 255, 0.14)Figma2 files
Aaplayer-ink#ffffffFigma2 files
player-trackrgba(255, 255, 255, 0.3)Figma1 file

Safari page-load progress line

safari-progress#0a84ffCode1 file

Materials

Liquid glass

The About card and dock use Figma's Glass. CSS can't refract, so a WebGL shader bends and frosts the painting under each surface and adds the light rim.

Parameter	About card	Dock
Refraction	0.5	0.71
Depth	30px	49px
Dispersion	0.4	0.56
Frost	0	90
Light angle	315°	315°
Light intensity	0.7	0.8
Radius	24px	20px

Glass type

The headline is white text run through an SVG filter: Figma's fill, shadows cut out of the letters so they don't show through, and a lit bevel.

jia

Blur

`blur-glass`	10px	windows, work tiers
`blur-menu-bar`	20px
`blur-card`	12px	light cards, dock, glass windows

Typography

hey! i'm jiaInstrument Serif · The headline, and every case study title and display line 5 files
i care about how thingsGeist · Headline line 2 and the case study cover art 4 files
feelCedarville Cursive · One handwritten word 1 file
Work · Art · About · ContactSF Pro Rounded · The default: menu bar, cards, dock labels, case study body copy 8 files
Photography · 83 itemsSF Pro Text · Window chrome, Safari and Photos, the notification, dock tooltips 25 files
Design and ProductInter · The Notes window, as in Apple Notes 1 file

Scale

Aatext-1010pxcaps eyebrows
Aatext-1111pxtimestamps, dates, caps section headers
Aatext-1212pxchips, subtitles, role rows
Aatext-1313pxmenu items, body in windows, card copy
Aatext-1414pxmenu bar name, expanded subtitle
Aatext-1515pxAbout card description
Aatext-1616pxwidget name
Aatext-1717pxlock panel title
Aatext-1818pxproject window title
Aatext-2020pxfeatured case study title, Photos album title
Aatext-2222pxnote title
Aatext-2424pxexpanded widget name
Aatext-2828pxTV window section titles (Etch)
Aatext-5656pxfull-screen Work intro name

Weights

regular 400
medium 500
semibold 600
bold 700

Spacing

Figma's px values, kept as they were.

space-2
space-4
space-6
space-8
space-10
space-12
space-14
space-16
space-20
space-24
space-28
space-40full-screen Work intro, space above the grid
space-48hero edge inset for widget + notification

Radius

radius-bubble18px
radius-alert26px
radius-context-menu12px
radius-spotlight-field30px
radius-spotlight-row14px
radius-menu-item6px
radius-chip8pxchips, note rows
radius-tile-sm10pxcard icon tiles, images, notification icon
radius-tile12pxdock app tiles, Get Info windows
radius-window16px
radius-glass20pxwidget, dock, notification
radius-glass-lg24pxexpanded widget, lock panel, app windows
radius-round999px
radius-facetime30px
radius-particles-panel18px

Shadows

photo-widget-shadow
notif-shadow
dock-shadow
safari-capsule-shadow
safari-card-shadow
notes-shadow
case-shadow
case-sheet-shadow
photos-shadow
dock-icon-shadow
dock-tip-shadow
alert-shadow
spotlight-shadow
shadow-bar
shadow-glass
shadow-window-lifted
facetime-shadow

Motion

One set of timings and curves for every interaction, shared by CSS and JavaScript. Every effect also has a reduced-motion version.

--ease-outquick start, long soft landing

--ease-expandsheet ⇄ full page: even sweep, ~50% at 1/4 time (liumichelle.com)

--ease-inexits: get out of the way

--ease-glidenot in Figma: TV film to and from the corner, eases in and settles

--ease-spring

Duration

duration-press120ms
duration-fast180ms
duration-base320ms
duration-expand400ms
duration-slow640ms
duration-glide820ms

Components

Live pieces of the desktop, built from its own CSS.

Window controls

Menu bar items: idle, open window

AboutWork

Dock icons

Work

Art

About

Contact

Notification

designing for emotion

Design Systemjiajialin.me

Delights

Arriving

A notification with somewhere to go

The painting moves

The painting keeps Stanford time

It remembers where you left off

A tip that only shows once

Spotlight

Search the whole site

It says hi back

It’s honest about the résumé

macOS, down to the details

Windows grow out of what opened them

The dock behaves like a dock

The traffic lights work

Minimize shrinks into the dock

Contact opens right above its icon

Windows have a little weight

Windows stay where you left them

Right-click the desktop

The clock is Jia’s

So is the weather

Mission Control

Scroll to explore

Reading the work

Studies open as a sheet

Safari loads the page

Expand grows in place

Closing goes one step at a time

A wrong password shakes

Unlocking starts from the top

Studies print cleanly

Long stories keep their place

Art

A photo on the desktop

Photos grow out of their tiles

Films play like they’re on a Mac

Underneath

The blueprint doorway

A Control Center for visitors

Every animation has an off switch

Focus is never lost

Accessibility

Surfaces

Desktop

Work · Safari window

Case study sheet

Case study page

Lock panel

About · Notes window

Art · Photos window

Color

text

glass

window chrome

Window controls

Hero cards

Notification

Darkening behind the headline only

Dock

Glass windows

Keyboard focus rings

TV window

Figma

One shading for every dock icon

Dock tooltip, not in Figma

Messages window

404 alert

Desktop right-click menu + Get Info

Mission Control

Stanford light over the painting

Control Center

Photos widget

Safari "Work" window

Safari 26

Notes "About" window

Case study pages

Protected stories

Capsule