Internal reference
Design System
Colors
Typography
h1 · DM Serif Display · --fs-h1: clamp(1.75rem, 8vw, 3rem)
The quick brown fox
h2 · DM Serif Display · --fs-h2: clamp(1.35rem, 5vw, 1.75rem)
The quick brown fox
h3 · DM Serif Display · --fs-h3: clamp(1.1rem, 3.5vw, 1.4rem)
The quick brown fox
h4 · Open Sans · --fs-h4: clamp(1rem, 2.5vw, 1.2rem) · weight 600
The quick brown fox
h5 · Open Sans · --fs-h5: 1rem · weight 600 · uppercase
The quick brown fox
body · Open Sans · --fs-body: 1rem / lh 1.8
The quick brown fox jumps over the lazy dog. Product and UX designer specialising in mobile and SaaS products.
.text-body-lg · --fs-body-lg: 1.1rem — intro copy, hero sub
The quick brown fox jumps over the lazy dog.
.text-meta · --fs-meta: 0.875rem — timestamps, secondary info
.text-caption · --fs-caption: clamp(0.8rem, 1.5vw, 0.9rem) — image captions, footnotes
The quick brown fox jumps over the lazy dog.
.text-label / .hero-eyebrow · --fs-label: 0.85rem uppercase — section labels, eyebrows
Product & UX Designer · France
Spacing
Buttons
Primary — .btn.btn-success
Outline — .btn.btn-outline-success
Outline sm — .btn.btn-outline-success.btn-sm — project page CTA
Ghost — .btn.btn-outline-secondary
Tags
Default — .tag — project categories
Emphasis — .tag--emphasis — hero skill labels
Meta — .badge— role & client metadata (badge shape)
Label — .tag--label — editorial taxonomy (projects page)
Project meta text — .project-meta — role/client inline
Cards
Service card
Card body copy goes here. This is how the text flows inside a service card.
Engagement card
Card body copy goes here. Hover to see elevation change.
Outcome card
Outcome-focused card with dashed border style.
Contact Form
Default (2-column)
Single column — singleColumn prop
Services Tab Panel
Turn ambiguous ideas into testable direction.
- Product strategy and positioning
- UX audits and journey mapping
- Customer discovery and usability testing
- Prioritization and roadmap alignment