Overview

This case study covers the transition from ad-hoc component styling to a system-driven approach for the portfolio. The goal was to reduce repeated styling decisions, improve visual consistency, and make future page work faster and more intentional.

Problem

The portfolio had strong visual direction but mixed CTA implementations and duplicated button patterns across sections. Important actions looked different depending on where they appeared, and introducing new call-to-actions required one-off decisions each time.

Objectives

• Define a reusable visual language grounded in existing brand colors and typography.
• Translate the logo gradient into reusable design tokens.
• Create a clear hierarchy for CTA intent: high, medium, and low emphasis.
• Ensure new pages can adopt the system without copy-paste styling.

System Decisions

1. Tokenized Color Foundation

Core colors and accent values were consolidated into shared variables. The logo gradient was simplified into a practical 3-stop sequence so it could be reused consistently:

• Start: #099BD2
• Mid: #45AE9C
• End: #90C75A

2. Reusable Sass Utilities

A shared gradient function and CTA mixins were added to the central style utilities layer. This made it possible to generate forward or reverse gradients and apply full interaction patterns without repeating declarations in every component.

3. Intent-Based CTA Tiers

Three CTA tiers were introduced:

• Primary: strongest conversion intent
• Secondary: important but non-terminal actions
• Subtle: visible supporting actions with lower visual weight

Implementation Mapping

The tier model was mapped to existing UI actions so the system reflects real user journeys.

• Primary:
  • Header Let’s Talk button
  • Contact page Send Message button
  • Footer Send Message button
• Secondary:
  • Thanks page Back to Home action
  • Project card Read more links
• Subtle:
  • Header Blog link

Documentation

A dedicated guide was created to make system decisions explicit and reusable:

• Style guide: STYLE_GUIDE.md

The guide captures tokens, typography, layout principles, motion behavior, CTA rules, and implementation references.

Outcome

The portfolio now has a clearer interaction hierarchy and a repeatable style foundation. New CTAs can be added with intent first, then mapped to a tier without inventing new button styles each time.

What Changed in Practice

• Faster styling decisions for new pages and components
• Better consistency across high-importance actions
• Less duplicated CSS and fewer one-off visual exceptions

Next Iteration

• Add spacing and radius tokens to reduce fixed values
• Add focus-visible states to all CTA tiers for stronger keyboard UX
• Expand the guide with a component inventory and usage examples