# Rachel Chen — Design Language

## 1. Visual Theme & Atmosphere
Rachel Chen's portfolio exudes refined creative confidence. The palette is built around a near-white cool blue-tinted canvas that feels like morning light on paper — crisp, airy, and scholarly. Warm terracotta accents punctuate interactive moments, drawing the eye without shouting. The combination of a serif editorial typeface with a monospace engineering font signals the dual identity of designer and developer. The overall atmosphere is calm, curated, and quietly ambitious.

## 2. Color Palette & Roles
- **Canvas** — `#fafcfd` (near-white with blue undertone): page background, the "paper"
- **Ink** — `rgb(50, 64, 79)` (dark blue-grey): all body text and default borders
- **Accent / CTA** — `#e65f2e` (warm terracotta): buttons, highlights, interactive emphasis
- **Soft amber overlay** — `rgba(233, 141, 52, 0.31)`: warm section tints
- **Soft indigo overlay** — `rgba(221, 208, 252, 0.31)`: cool section tints
- **Deep navy overlay** — `rgba(0, 20, 69, 0.31)`: cinematic video overlays
- **Foreground dim** — `#32404f95`: secondary/muted text

The palette avoids pure black and pure white — warmth and softness are embedded at every level.

## 3. Typography Rules
- **Serif editorial** — `tiemposText` (400, 500 weight): headings and display text; conveys editorial gravitas
- **Monospace technical** — `Geist Mono` (400): code snippets, metadata, labels
- **Humanist sans** — `Geist` (400): UI navigation, captions
- Display sizes reach 52px with tight negative letter-spacing (−1.04px), creating compact editorial impact
- Body text sits at 15–17px for generous readability
- `uppercase` text transform for labels and categories — short, scannable, precise
- No bold weights beyond 500 — authority comes from typeface choice, not weight

## 4. Component Stylings
- Buttons and tags use near-pill radius (`3.35544e+07px` ≈ fully rounded), creating soft capsule shapes
- One subtle directional shadow for depth on floating elements
- Interactive overlays use semi-transparent colour washes rather than dark scrims
- Navigation is transparent over content, using ink-coloured text directly

## 5. Layout Principles
- Wide content areas with generous whitespace — content breathes
- Horizontal scroll or grid for project work; vertical flow for bio/text
- 24px horizontal padding on sections; sections themselves have no margin collapse
- Asymmetric layouts with mixed media (video+text) create rhythm

## 6. Depth & Elevation
- A single, soft shadow for cards or modals
- Depth primarily achieved through semi-transparent layered colour overlays, not shadows
- No heavy drop-shadow stacking — flatness is intentional

## 7. Do's and Don'ts
**Do:** Pair Tiempos serif headings with Geist Mono for technical details — the contrast defines the brand.
**Do:** Use terracotta (`#e65f2e`) sparingly as a single call-to-action colour.
**Do:** Apply colour overlays at ~31% opacity to tint background media sections.
**Don't:** Use pure black or pure white — every colour has a tonal bias.
**Don't:** Add heavy shadows or strong borders — depth comes from colour and type.
**Don't:** Mix fonts beyond the three-family system.

## 8. Responsive Behavior
- Horizontal padding collapses from ~64px to 24px at mobile widths
- Display type scales fluidly from 52px down; at mobile, single-column layouts take over
- Video backgrounds may be replaced or hidden on small viewports
- Navigation likely shifts to a menu toggle on mobile

## 9. Agent Prompt Guide
> Recreate Rachel Chen's portfolio aesthetic: near-white cool canvas (`#fafcfd`), dark blue-grey text (`#32404f`), terracotta CTA accent (`#e65f2e`). Use Tiempos Text for display headings with negative letter-spacing, Geist Mono for technical metadata, Geist for UI. Pill-shaped interactive elements (fully rounded). No heavy shadows — depth via semi-transparent colour washes at 31% opacity. Editorial, calm, developer-meets-designer tone.

*Generated by Sparkbites — extracted from live CSS analysis*