Ink
#F5F4F0Primary text
Portfolio design system · v1.0
One language, flexible enough for different stories.
A compact system for hierarchy, interaction, accessibility, and motion—designed to keep the portfolio coherent without making every project look identical.
01 · Foundations
Color with a job to do.
Neutral surfaces carry the portfolio. Accent colors identify project context, highlight actions, and support navigation—never long-form body text.
Night
#0A0B0BPrimary canvas
Lime
#C6F45FPrimary action
Mint
#7FDCC1Systems work
Travel orange
#FF8A00Travel project cover
Yool blue
#214B88Yool project cover
Violet
#B9A6FFSecondary learning accent
02 · Typography
Large ideas, quiet details.
Geist carries the narrative; Geist Mono labels evidence, metadata, and system information. A limited scale creates clear reading levels without decorative type.
A comfortable measure, generous line height, and strong contrast make long case studies easier to scan and easier to read.
03 · Components
Consistent behavior, not identical layouts.
Buttons, links, cards, fields, status treatments, and focus states share the same interaction rules across the portfolio.
Actions
Status and tags
AvailableWeb + mobileLead design
Input anatomy
Visible label · clear value · persistent focus
04 · Motion
Movement that explains hierarchy.
Motion reveals reading order, confirms interaction, and maintains orientation. Durations remain short, transforms stay subtle, and reduced-motion preferences are respected.
Reveal
Sections enter in reading order as they approach the viewport.
560ms · ease-outResponse
Cards and controls move only enough to confirm interactivity.
180ms · ease-outProgress
A slim page indicator helps maintain orientation in long case studies.
Scroll-linked05 · Accessibility
The system includes the states people need.
Keyboard
Visible focus, logical order, skip navigation, and native interactive elements.
Contrast
High-contrast text and accents reserved for contexts where they remain readable.
Motion
Reduced-motion preferences disable reveals, loops, and large transformations.
Structure
Semantic headings, landmarks, lists, definitions, captions, and useful alternative text.
See it applied
The system should disappear behind the work.
Its job is to make the projects easier to understand—not to become the main attraction.
Explore case studies