Design System

Principles

A visual system built for clarity.

The portfolio needs to support very different kinds of content - short positioning statements, project browsing, long-form case studies, images and deeper supporting pages. The design system provides enough structure to keep those experiences connected without making every page look identical.

Foundations

The building blocks.

The visual system begins with a small set of foundations that are reused across pages and components.

Typography

Editorial character, product clarity.

Source Serif 4 gives narrative content an editorial, human quality. IBM Plex Sans provides clarity for functional content, including body copy, navigation, labels, metadata, buttons and controls.

Colour

Warm, restrained and intentional.

Colour is used sparingly to establish hierarchy, warmth and interaction feedback. It is not the only method used to communicate state or meaning.

Spacing

Giving content room to breathe.

Spacing contributes to the editorial rhythm of the portfolio. The implementation uses explicit page, block, grid and section variables alongside component-level conventions.

Layout

Structure that adapts to the story.

The main content container is capped at 72rem with a 42rem reading measure. Page gutters expand at larger breakpoints, while grids and the case-study sidebar adapt at desktop widths.

The explicit token breakpoints are 48rem and 80rem. Components also use the existing Tailwind sm, md and lg breakpoints for responsive composition.

UI Elements

Small patterns, used consistently.

Components

Reusable patterns for recurring needs.

The examples below render production components with real portfolio data rather than recreating their markup for documentation.

Portfolio Redesign

Product StrategyUX/UI DesignDesign SystemAI-Assisted Development

A portfolio should do more than show finished work. I redesigned mine as a product - defining the audience, clarifying my positioning and creating an experience that helps people quickly understand not only what I design, but how I think and work.

View case study →

Role

Product Designer

Dates

2026

Gallery preview

View Gallery →

Iconography

Simple lines, clear meaning.

Icons use supplied thin-outline SVG assets, recoloured through currentColor by the shared OutlineIcon component. They support comprehension and metadata rather than becoming decorative focal points.

Illustration

A human layer without visual noise.

Existing illustrations use simple outlines, abstract people, small areas of green and terracotta, soft neutral shapes and restrained compositions. They support meaning rather than decoration.

Create a minimal editorial line illustration for a Product Designer portfolio.

VISUAL LANGUAGE

Match this established illustration system:

- Clean, refined thin-outline illustration
- Elegant editorial feel rather than cartoon, corporate vector art or playful SaaS illustration
- Simple geometric construction
- Minimal visual detail
- Plenty of negative space
- Calm, balanced composition
- Human and approachable, but sophisticated and professional
- Abstract rather than highly realistic
- Objects and people should be simplified to their essential forms
- People, when present, should have minimal or no facial features
- Avoid detailed faces, realistic anatomy or character-like expressions
- Avoid unnecessary decorative elements

LINE STYLE

- Fine, consistent dark-green/charcoal outlines
- Mostly uniform stroke weight
- Smooth, precise curves
- No sketchy lines
- No heavy outlines
- No black-filled shapes
- No drop shadows
- No blurry shadows
- No gradients unless extremely subtle and specifically requested
- No 3D effects

COLOUR

Use colour sparingly.

Primary palette:
- Deep forest green
- Muted sage green
- Warm terracotta
- Warm cream / stone neutrals

Most of the illustration should remain unfilled or neutral.

Use small areas of green and terracotta as visual accents rather than filling the entire illustration with colour.

Soft abstract background shapes may use pale sage, warm cream or stone at low visual intensity.

COMPOSITION

Keep the illustration simple and spacious.

Use:
- thin connecting paths;
- small circles/dots;
- subtle organic geometric shapes;
- simple speech bubbles;
- simplified interface/window shapes;
- abstract diagrams;
- restrained visual metaphors.

These elements should create a sense of:
- connection;
- collaboration;
- clarity;
- product thinking;
- ideas becoming structured;
- people working together.

Do not try to fill all available space.

Negative space is an intentional part of the illustration style.

PEOPLE

When people are included:
- use simplified outline figures;
- minimal facial detail;
- simplified hair and clothing;
- natural but abstract poses;
- diverse, neutral representation;
- people should support the concept rather than become the focal point.

Do not default to a male central character.

If depicting a Product Designer as the main individual, use a woman unless instructed otherwise.

STYLE TO AVOID

Do NOT use:
- cartoon illustration
- childish characters
- exaggerated proportions
- detailed facial features
- photorealism
- isometric illustration
- glossy 3D
- corporate stock illustration
- overly colourful SaaS artwork
- gradients
- dramatic lighting
- heavy shadows
- busy backgrounds
- excessive icons
- excessive decorative shapes
- text inside the illustration unless explicitly requested

The result should feel like a sophisticated editorial illustration created specifically for the same portfolio design system.

CONTENT FOR THIS ILLUSTRATION:

[DESCRIBE WHAT THE ILLUSTRATION SHOULD COMMUNICATE HERE]

OUTPUT:

- Transparent background
- PNG
- High resolution
- Clean edges
- No surrounding canvas colour
- No text unless explicitly requested
- Composition should work naturally within a responsive website layout

Responsive Design

Adapt the pattern, not just the size.

Responsive design is treated as a change in context rather than simply a smaller canvas. Components preserve their purpose across breakpoints, but their layout or interaction can change when the desktop pattern no longer makes sense.

Accessibility

Built into the system, not added at the end.

Motion & Interaction

Movement with purpose.

Existing motion is restrained: hover transitions provide feedback, gallery controls support orientation and navigation changes are subtle. Reduced-motion handling is applied where scripted scrolling is used; broader motion coverage remains a system target rather than a fully centralised utility.

Content

Structure extends beyond visual design.

The portfolio's consistency also comes from the way content is structured. Projects, case-study sections, media and related pages are represented as data rather than being hard-coded into individual page layouts. This allows the same components to support different stories while keeping navigation, presentation and responsive behaviour consistent.

Scalability

Designed to evolve with the portfolio.

The goal was not to create a frozen set of screens. The system supports new projects, different case-study narratives and deeper supporting content without requiring the portfolio to be redesigned each time.

Reflection

Constraints created more consistency.

Building the design system alongside the portfolio helped turn subjective visual choices into reusable decisions. It also made inconsistencies easier to spot. The system is intentionally small: its purpose is not to document every possible variation, but to provide enough shared structure for the portfolio to remain coherent as it grows.