Christopher Rangel

Design System

The real type scale, color tokens, and components this site is built from, rendered as themselves rather than redrawn as static images. Grew out of the XD Library case study.

Color Tokens

Reads the live CSS variables, so these reflect whichever theme is active right now — try the night toggle.

--ink

--paper

--muted

--accent

--accent-indigo

--border

Type Scale

Product Designer who bakes and chases patterns.

.hero h1, 2rem

One Shared Backend Instead of a Dozen Siloed Ones

.case-study-header h1, 1.9rem

Featured Work

.section-title, 1.4rem

The Decision

.case-study-body h2, 1.25rem

Body text sets in Lora at 1rem with 1.6 line-height. Long-form case-study prose reads at this size throughout the site.

body p, 1rem

A shared-backend architecture for MCP server registration and discovery.

.work-card-subtitle, 0.85rem, muted

Geometric Patterns

Each case study gets a hand-drawn SVG pattern instead of a screenshot — no stock photography, no placeholder UI.

node-graph

MCP Server Registration

path-motif

Self-Service Workflow

dot-matrix

API Governance

stacked-bars

XD Library

branch

Olaiya's Cradle

lattice

Recipe Book

merge

Branch Theory

stacked-bars

Design Debt Dashboard

dot-matrix

Evidence Engine

Components

Design SystemsInformation ArchitectureDesign Ops

.tag-pill

Systems Thinking, Human Outcomes

The best system is invisible; it just works. I design for the architecture underneath, not just the screen on top.

.principle-card

XD Library

1,000+ viewers in two weeks, 54 contributions in three months, built by matching the IA to how design specialists categorize their own work.

.work-card-supporting

1,000+ viewers in 2 weeks

.metric-callout

Role
Service Designer
Timeline
Aug 2023–Aug 2024
Tools
Figma, FigJam, React (recreation)
Team
Solo design, design-org stakeholders

.case-study-snapshot

Site Chrome

Inert replicas of the header, footer, and palette chrome — rendered here so the live site's nav, theme toggle, and command palette stay untouched.

.cmdk-hint (inert replica)

.theme-toggle (inert replica)

.brand-mark

.site-footer::before (demo)

Motion & Micro-interactions

A written inventory, not live demos — these are ambient details meant to be noticed in context, not staged out of it. All of it respects prefers-reduced-motion.