Portfolio system / Proposed direction
Review components04 / Glass utility
A high-clarity product system with editorial typography, chartreuse action signals, and restrained frosted layers over a warm canvas.
One action color
Utility-led motion
Glass with structure
Foundational elements / Proposed tokens
Proposed glass-utility translation; glass is constrained to navigation and raised surfaces so content contrast remains stable.
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.05em−0.045em0+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.