System SpecVersion 1.0.0 · 2026

Colophon & System Architecture

The Dev Den portfolio is built with typographic restraint, fluid spatial tokens, and strict accessibility gates. Every token, animation, and data flow is intentional.

Typography System: Bricolage Grotesque

One typeface family spanning weight (200–800), width (75–100), and optical size (12–96). Hierarchy is achieved through axis variation rather than competing fonts.

--text-display (Fluid 3.5rem → 10rem)

Considered Web

--text-4xl (Fluid 3rem → 5.5rem)

Architectural Precision

--text-xl Lead (1.375rem → 1.75rem)

Every interaction communicates feedback, continuity, state change, or focus. No superfluous movement.

Monospace & Tabular Figures (real code & metrics only)

LATENCY: 12ms · LCP: 1.1s · CLS: 0.00 · TBT: 0ms

SHA-256: e80yvEa3Rk97o8Q65ZqeeP1kC8gO1i8w5M4gE0V8c0Z1z6Vq4G

The Four Contrast-Audited Themes

All themes provide identical semantic tokens. Tested to surpass WCAG 2.2 AA (4.5:1 text, 3:1 UI).

Day Shiftday-shift

Crisp cool paper canvas with deep ink and rich cobalt accent.

Charcoal (Dark)charcoal

Warm dark charcoal (#151517) canvas with refined dark zinc surfaces (#1c1c1f), crisp ink (#ecebe9), and periwinkle focus ring.

Night Coder (Navy)night-coder

Deep ink-navy canvas (#0a0f1a) with midnight slate surface (#121a2a) and soft periwinkle accent.

Blueprintblueprint

Full-bleed cobalt background with crisp white typography and yellow focus.

Mono (High Contrast)mono

Pure black and white with strong border geometry and blue link accent.

Engineered Technology Stack

Built with deliberate, stable dependencies and swappable service boundaries.

Area	Tool & Strategy
Framework	Next.js 15 (App Router, Server Actions, Dynamic OG)
Language	TypeScript 5 (Strict mode, zero any)
Styling	Tailwind CSS v4 (Pure PostCSS, semantic tokens)
Animation	GSAP 3 + ScrollTrigger, Motion (LazyMotion), Lenis
Database	MongoDB Atlas (Cached client, typed collections)
Security	HMAC-SHA256 Signed Sessions, bcryptjs, Salted IP Hashing
Media	Cloudinary SDK (Signed uploads, dynamic duotone transforms)
Typography	Bricolage Grotesque (Variable weight/width/opsz via next/font)
Quality	Vitest (99 Unit tests), Playwright (@axe-core/playwright)

Performance & Accessibility Targets

Target LCP

≤ 2.0s

Target INP

≤ 200ms

Target CLS

≤ 0.05

Bundle Budget

≤ 180KB gz

Coffee cup with brewing steam and rotating progress indicator

Loading content...

Fetching assets and initializing layout.

Area

Tool & Strategy

Framework

Next.js 15 (App Router, Server Actions, Dynamic OG)

Language

TypeScript 5 (Strict mode, zero any)

Styling

Tailwind CSS v4 (Pure PostCSS, semantic tokens)

Animation

GSAP 3 + ScrollTrigger, Motion (LazyMotion), Lenis

Database

MongoDB Atlas (Cached client, typed collections)

Security

HMAC-SHA256 Signed Sessions, bcryptjs, Salted IP Hashing

Media

Cloudinary SDK (Signed uploads, dynamic duotone transforms)

Typography

Bricolage Grotesque (Variable weight/width/opsz via next/font)

Quality

Vitest (99 Unit tests), Playwright (@axe-core/playwright)