Portfolio Design System Foundations

Design RationaleColorsTypographyLayoutComponentsDesign.md

Design rationale

This portfolio is built around a simple principle: make the information easy to find, understand, and explore.

Visual language

The visual style combines an editorial approach with product design principles, balancing strong typography, whitespace and composition with familiar UI patterns and functional elements. This creates a more expressive and personal interface while keeping the experience clear, structured and easy to navigate.

Design principles

  • Clarity over decoration.
  • Consistency over complexity.
  • Accessibility by default.
  • Personality through details.
  • Less friction, more focus.

Navigation

Recruiters often scan portfolios in under a minute, so I intentionally kept navigation short and focused. Works is visible from the first moment, without hidden menus or unnecessary layers, allowing users to move through the portfolio without losing their navigation point, and without breaking the experience.

Accessibility

Accessibility is part of the foundation. The colour system follows WCAG 2.2 AA contrast recommendations, with typography and hierarchy designed to keep content clear while maintaining a light, minimal aesthetic.

Designed for scanning

The portfolio follows a simple Scan → Understand → Explore structure. Clear hierarchy, concise content, and visual previews help recruiters quickly understand my work, while deeper sections provide more detail for those who want to explore.

Color palettes

Violet

Primary: default palette
Violet 50
#F9F3FC
Violet 100
#EFE4F8
Violet 200
#E2D0F2
Violet 300
#CAABE6
Violet 400
#AD7ED9
Violet 500
#9155CB
Violet 600
#7533B9
Violet 700
#5C2496
Violet 800
#401867
Violet 900
#231134

Grey

Neutrals: text, borders, surfaces
Grey 50
#F7F8F9
Grey 100
#EFF1F3
Grey 200
#D9DDE1
Grey 300
#B3BAC3
Grey 400
#8C96A2
Grey 500
#687787
Grey 600
#4E5D6B
Grey 700
#344450
Grey 800
#1A2A34
Grey 900
#142129

Mint

Case study 01
Mint 50
#F5FCFA
Mint 100
#F0FBF7
Mint 200
#D7F5EA
Mint 300
#B3ECD8
Mint 400
#89E1C1
Mint 500
#5FD5A8
Mint 600
#3BC492
Mint 700
#28A379
Mint 800
#1B7D5D
Mint 900
#0F3D34

Orange

Case study 4 accent
Orange 50
#FFF5EB
Orange 100
#FBE6D5
Orange 200
#F3D2B6
Orange 300
#ECB086
Orange 400
#DC8749
Orange 500
#D15D1F
Orange 600
#B74018
Orange 700
#932F13
Orange 800
#66210C
Orange 900
#321303

Text styles

H0

Creating Clarity from Complexity

68pxExtrabold76px0%
H1

Creating Clarity from Complexity

48pxBold54px0%
H2

Creating Clarity from Complexity

36pxBold44px0%
H3

I’d love to connect :)

28pxSemibold34px0%
Subtitle

Creating Clarity from Complexity

22pxLight32px0%
Body L

I am Yola, a Product Designer turning complexity into clarity.

18pxRegular26px0%
Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ac at pellentesque sapien proin. Diam volutpat faucibus in et.

16pxRegular20px0%
Caption

Sanofi Employee Journey Hub

13pxLight italic18px0%
Tag

PRODUCT DESIGN

13pxRegular16px8%

Typefaces: Open Sauce One Bold for H0–H2, Inter for H3 and all body copy, Geist Mono for tags, navigation and metadata.

Layout

Page margins

24px left & right on every breakpoint.

Case study cover

562px tall, split 38/62 between content and image, with a per-project background colour.

Section separators

Preview cards are separated by 0.75px top/bottom borders in grey-300. On hover the borders stay grey-300 and the card background turns grey-50.

Border radius

4px for buttons, icon buttons, metadata tags and swatches. Cards and preview rows stay square.

Components

Primary button
TextLink

Portfolio DS

IconButton — Transparent (web)
IconButton — Tinted (mobile / overlays)
Meta tag
Product design
Height 32px, padding 12px left & right, radius 4px, Geist Mono 13px.
Info tooltip
Card
Dividers grey-300 (0.75px), no radius. Hover: background grey-50.

Design.md

Foundations provided to Lovable to generate designs consistent with this portfolio. Includes tokens, typography, layout, and component specs, along with selected Lovable outputs, so the same system can be reused across other AI platforms.

Download .md file