Portfolio Design System

Tokens did most of the work at this stage. I built primitives for the raw values, then semantic tokens for how those values behave in the system. Figma variables and styles became the source of truth, and the naming stayed practical: roles like bg/surface, text/primary, and border/focus instead of loose visual guesses.

That structure shaped more than color. Typography, spacing, radius, borders, focus, and shadow all followed named scales, so both the design files and the frontend had a shared vocabulary. Pages never reach for primitives directly. They only consume the semantic layer.

Purple remained the signature, but it stopped carrying the entire site by itself. Ocean adds contrast, Slate handles structure, and the supporting state ramps give feedback and status their own vocabulary. That made the palette feel intentional instead of decorative.

The type system has distinct jobs. Space Grotesk handles display moments, navigation, and labels with enough character to give the portfolio a voice. Poppins carries the reading experience across longer case-study pages without fighting for attention.

Once the tokens were stable, I turned them into a component library. Buttons, badges, navigation, project cards, heroes, and supporting UI all reference the same semantic layer. That is where the design system starts to prove itself: the components carry the brand, the hierarchy, and the theme logic without needing one-off styling every time.

This mattered because the portfolio mixes very different content types. The same library has to support landing-page moments, index cards, navigation, long-form case studies, and utility patterns. Building the components first made those variations feel related instead of bespoke.

Page design was where the system got tested. I defined a small set of page types for the portfolio: home, about, projects, and project detail. Each one uses the same foundations and components, but with different pacing, density, and content priorities. That balance is where the design system stops being theory and starts behaving like a real product language.

Designing the pages this way made the system visible. Repeated structure became a strength, not a limitation, because the differentiation came from content, sequencing, and emphasis rather than new UI for every screen.

The frontend needed to preserve the system rather than reinterpret it. I kept the stack intentionally simple so the structure stayed legible: Pug for templates, LESS for styling, vanilla JavaScript for behavior, and a small custom build script to compile the site without adding unnecessary abstraction.

That simplicity matters because the design system survives implementation. Shared mixins handle repeated structure, LESS variables mirror the token language, and new project pages start from composition instead of a blank canvas. The code reflects the same modular thinking as the Figma file.

The point was never to keep the system trapped in Figma. It carries through into the build, from named variables, to reusable templates, to the final rendered pages.