Deep navy foundation with a blue/teal primary pair and an amber split-complement. Dark backgrounds dominate; light sections use ghost white.

Every swatch tested against the three text colors we actually use (white, our mid gray, and near-black ink) at the WCAG AA threshold for normal text (4.5:1).

Each case study gets one muted accent color, restricted to its badge label and hover border only. Never the card fill, skill chips, or CTA button. Color signals identity without competing for attention.

Syne for all display, heading, and UI label work. DM Sans for all body copy. JetBrains Mono for code and hex values only.

All interactive elements use Syne. Hover states always include translateY(-2px). Pill radius for nav and tags only.

Project cards share one neutral background and skill-chip style across all eight. Only the badge label and hover border carry each project's accent. Other Work cards sit on dark, subtle border. Both use 12px radius and lift + shadow on hover.

8-point base grid. All spacing is a multiple of 4px. Sections use 96–100px vertical padding on desktop, 64px on mobile.

0.2s for micro-interactions, 0.4–0.6s for scroll reveals. One animated background per section max. No bounces.

/* Applied via IntersectionObserver */
.fade-up { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease }
.fade-up.vis { opacity:1; transform:translateY(0) }

Decorative glow blobs behind the hero and contact section were removed. They carried no meaning and competed with content. Motion now earns its place only where it responds to something.

Fixed, 60px, dark glass. Logo left, links center, resume pill right. Custom cursor activates on all link hovers. All 8 case study pages reuse this exact structure, restyled in their own project colors.

Rules enforced across the portfolio for visual consistency and performance.

The exact custom properties defined on :root in production, not a rounded-off summary. Spacing and radius are used consistently in code but kept as plain px values rather than tokens.

/* Angela Clemons Portfolio Design Tokens v1.1 */
:root {
  /* Core */
  --ink:#0a0e14; --ink2:#1c2333; --ink3:#2e3a50;
  --mid:#6b7a99; --lite:#a8b4cc; --ghost:#f0f3f8; --white:#ffffff;
  /* Brand */
  --blue:#2a82c8; --blue-d:#1a5f96; --blue-p:#e8f2fc;
  --teal:#1e9e8e; --teal-p:#e4f5f3;
  --amber:#e8a020; --amber-p:#fdf3e0;
  /* Borders + Shadows */
  --line:rgba(10,14,20,0.08); --line2:rgba(10,14,20,0.14);
  --sh1:0 2px 16px rgba(0,0,0,0.06);
  --sh2:0 8px 40px rgba(0,0,0,0.10);
  --sh3:0 24px 72px rgba(0,0,0,0.15);
  /* Project Accents */
  --c-mayo:#1a7cc2; --c-mayo-p:#e5f2fc;
  --c-amazon:#e47c1a; --c-amazon-p:#fdf0e0;
  --c-rdr2:#b02a2a; --c-rdr2-p:#faeaea;
  --c-fort:#7c3aed; --c-fort-p:#f0ebff;
  --c-myth:#c47a1a; --c-myth-p:#fdf3e0;
  --c-box:#1e9e8e; --c-box-p:#e4f5f3;
  --c-xbox:#107c10; --c-xbox-p:#e3f5e3;
  --c-mv:#007a8a; --c-mv-p:#e0f9fc;
}