The “Pre-Design System”
(Surviving the CSS Chaos)
Before you build a Design System, you usually build a mess. We call this the “Pre-Design System” Phase.
For Sugartown.io, I didn’t start with a Figma library or a token dictionary. I started with a deadline and a color code: #FE1295 (Sugartown Pink). The goal was “Just Get It Out The Door,” but the result was a fascinating case study in specific UI patterns and the immediate pain of cascading overwrites.
The “Pink Card” Component
The defining visual of this phase is the Pink Card—a container used for Resume entries and Case Studies. It wasn’t built; it was evolved.
Feature Images: The “Duotone” Standard
To avoid finding stock photos that match, I enforced a strict CSS filter on all feature images. By applying a grayscale(100%) base with a hard-light gradient overlay (Pink to Seafoam), every image automatically feels “on brand,” even if it’s just a screenshot of a terminal.
The Pain: Cascading Overwrites
The cost of this speed? Specificity Wars.
Right now, my style.css is fighting my theme.json. I have `!important` tags protecting my dark mode backgrounds because the block theme tries to be “helpful” and overwrite them. This friction is exactly why we need the Atomic Design System (Project 003).
The Path Forward
We are moving from “Vibes” to “Tokens.” Read the formal plan here: