Portfolio system / Proposed direction
Review components05 / Portfolio OS
Derived from the current deethin.site homepage: warm paper, ink-black editorial type, file-tab navigation, spatial media, and motion that reveals system relationships.
Evidence leads
Motion explains relationships
Workspace meets editorial
Foundational elements / Proposed tokens
Proposed system extracted from the current deethin.site homepage implementation and its existing motion grammar.
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.065em−0.06em0+0.10em4px base scale with bounded responsive decisions.
0px 4px 8px 12px 16px 20px 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.