Systems of Logic: Scaling Brand into Production

Before and After Slider:
Accessible color pairs that meet a contrast ratio of 4.5:1

Typography & Spatial Rhythm

Typography is the voice of the system. I established a hierarchy using IvyPresto Headline for brand authority and Graphik for utility and legibility. By utilizing the Graphik superfamily, specifically Graphik XXCond for high-density labels, I ensured the system could handle complex data without sacrificing clarity. This pairing allows the University's editorial heritage to coexist with a high-performance, modern UI framework that remains responsive across all digital touchpoints.

The Scale: These aren't just font sizes; they are responsive tokens. I defined specific line-height and tracking logic for desktop vs. mobile viewports to ensure the "Spartan Spirit" remained legible on every device.

Spacing & Radius: Using a base-8 spatial system, I defined Spacing and Radius tokens to eliminate "designer's choice" and enforce visual harmony across the platform.

The Handshake: From Figma to CSS

The true value of a design system is realized at the handoff. By using Figma Variables, I created a direct pipeline to production-ready CSS Custom Properties, ensuring the "Spartan" brand remains consistent from the design file to the browser.

Core Token Snapshot

Component Implementation: The Stat Block

By referencing these tokens, I built the BB3 - Stat Block component. This code handles the transformation of raw variables into a functional, accessible UI component that supports multiple brand themes.

Semantic Flexibility: The system naturally handles the "Indigo" vs. "Sand" variations designed for marketing blocks, adjusting text colors automatically for contrast.

Developer Velocity: Engineers no longer guess pixel values; they simply consume the predefined tokens, reducing QA cycles.

Systemic Adherence: Because the component is built on tokens, any future global brand update (like changing the corner radius) will reflect in the code instantly.

Interaction & Structure: Involved Talent

While the USC Upstate project focused on foundational brand rules, the Involved Talent project required a focus on high-utility interface logic. My goal was to create a rigid yet flexible system that could handle complex user interactions and varied data densities without sacrificing visual integrity.

The Interaction Matrix: States & Variations

In a functional application, a single component like a button must account for a wide range of user behaviors. I developed a comprehensive Interaction Matrix for Involved Talent to codify these logic-driven states:

The State Machine: Defining and tokenizing Default, Hover, Press, Focus, and Disabled states to ensure consistent feedback across the platform.

Visual Hierarchy: Establishing clear distinctions between Primary, Secondary, and Tertiary actions to guide the user through complex workflows.

The Inverse Strategy: To support dark-mode UI or deep indigo surfaces, I engineered a parallel "Inverse" set of color variables, allowing components to adapt to dark backgrounds while maintaining accessibility automatically.

The Structure: Responsive Grids

Layout consistency is often where design systems fail. For Involved Talent, I built a Responsive Grid System designed to bridge the gap between design intent and CSS Grid/Flexbox implementation.

Desktop (1440px): A 12-column architecture with 32px gutters for maximum data density.

Tablet (768px): Shifted to 8 columns with 24px gutters to maintain touch-target integrity.

Mobile (428px): A 4-column stack with 16px gutters, optimized for vertical scrolling.

By tokenizing the Gutter and Margin values, I ensured that the layout logic remained identical for the developer, regardless of the screen size.