My website UI/UX DESIGN SYSTEM

This website is built the same way I approach any project I take on professionally. Since it is a showcase of my career, it felt right that the process behind it should reflect how I actually work.

I start by planning, then defining the fundamentals: colour, typography, and visual style. Once those are in place, I apply them in a modular way, building each part of the project on top of a consistent foundation. This makes every decision faster to implement, easier to keep coherent, and simpler to improve over time.

This post documents that process, one layer at a time.

The Colour Palette

The palette is built around four core colours, each playing a specific role in the visual hierarchy, with white as the accent.

#1C0F13
Coffee Bean
Primary background
#6E7E85
Slate Grey
Borders, dividers, secondary text
#B7CECE
Ash Grey
Card backgrounds, light surfaces
#BBBAC6
Pale Slate
Subtle backgrounds, tags
#FFFFFF
White
Accent: CTAs, headings, highlights

White is the accent. It appears on calls to action, key headings and interactive elements, giving the eye a clear place to land without complicating the palette.