Design System

Design System

The portfolio uses a calm editorial design built around career progression.

Foundations

• Neutral light and dark surfaces
• Restrained green accent
• System-native sans-serif and monospace stacks
• Fluid spacing and type scales
• Fine dividers that establish reading order
• Motion limited to feedback and impact count-up
• Rounded project panels and evidence visuals that reuse the same vertical grid and spacing rhythm

Breakpoints

Width	Behaviour
1120px	Compact navigation and stacked hero
820px	Single-column section introductions
560px	Vertical content flow and full-width actions
320px	Minimum supported viewport

Brand boundary

The site is personal and does not reproduce the TD design system. Official TD employer markers appear only beside actual career roles.

Works pages extend the same editorial system with project cards, semantic metric grids, original release-flow and growth visuals, and a deep-green governance panel. Dark-theme signal surfaces use dark foreground text to retain contrast.

See docs/design-system.md for tokens, spacing, accessibility, motion, and component guidance.