Portfolio system / Proposed direction
Review components01 / Modern Swiss
A typographic architecture for portfolio evidence: flat planes, hard rules, compressed type, and color used as wayfinding rather than decoration.
Type as structure
Color as place
Zero decorative depth
Foundational elements / Proposed tokens
Proposed translation of The1’s Modern Swiss language; normalized values, not a source-code extraction.
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.075em−0.05em0+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.