YIQI ZHAO · DESIGN SYSTEM · 2026
STYLE
GUIDE.
The shared typography, navigation and components for Home, About, Work, AI Lab, Blog and future pages.
01 · Foundations
Neutral surfaces. One red accent for the primary action.
Spacing: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 px. Main shell: 1,440 px maximum. Detail content: 1,200 px maximum.
02 · Typography
Eight roles. One hierarchy. Lato for reading and controls; Helvetica for large display text.
Body sizes stay readable on narrow screens. Large headings scale fluidly, while navigation keeps its single row and 44 px tap targets.
Hero display
Designing intelligence.
Home statement and the largest page introductions.
Page display
Selected work.
Page identity, including the About profile title.
Large title
Ideas into experiences.
Large section, story and bento titles.
Lead / subtitle
I lead design for all-modality AI at the edge.
The dominant About introduction. Bold for company and project subheadings.
Reading body
Thoughtful design gives complex technology a clear, useful place in everyday life.
Experience descriptions and longer editorial paragraphs.
Supporting body
A design leader across AI, spatial computing, and emerging interaction systems.
Home description and both supporting About paragraphs.
Labels / controls
Work · AI Lab · About · Let’s talk
Navigation, buttons, video labels, metadata and section labels.
Micro caption
2026 · A small supporting detail
Short, nonessential annotations and tooltips.
Use the type-hero, type-page, type-title, type-lead, type-body, type-support, type-label and type-caption classes. Existing page and component classes use these same roles. Use regular 400 and bold 700; keep paragraph tracking at zero. The Lato bold wordmark follows the navigation’s responsive signature sizing.
03 · Primary action
Let’s talk keeps its original arrow, spacing and interaction states. Solid dots apply to text navigation links.
Let’s talk — Primary CTA · 48 px minimum height · 12 × 18 px padding · 14 px gap · 9 px radius.
Hollow red at rest. Solid red and white arrow on hover or focus. Gentle idle float, spring rotation, and subtle press feedback.
04 · Navigation
One shared liquid-glass chip: Yiqi Zhao · Work · AI Lab · About · message. Lato throughout, with a bold clickable name.
Home and About keep a flat header at the top, then dock the name and message into this chip. Hide on downward scroll; recall upward. At ≤390 px, the name becomes YIQI.
05 · Links & icons
Dark at rest. Black circles and white icons on hover, with compact black tooltips.
Text navigation uses a solid circle after the label: 0.55 em diameter, 0.5 em spacing, matching the text color. Use yq-text-button and an aria-hidden yq-text-button-dot. Keep the same proportions on desktop and mobile, with a visible keyboard focus ring.
06 · Experience
A native foldout. Closed by default; keyboard and touch work without a script.
MetaProduct Design Lead
Muse Code, Meta AI, Meta AI glasses, Meta Horizon Engine, and Meta World Gen.
Section title on the left, list on the right. Compact company name and role. Rounded horizontal detail surface, ready for video.
07 · Bento patterns
Keep Work / AI Lab / About inside their main tiles.
One expressive featured tile, quieter supporting tiles, neutral image controls, and a red MORE SOON cursor for unavailable projects.
Featured image: restrained depth and parallax. Supporting text navigation: a stable solid dot. Touch: stable imagery. Keep labels visible and avoid nested boxes.
08 · Motion & access
Motion supports the action.
Color feedback: 180 ms. Let’s talk arrow spring: 550 ms. Disclosure: 420 ms. Text-navigation dots stay still. A reduced-motion preference disables float and movement; focus and color feedback remain visible.
No automatic audio. Videos use native player controls. Contact links use the actual email and LinkedIn destinations.