Portfolio system / Proposed direction
Review components02 / Motion stage
A dark motion-first stage where warm type, chromatic taxonomy, and choreographed response explain how components relate and change.
Motion explains state
Color names disciplines
One continuous stage
Foundational elements / Proposed tokens
Proposed motion-first system inferred from GSAP’s visual language; motion values are newly authored because the source document is incomplete.
Semantic roles, usage and minimum contrast.
canvas.defaulttext.primarybrand.primarystatus.attentionRule: 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.06em−0.045em0+0.10em4px 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.