Design Engineer and UX Engineer recruiting

Portfolio AI design system proof

A compact AI-readable interface contract for Portfolio AI: tokens, components, interaction rules, accessibility rules, and machine-readable docs.

machine-readable routes

design-system.md tokens.json portfolio.md llms.txt

tokens

color roles

background.base

--bg-base / #FFFFFF / page canvas

background.surface

--bg-surface / #FFFFFF / quiet panels and inputs

background.element

--bg-element / #F4F4F5 / resting underline, subtle UI fill, skeleton states

border.light

--border-light / #E2E4E9 / hairline structure only where needed

text.primary

--text-primary / #000000 / primary text and active links

text.muted

--text-muted / #A1A1AA / metadata, secondary copy, timestamps

text.underlineMuted

--text-underline-muted / #F4F4F5 / resting link underline

dark.background

--dark-bg-base / #08090A / embedded dark code/project surfaces

dark.surface

--dark-bg-surface / #121314 / embedded dark detail surfaces

type and spacing

sans

--font-sans / Switzer, Helvetica Neue, Arial, sans-serif

mono

--font-mono / Geist Mono, SF Mono, monospace

caption

--type--2 / 0.64rem

small

--type--1 / 0.8rem

body

--type-0 / 1rem

bodyLarge

--type-3 / 1.125rem

displaySmall

--type-4 / 1.25rem

--space-1 / 0.5rem

--space-2 / 1rem

--space-3 / 1.5rem

--space-4 / 2rem

--space-5 / 2.5rem

--space-6 / 3rem

--space-7 / 3.5rem

--space-8 / 4rem

motion

instant

--motion-duration-instant / 120ms

fast

--motion-duration-fast / 180ms

base

--motion-duration-base / 250ms

slow

--motion-duration-slow / 350ms

reveal

--motion-duration-reveal / 800ms

standard

--motion-ease-standard / cubic-bezier(0.22, 1, 0.36, 1)

inOut

--motion-ease-in-out / cubic-bezier(0.45, 0, 0.55, 1)

emphasized

--motion-ease-emphasized / cubic-bezier(0.34, 1.28, 0.5, 1)

component primitives

navigation

Text-first work/studies routing, identity link, and contact links using the same lateral link motion.

identity link / section tabs / contact links / breadcrumb trail

project preview

Row-based project selection with static media fallback, subtle hover movement, and reduced-motion support.

project row / preview frame / metadata line / case-study route

case study section

Editorial detail blocks for hero, lead, split proof, stats, gallery, video, links, and outcome.

hero / lead / split / stats / gallery / video / links / outcome

ai chat and recruiter intake

Streaming project-intake interface connected to deterministic project routing and public proof links.

chat input / answer stream / project action / question prompt

buttons and links

Plain text links, focus-visible outlines, press affordance, and no decorative icon dependency unless useful.

micro link / lateral link / focus ring / pressable row

cards and surfaces

Transparent or white surfaces with spacing-first hierarchy; borders appear only when structure needs them.

detail panel / media frame / code block / status block

status and proof blocks

Build version, updated time, resume links, markdown routes, and public repository proof.

build meta / proof repository list / markdown route / tokens JSON

interaction rules

Keep hover movement small: text and metadata can shift, but the layout should not reflow.
Use 180ms to 300ms transitions for hover, focus, and press feedback; reserve longer reveal timing for page entry or scroll entry.
Use blur only as a brief entry bridge, not as a permanent decorative layer.
Provide static image or text fallbacks for media previews and reduced-motion users.
Buttons, links, project rows, and video controls must be reachable by keyboard and expose visible focus states.
Loading states should preserve space so rows, inputs, and proof blocks do not jump.

accessibility rules

Use semantic routes, headings, links, buttons, lists, and landmarks before visual wrappers.
Keep contrast intent simple: black primary text on white, muted gray only for secondary copy and metadata.
Never hide essential navigation behind hover-only behavior.
Focus-visible outlines are required for interactive text, rows, buttons, and controls.
Respect prefers-reduced-motion with static or non-transform fallbacks.
Write descriptive link labels; avoid bare arrows as the only action label.

ai-readable contract

use

Compose new UI from existing route, row, section, link, proof, and media primitives.
Use token roles instead of raw color values unless documenting a token.
Keep copy concise, evidence-based, and recruiter-readable.
Prefer spacing, typography, and small motion over decorative surfaces.
Expose important proof through both visible UI and machine-readable routes.

avoid

Do not invent metrics, employers, awards, repository links, or project outcomes.
Do not create a separate visual system, large landing page, or marketing-heavy hero for proof pages.
Do not add new dependencies for primitives that already exist in the codebase.
Do not use flashy gradients, decorative glass, or large motion that competes with the work.
Do not remove reduced-motion, keyboard, or focus-visible behavior.