From Static Pages to a Reusable CSS System
Building a Multi-Module Platform with a Single Source of Truth

From Static Pages to a Reusable CSS System
Building a Multi-Module Platform with a Single Source of Truth

From Static Pages to a Reusable CSS System
Building a Multi-Module Platform with a Single Source of Truth

Overview

This project demonstrates how a CSS-based system can scale across multiple modules while maintaining consistency, reusability, and structural clarity—without relying on hard-coded values or isolated components.


The platform contains multiple structured sections (dashboards, calculators, resource libraries, and guided workflows), all powered by a shared design system.

The Problem

The platform required supporting multiple content-heavy modules:

  • Decision dashboards
  • Financial calculators
  • Resource directories
  • Guided frameworks

Without a system, this would result in:

  • Duplicated styles across modules
  • Inconsistent UI patterns
  • Slow iteration when expanding features
  • Increased maintenance complexity

This is a common failure point in scaling SaaS products—where UI grows faster than system logic.

The Constraint

The system was intentionally built using CSS-only architecture, without relying on external frameworks.

This constraint was used to validate:

  • Whether a single source of truth could scale
  • Whether reusable logic could replace hard-coded styling
  • Whether multi-module consistency could be maintained through structure alone

The System Architecture

Semantic Design Tokens (CSS Variables)

  • Defined a core set of semantic variables (colors, spacing, typography)
  • Implemented 5 base color roles, expanded into:
    1. 5 light mode tokens
    2. 5 dark mode tokens

Component-Level Reusability

All UI elements were built using shared rules:

  • Buttons, inputs, containers, and layouts inherit from base classes
  • No component contains isolated or hard-coded styling
  • Visual consistency is enforced through inheritance, not duplication

Theming & Mode Logic

  • Light and dark modes are controlled through token switching
  • No component-level overrides required
  • Entire UI adapts through variable changes only

The logic used on the Learning Strategy System is used here as well - Try changing the theme here! while clicking the available options under the button shown bellow.

This is an image, click button on the top right below "Navigation tips"

System Layers

The architecture follows a clear hierarchy:

  • Base Layer → Tokens (colors, spacing, typography)
  • Component Layer → Reusable UI elements
  • Module Layer → Dashboards, calculators, resource sections

Each layer builds on top of the previous without breaking consistency.

Proof of Scale

Modules

The system supports multiple distinct modules, including:

These were not designed independently.

All modules:

  • Decision Dashboard
  • Inherit from the same system
  • Use the same tokens
  • Maintain consistent behavior and structure

Go To Entire System ››

6. Outcomes

System-Level Impact

  • Eliminated duplicated styling across modules
  • Enabled consistent UI logic across all sections
  • Reduced effort required to expand new features
  • Ensured visual parity between different content types

Development Efficiency

  • No need to “inspect and copy” styles manually
  • Changes can be applied globally through token updates
  • New modules can be built using existing components

Cross-Platform Translation

While this system was implemented in CSS, the architecture is platform-agnostic.

The same logic can translate into:

  • Web → CSS Custom Properties
  • iOS → SwiftUI tokens / theme structures
  • Android → Kotlin / Compose design tokens

This enables a “one decision → multiple platforms” model without redefining design logic.

Key Insight

The core shift in this project was not visual—it was structural.

Instead of designing pages:

→ The system was designed as a set of reusable decisions

→ Components consume variables, not static values

→ Modules inherit logic, not styles

This approach transforms the UI from a collection of screens into a scalable system.

Product Context

Originally developed as a UX-driven platform for career and education decision-making, this system evolved into a structured environment for handling complex, high-stakes user flows.

It includes:

  • A quantitative decision framework
  • Financial and career planning tools
  • Resource directories
  • Guided self-assessment systems

The complexity of this content made it an ideal test case for validating a scalable design system.

This project demonstrates how a constrained, CSS-only system can scale across complex modules while maintaining consistency, reusability, and clear structural logic—mirroring the same challenges faced by growing SaaS platforms.