Overview
SOCA is a social platform for career topics — job referrals, interview questions, salary comparisons. After a year of the design passing through different hands with no guidelines and no owner, UI inconsistency was compounding with every release.
To slow that entropy — and to set up best practice for the phases ahead — SOCA committed to a design system: rolled out on mobile web first, then extended across the rest of the interface.
Project Goals
I treat a design system as an internal product: its users are designers, and it succeeds when the external product gets better because of it. Like any product, it starts from explicit goals:
- Internally
Faster production, better work efficiency. More fluid communication and collaboration.
- Externally
A more consistent, cohesive experience. Decisions guided by best practice, instead of re-argued each time.
Context and Resources
Product branding
SOCA already had a brand identity users recognize — logo, color, type, tone — even if never formally documented. The system’s foundation inherits it deliberately: visual continuity is what keeps existing users feeling at home.
SOCA Brand Identity
Design system resources
A system’s decisions get reused everywhere, so they should encode best practice — which means studying how mature systems made the same calls before making ours:
Material UIIndustry-standard components with production-ready code — and the naming convention SOCA adopts.
UI kits (Untitled UI / UI Prep / …)Each kit is a different answer to how a system should be structured and organized.
Open-source systems (Spotify Backstage / Ant Design / …)How real systems bend their rules to fit a specific product and business.
Hierarchical Structure
The structure adapts Brad Frost’s atomic design to SOCA’s needs.
The governing principle: keep exploration flexible while keeping systematic adjustment cheap at every level. That one principle settles the detailed calls — what is global versus local, which properties and variants each component carries, and how the system expands to cover other products in later phases.
Crafting Design System
Achieving visual balance at the pixel level
Numbers alone don’t produce balance — optics do. A button’s icon side sits 4px tighter than its text side, compensating for the whitespace the icon carries; rounds of visual testing settled calls like this across the system.
Setting up compatible sizes for potential combinations
All spacing runs in 4px increments, and components are sized against each other and against the body text’s line height — so any arrangement lands in rhythm without per-screen tuning.
Building design consistency from the ground up for distinguishable and predictable actions
Base tokens define color, type and state once — so every action looks like itself, everywhere.
Creating flexibility (nested modular design) within the system
These three modals are one base component. Nesting other components as atoms — an input here, a dropdown there — lets a single component serve very different use cases. Flexibility lives in composition, which is exactly what keeps the system simple.
Design Application
Figma
A design system is shared infrastructure: a change that helps one designer can quietly break another’s file. Iterating directly on the system is tempting precisely because it’s efficient — which is why publishing needs discipline:
- Follow Material UI naming for every component — less translation between designers, a cleaner path to implementation.
- Document each component with its intended use cases — and have the team log every moment they need to detach one: those are the system’s gaps, recorded.
- Batch needs and errors into regular, reviewed updates; a publish can overwrite live work, so every contributor reviews before release.
- Ship a changelog with every publication.
Implementation and Maintenance
Chromatic
The system’s second audience is engineers. Developed into an in-house library, it compounds into development speed and long-run control:
- Explicit version control on every file handed to engineering.
- Branch after each delivery; merge with an edit log before the next.
- Track changes and guard quality on a deployment platform — Chromatic, in our case.
