Understated

Rules

1. 01

   Expressive headings, rounded copy

   Use Viaoda Libre for the introductory statement and section headings, and Open Runde for paragraphs, metadata, project captions and controls. The original Viaoda font ships at 400; keep its distinctive silhouette rather than substituting a generic serif. Geist is the source's default UI fallback; monospace is a registry fallback for technical content.

2. 02

   Let the work carry the colour

   Keep the page white, main copy black and supporting information zinc grey. Primary actions and navigation are monochrome. Project imagery, technology marks and the GitHub activity chart supply colour; do not invent a saturated structural accent.

3. 03

   Space is the main separator

   Use broad gutters (8% on small screens, 18% on desktop), generous section gaps and alternating image-and-text rows. Centre the introduction on mobile and align it to the left on desktop. Most text sections sit directly on the page rather than inside cards.

4. 04

   Rounded frames, circular actions

   The source's base radius is 10px. Project media uses rounded-2xl, which resolves to 18px through its radius scale; use rounded-panel for those frames and rounded-inset (10px) for controls. Navigation, collaboration buttons and arrow badges use fully rounded pills or circles.

5. 05

   A warm wash is an occasional material

   Certification panels use a pale warm wash with irregular, layered watercolour edges. Use paper for this warmth and keep the main page neutral. Hand-drawn marks, small image rotations and tiny raised icon tiles are accents, not a treatment for every surface.

6. 06

   Hierarchy comes from type and tone

   Keep headings in sentence case. Use black for names and emphasis, dim for supporting descriptions and faint for incidental furniture. Introductory text grows from roughly 14px to 20px; major headings reach roughly 48px. Use italics sparingly for roles and qualifications.

7. 07

   Motion lives in the controls

   Calls to action slide their circular arrow across the pill over about 500ms. Navigation expands with damped springs; small tooltips fade around 200ms. When extracting components later, use motion/react and honour useReducedMotionConfig(); the source's motion does not consistently provide reduced-motion handling.

8. 08

   Distinguish source tokens from extensions

   The source defines neutral light and dark UI tokens, but its portfolio sections keep fixed white backgrounds and black text. This entry applies those dark tokens consistently for the gallery and derives a dark warm inset. Positive, waiting, financial and frosted-menu slots extend the contract; they are not evidence of additional Portfolio components or an original financial palette.

Adapted from

Open Runde by Laurids Kern (based on Inter) · OFL-1.1 · shadcn/ui neutral token foundation · MIT

Accessibility