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