Lab Process, not a client case — this page documents how the site itself was built.

AI does the mechanical work. Design decides what’s worth keeping.

This site is built by AI + Design working together — not AI replacing design judgment, and not design ignoring what AI is good at. The two stay in their lanes, each doing what it’s actually better at. Everything below shows where that line falls.

tokens.css — live

Reading this page’s real --color-* custom properties live via getComputedStyle — not a screenshot. Toggle dark mode above to watch it update.

The Challenge

“The site looked right. The system underneath didn’t exist — every section generated in isolation, every value a one-off.”

I built this portfolio fast with AI. That speed left a familiar debt: hardcoded hex, ad‑hoc type sizes, and no bridge between Figma and code. The question wasn’t “can AI make another screen?” — it was whether I could structure tokens so an agent could maintain the system: find redundancy, spot dead values, and prove code and Figma still match.

TypeDesign System · Experiment

ContextPersonal portfolio

Year2026

RoleDesign + systems

Scope

Token architecture Figma Variables Agent audits Code ↔ design sync

Stack

tokens.css tokens.json Figma MCP Agent workflows

Results

Health as a number — not a feeling.

Three agent workflows produced a documented paper trail: input → finding → outcome. The headline metrics below are from those runs, not placeholders.

119CSS tokens in the system

5tokens consolidatable (119 → 114)

3directly-dead tokens found

118/118code ↔ Figma in sync

Hypothesis

Structure the system so an agent can operate inside it.

Most AI-assisted design-system work scaffolds components once and freezes. I wanted the opposite: a variables architecture that is machine-readable, a Figma file that mirrors code, and audits an agent can run without babysitting every line.

If tokens are semantically layered, aliases are explicit, and Figma variables map 1:1 to CSS, then an agent can perform maintenance that usually needs a human with a spreadsheet.

Token architecture

Primitives hold values. Semantics hold meaning.

Layer 1 is context-free: neutral ramps, brand, spacing, type. Layer 2 is role-based — --color-bg, --color-text — what components actually consume. Dark mode swaps the semantic block; components never hardcode a theme.

Primitive

Raw values named by scale — never used directly in components. Example: --neutral-light-900, --space-4, --duration-base.

Semantic

Intent aliases that theme. Example: --color-text → light --neutral-light-900, dark --neutral-dark-50.

--color-bgBackground

--color-surfaceSurface

--color-borderBorder

--color-textText

--color-text-mutedMuted

--color-accentAccent

/* Light: semantic → primitive */

--color-bg:   var(--neutral-light-50);

--color-text: var(--neutral-light-900);

--color-accent: var(--accent-light);

/* Dark: same roles, different ramp */

html[data-theme="dark"] {

  --color-bg:   var(--neutral-dark-900);

  --color-text: var(--neutral-dark-50);

  --color-accent: var(--accent-dark);

}

Variables

Browse the real variables — not a screenshot of Figma, a parser reading the same file.

This panel fetches this site's actual assets/tokens.css at page load and parses it into the same Primitives / Semantic split Figma uses. Click a row to copy its var(); expand a semantic color to compare Light vs Dark.

Variables

NameValue

Built by fetching and parsing this page's real stylesheet at load — counts and values can't drift from the source because they are the source.

One merge, in real code

Ten guessed clamp() formulas → one shared construction.

Every fluid heading used to carry its own hand-picked vw coefficient — ten independent guesses at how fast type should scale between viewports. The token system replaces all of them with one formula: linear interpolation between a 400px and 1440px viewport, endpoints preserved exactly from the original CSS. This is the real before/after, not a mockup.

Before — 10 ad hoc formulas

.hero-title            { font-size: clamp(52px, 9vw, 132px); }

.cta-title             { font-size: clamp(38px, 7vw, 100px); }

.case-title            { font-size: clamp(34px, 5.6vw, 64px); }

.section-head h2       { font-size: clamp(32px, 4.4vw, 52px); }

.testimonial-quote     { font-size: clamp(24px, 3.6vw, 42px); }

.case-quote blockquote { font-size: clamp(22px, 3.2vw, 38px); }

.about-lead            { font-size: clamp(26px, 3.2vw, 36px); }

.case-feature-head h3  { font-size: clamp(26px, 3.2vw, 38px); }

.service-name          { font-size: clamp(24px, 3vw, 36px); }

.cta-email             { font-size: clamp(22px, 3.2vw, 36px); }

After — 9 shared-construction tokens

/* clamp(min, min + (100vw - 400px) * (max-min)/1040, max) */

--font-fluid-2xl:  clamp(52px, 52px + (100vw - 400px) * 80/1040, 132px);

--font-fluid-xl:   clamp(38px, 38px + (100vw - 400px) * 62/1040, 100px);

--font-fluid-lg:   clamp(34px, 34px + (100vw - 400px) * 30/1040, 64px);

--font-fluid-md:   clamp(32px, 32px + (100vw - 400px) * 20/1040, 52px);

--font-fluid-quote-testimonial: clamp(24px, 24px + (100vw - 400px) * 18/1040, 42px);

--font-fluid-quote-case: clamp(22px, 22px + (100vw - 400px) * 16/1040, 38px);

--font-fluid-lead: clamp(26px, 26px + (100vw - 400px) * 11/1040, 37px); /* merged, zero-risk */

--font-fluid-heading: clamp(24px, 24px + (100vw - 400px) * 12/1040, 36px);

--font-fluid-link: clamp(22px, 22px + (100vw - 400px) * 14/1040, 36px);

Only one real merge happened — about-lead and case-feature-head h3 already shared the same min and vw coefficient in the original CSS, so folding them into --font-fluid-lead was zero-risk. The testimonial and case-quote pair looked similar but had different enough parameters that merging would have visibly resized both — so they stayed separate. That distinction was the actual design decision; collapsing the formula itself was mechanical.

Dark mode as proof

If the architecture works, theme is a switch — not a rewrite.

Toggle the theme control in the header. Every swatch and surface on this page follows semantic tokens. That same alias chain is what the agent walks when it audits “is this primitive still needed?” — including dark overrides that a naïve grep would miss.

False positive

Count only light-mode definitions and every --neutral-dark-* looks dead.

Correct graph

Include html[data-theme="dark"] aliases — those primitives are alive via the semantic layer.

Result

0 transitively-dead tokens after the full alias graph. The rigor is in the chain, not the headline count.

Agent workflows

Three audits. One paper trail each.

Inspired by the idea of agentic design systems — not “prompt a screen,” but “give the machine a vocabulary worth maintaining.” Each workflow was analysis-only: no live-site edits until reviewed. Branch: audit-agent-workflows.

Workflow 01

Token consolidation

$ audit tokens --consolidate tokens.css tokens.json > resolving var() chains to light-mode concrete values… > grouping exact matches + ΔE color deltas + ±1px neighbors… > most matches are intentional layering or cross-axis (12px = space AND type) > real redundancy: warm-alt placeholder pair (ΔE≈2.3–2.4), optional 19px step ✓ 5 droppable if every merge accepted (119 → 114) — design still decides

5tokens droppable if merges accepted (119 → 114)

Workflow 02

Dead token cleanup

$ audit tokens --dead-check tokens.css > grep production CSS/JS/HTML for var(--name)… > building reverse alias graph, including html[data-theme="dark"]… > WARNING: light-only parse would false-flag every --neutral-dark-* as dead > 23 tokens alive only via alias chain (dark theme included) ✓ 3 directly-dead · 0 transitively-dead — candidates only, nothing deleted

3directly-dead · 0 transitively-dead

Workflow 03

Code ↔ Figma drift

$ audit drift --code tokens.css --figma figma-variables-export.json > comparing 118 code tokens against 126 Figma variables… > normalizing px vs unitless, font stacks, easing, clamp() vs min/max… > found 1 code-only token: --color-placeholder-accent > added to Figma as Semantic var (alias: base/white) — same day ✓ 118/118 in sync · 0 genuine mismatches · 0 gaps

118/118tokens in sync · zero gaps

Drift audit

118 of 118 tokens in sync.

After fair comparison rules, the system holds together completely. The one code-only token found (--color-placeholder-accent) wasn’t left as a footnote — it was added to Figma as a Semantic variable, aliased to base/white, matching in both Light and Dark, the same day the audit found it.

100% paired and matching — the one gap found during the audit was closed the same day. Architectural exception: composite shadow as Figma Effect Style.

127Figma variables in export

0genuine value mismatches

0code-only gaps

3workflows validated

What I learned

The agent is fast. Judgment stays human.

Mechanical work — resolving aliases, counting refs, normalizing px vs unitless Figma numbers — is where agents shine. Collapsing two near-black text colors, or deciding whether a 19px type step is “the same thing wearing a different name,” is still a design decision. The audit’s job is to surface candidates with a paper trail, not to auto-merge without review.

Quality becomes measurable

System health is 118/118 in sync, 3 dead candidates, 5 consolidatable — not “feels tidy.”

Two greens, one canonical value

The audit found two near-identical greens in production — #33b25a (status dot) and #43bd68 (a compare-tag). Mechanically, either could win. #33b25a was kept because it was already the site-wide value; the single-use color moved instead. Usage counts are cheap for an agent to produce — deciding which one is “canonical” isn’t.

A merge the agent proposed, and lost

The audit’s first pass suggested merging two near-identical fluid quote formulas. Reversed: their real parameters (24px vs 22px min, different vw coefficients) meant merging would visibly resize both. Pattern-matching found the similarity; a human found the difference that mattered.

One gap actually closed while building this page: the drift audit flagged --color-placeholder-accent as code-only, with no Figma counterpart. It was added to Figma the same day — a Semantic variable aliased to base/white, matching in both Light and Dark. That’s the loop actually closing, not just getting described.

Go verify it yourself

Explore the full system in Figma.

Every value in the panel above is bound as a real Figma Variable in the source file — primitives, semantic aliases, Light and Dark modes. Nothing here is a swatch pasted into a frame.

Open the Figma file

The design system is no longer only documentation for developers. It’s instructions for a machine — and the designer’s job is to make those instructions worth following.

Reflection — on agentic maintenance of this portfolio’s tokens

More work

Keep exploring.

See all projects

Oil & Gas · Hess

Genesis

Centralized forecasting platform · SaaS

↗

Health · Herbalife

Pro2col

Wellness platform · Mobile

↗

Contact

Let's build
something great.

danierocruz@gmail.com

Usually respond within 24h · Open to remote, B2B & SaaS projects.