CURATED · OPEN · FREE

Brittany Chiang

A clean, accessible developer portfolio emphasizing typography and content hierarchy.

PortfolioDeveloperDark ModeEditorial

↓ Download design system (7 MB)Open in OpenDesign

Visit: https://brittanychiang.com

📦 Browse pack contents →

Identity DNA

AccessiblePixel-PerfectEngineeringCleanProfessional

A meticulously crafted engineering portfolio

Color

#5eead4Accent

#e2e8f0Ink

#0f172aBG

#94a3b8Muted

rgba(226,232,240,0.1)Line

High-contrast light-on-dark for readability, with teal for interactive accents.

Typography

humanist-sans · monospace

display48px · 700
h120px · 500
body16px · 400
caption12px · 500

Uppercase for labels · Muted color for secondary information · Bold for names and titles

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

4px base grid

Surfaces

sm · 4px

md · 6px

lg · 0px

pill · 9999px

rgba(226,232,240,0.1)

Layout

1100container

12columns

24pxgutter

768 / 1024breakpoints

Two-column layout with sticky sidebar navigation and main content area.

Motion & Interaction

150msmicro

300mssmall

0msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Color and background-color transitions on hover · Transform transitions on links

Text color changes, background-color changes on tags. · Standard link navigation.

Components

button Pill-shaped tags with teal background and dark text.
card Experience entries with date, title, and technology tags.
chip Small rounded rectangles for technologies.
hero Large bold name, subtitle, and short bio.

Voice & Don'ts

Tone Professional, confident, and clear.
Headlines Direct and descriptive.
CTAs Minimal, often just text links with arrows.

Don't use a light background — screenshot shows a dark slate (#0f172a) background.
Don't use a single accent color — screenshot shows teal (#5eead4) for highlights only.
Don't use wide spacing — screenshot shows tight 16px gaps and 4px base grid.
Don't use decorative fonts — screenshot shows a clean humanist sans-serif.
Don't use heavy drop shadows — screenshot shows flat surfaces.
Don't use complex gradients — screenshot shows solid colors and subtle radials.
Avoid: Overly casual language
Avoid: Flashy or distracting animations
Avoid: Vague descriptions of work

Inside the pack — real screenshots

Brittany Chiang — 桌面首屏（hero） — 桌面首屏（hero）

Brittany Chiang — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This is a personal developer portfolio focused on accessibility and engineering excellence. It uses a dark slate background (#0f172a) with light text (#e2e8f0) and a teal accent (#5eead4). Typography is a clean humanist sans-serif with clear hierarchy. Critical don'ts: don't use light backgrounds, don't overuse the teal accent, don't use decorative fonts.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko