---
name: portfolio-2-0
source_file: Portfolio 2.0
source_page: Designs
generated_at: 2026-07-31T09:31:07.056Z
updated_at: 2026-09-01
status: synced with /Portfolio_design_system and src/styles.css
---

# Portfolio 2.0 — Design Guidelines

Living reference for the design system behind this portfolio. Kept in sync with the
`Portfolio Design System Foundations` page (`src/routes/Portfolio_design_system.tsx`)
and the design tokens in `src/styles.css`.

## Source
- Figma file: Portfolio 2.0
- Figma page: Designs
- Extracted at: 2026-07-31T09:31:07.056Z

---

## 1. Design rationale

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

### Visual language
Minimal, flat and clean, reflecting both current digital product standards and my own
design approach. Balanced with something more human and personal through subtle
references to the tools and craft behind digital design.
**Figma-inspired guides, frames and component details appear as a representation of the
design process itself**: exploring, iterating and refining.

### Design principles
- Clarity over decoration.
- Consistency over complexity.
- Accessibility by default.
- Personality through details.
- Less friction, more focus.

### Navigation
Navigation is short and focused. **Works is visible from the first moment**, without
hidden menus or unnecessary layers. The desktop header shows the wordmark and three
links (HOME, CV, CONTACT); on mobile a full-screen overlay presents the same links.
Case-study and Portfolio DS pages hide the global header and rely on a local back
button.

### Accessibility
Colour system follows WCAG 2.2 AA contrast recommendations; typography and hierarchy
keep content clear while maintaining a light, minimal aesthetic.

### Designed for scanning
Structure: **Scan → Understand → Explore**. Clear hierarchy, concise content and visual
previews up front; deeper sections for those who want more detail.

---

## 2. Color tokens

All colors are exposed as Tailwind tokens in `src/styles.css` (`--color-*`).
Never hardcode hex values in components.

### Violet — primary / default palette
| Token | Hex |
| --- | --- |
| 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
| Token | Hex |
| --- | --- |
| 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 |
| black | #001018 |
| white | #FFFFFF |

### Orange — accent palette (AI side projects)
| Token | Hex |
| --- | --- |
| 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 |

### Mint — Case study 01 Multi-Assessment Reviewer Workspace
| Token | Hex |
| --- | --- |
| 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 |

### Semantic aliases
| Token | Hex | Usage |
| --- | --- | --- |
| ink | #0F3D34 | Strong display text (legacy) |
| body | #344450 | Body copy |
| link | #7533B9 | Text links (default) |
| link-hover | #401867 | Text links (hover) |

---

## 3. Typography

Typefaces:
- **Open Sauce One** — display headings (H0 Extrabold 800, H1/H2/H3 Semibold 600).
- **Inter** — subtitles and all body copy.
- **Geist Mono** — navigation, wordmark, tags and metadata.

| Style | Family | Size | Weight | Line height | Letter spacing |
| --- | --- | --- | --- | --- | --- |
| H0 | Open Sauce One | 68px | Extrabold (800) | 76px | 0% |
| H1 | Open Sauce One | 48px | Bold (700) | 54px | 0% |
| H2 | Open Sauce One | 36px | Bold (700) | 44px | 0% |
| H3 | Open Sauce One | 28px | Semibold (600) | 34px | 0% |
| Subtitle | Inter | 22px | Light (300) | 32px | 0% |
| Body L | Inter | 18px | Regular (400) | 26px | 0% |
| Body | Inter | 16px | Regular (400) | 20px | 0% |
| Caption | Inter | 13px | Light italic (300) | 18px | 0% — grey-500 |
| Tag | Geist Mono | 13px | Regular (400) | 1.2 | 8% — uppercase, grey-700 |
| Nav / wordmark | Geist Mono | 14px | Regular (400) | — | 12% nav · 6% wordmark, uppercase |

Headings scale down responsively with `clamp()` on small screens.

---

## 4. Layout

| Parameter | Value |
| --- | --- |
| Page margins | 24px left & right on every breakpoint |
| Overflow | `overflow-x: clip` on `html, body` to avoid horizontal scroll on mobile |
| Hero | Full-width portrait image, followed by a two-column grid: intro paragraph + “About me” link on the left (35%), H0 statement on the right (45%), 20% gap; 120px bottom padding before Works |
| Sections | “01 Works” and “02 AI Side Projects” as H1 headers on white background |
| Preview cards | Full width, stacked with no gap, separated by 0.75px grey-300 top/bottom borders; white background; hover background grey-50 |
| Case study cover | 562px tall on desktop, content ~40% left / visual ~60% right; right visual uses per-project `coverBg` / `coverRightBg`; videos sit centered with 60px padding, images fill without cropping |
| Border radius | Square buttons; 4px for metadata tags, swatches and icon buttons |

---

## 5. Components

| Component | Spec |
| --- | --- |
| Primary button | 4px radius, black background, white uppercase Geist Mono label (15px), violet-600 hover, violet-800 active. |
| TransparentIconButton | 36×36 icon-only button, 4px radius, 1.5 stroke icons. `tinted` variant: white 65% background (mobile / overlays). `transparent` variant: transparent default, white 70% background on hover/selected. |
| TextLink | Underlined by default, grey-900; violet-600 on hover / active. |
| Meta tag | 4px radius, Geist Mono uppercase 13px, grey-700 at 50% opacity, 0.7px border using grey-700/50. Height 28px (32px on desktop), min-width 44px (56px on desktop). |
| Card (preview) | Full width, white background, grey-300 borders. Title is H2 in grey-700, turning grey-900 on hover. Subtitle is Body. If a `previewVideo` exists, it autoplays on mobile; on desktop it starts paused and plays on hover. Static images use `object-contain`. Hover background is grey-50. |
| Info tooltip | Circular “i” icon in violet-900; tooltip background violet-900, white text, 13px regular, no outline. |
| Footer | White background, 256px tall, centered content. H3 “I’d love to connect :)”, Body “Let’s build something great together”, TextLink email, LinkedIn/GitHub icons. |
| About drawer | Full-screen overlay on mobile; portrait photo 405px height with 48px bottom padding; standard button and link styles. |

### Case study cover backgrounds

| Project | Background | Right visual background |
| --- | --- | --- |
| Sanofi employee experience journey | Violet 300 | Violet 100 |
| Multi-Assessment Reviewer Workspace | Mint 300 | Mint 100 |
| Scaling Datamaran's Design System | Violet 300 | Violet 100 |
| Redefining the Hiring Experience | Grey 100 | Grey 100 |
| Petmeback: Bringing pets back home | Orange 300 | Orange 100 |
| X-treme Sports: AI-Powered Sports Streaming app | Orange 300 | Orange 100 |

### Motion
- `footer-reveal`: 1s slide-up with bounce, `cubic-bezier(0.25,0.46,0.45,0.94)`.
- Hero cover image: subtle top-to-bottom reveal on load.
- `ScrollReveal` on the intro paragraph and Works / AI side projects blocks.
- Smooth scrolling site-wide; scroll-to-top arrow appears at 80% scroll.
- The LED banner component is present but currently commented out on the home page.