Portfolio system / Proposed direction
Review components03 / Balanced AI
A calm editorial system that balances technical precision with generous space, soft surfaces, and small moments of generative color.
Whispered hierarchy
Warm neutral surfaces
Accent inside evidence
Foundational elements / Proposed tokens
Proposed balanced AI system: editorial restraint plus small generative accents; not a reproduction of ElevenLabs components.
Semantic roles, usage and minimum contrast.
canvas.defaulttext.primarybrand.primarystatus.errorRule: body text targets WCAG AA 4.5:1; large text 3:1; focus and component boundaries 3:1. Status never relies on color alone.
Family, weight, size, leading and tracking.
−0.045em−0.04em0+0.08em4px base scale with bounded responsive decisions.
0px 4px 8px 12px 16px 24px 32px 48px 64px 96px 128pxOne visual vocabulary and one response grammar.
Component stress test
Visible state inventory, exact geometry and equivalent content across all five directions.
01 / Button
02 / Text field
03 / Disclosure
It expresses the same intent in repeated, accepted use and preserves keyboard behavior without custom state.
Project evidence, brand treatments, and one-off narrative compositions remain locally scoped.
04 / Card resilience
Supports a text-only evidence path.
Patterns & implementation
Navigation, modal behavior and code mapping remain shared while visual tokens change by direction.
Navigation pattern
Brand left, current section centered, one next action right. At mobile widths the context label collapses before the action.
header → nav landmark → current page → primary destinationModal pattern
Open from an explicit trigger, focus the title or first field, close on Escape, restore focus to the trigger, and block background scroll.
Dialog.Root + Overlay + Content + CloseCode mapping
.projectCard {
padding: var(--space-6);
color: var(--text-primary);
background: var(--surface-raised);
border-radius: var(--radius-panel);
}Real content test
Professional project · 2024
A scalable HMI design system connecting brand language, interaction rules, reusable components, and adaptive delivery across mobile and in-vehicle products.