---
name: Brittany Chiang
description: "A benchmark for accessible, content-focused developer portfolios."
version: alpha

colors:
  background: "#0f172a"
  primary: "#e2e8f0"
  tertiary: "#5eead4"
  neutral: "#94a3b8"
  line: "rgba(226,232,240,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.2px"
  h1:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.625
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.33
    fontWeight: 500
    letterSpacing: "1.2px"

rounded:
  sm: 4px
  md: 6px
  lg: 0px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

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

*A meticulously crafted engineering portfolio*

## Colors

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

- **Background (`#0f172a`)** — uses `bg` token
- **Primary text (`#e2e8f0`)** — uses `ink` token
- **Accent (`#5eead4`)** — uses `accent` token
- **Muted (`#94a3b8`)** — uses `muted` token
- **Borders (`rgba(226,232,240,0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

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

## Layout

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

*Rhythm:* 4px base grid

## Elevation & Depth

- Borders: rgba(226,232,240,0.1)

## Shapes

- `sm`: 4px
- `md`: 6px
- `lg`: 0px
- `pill`: 9999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```