Design System Documentation
The Challenge
DaySmart's expanding multi-product SaaS ecosystem lacked a shared visual language. Engineering teams were constantly bogged down by styling bugs and layout inconsistencies across product lines, while mounting accessibility debt created compliance risks and slowed sprint delivery.
The Objective
As Lead Product Designer, my goal was to architect and govern a single-source-of-truth design system connecting our Figma design environment directly to production code:
- Unify Fragmented Platforms: Align user experiences across disparate Admin and Member applications without rewriting core back-end logic.
- Eliminate Handoff Friction: Establish strict 1:1 parity between Figma component tokens and production CSS.
- Enforce Built-in Accessibility: Automate WCAG 2.1 AA compliance so every existing and future tenant deployment is accessible by default.
Strategy & System Execution
Rather than building a theoretical design library in isolation, I focused on creating an adaptable system engineered for immediate adoption across engineering pods:
- Utility-First Architecture: Layered custom design tokens on top of a proven grid foundation, avoiding basic layout recalculations to focus on complex SaaS data components.
- Framework-Agnostic Tokens: Delivered components as semantic HTML and pure CSS tokens, allowing legacy PHP applications and modern Angular builds to ingest the exact same UI styles seamlessly.
- Comprehensive Behavioral Guidelines: Authored explicit interaction states, focus rings, keyboard navigation patterns, and edge case rules to eliminate UX anti-patterns before engineering reviews.
Framework-Agnostic Code Tokens: Semantic HTML and pure CSS tokens decoupled the design system from JavaScript frameworks, enabling immediate adoption across both legacy and modern repositories.
Strict Component Governance: Behavioral constraints, focus states, and WCAG rules authored directly alongside UI specs to eliminate anti-patterns and reduce QA loops.
Technical Deep Dive: Token Governance & AI Prototyping Pipeline
Token Pipeline Architecture: Components were delivered as pure CSS custom properties mapped directly to Figma design tokens and variables. This allowed instant multi-tenant theme swapping and prevented engineering from introducing hard-coded hex values or unapproved layout math.
AI-Integrated Development: To maintain high release velocity without bottlenecking core engineering sprints, I integrated Claude and Cursor into my prototyping pipeline. I authored front-end quality-of-life updates, responsive fixes, and accessibility contrast adjustments directly in code, submitting pull requests that engineers could review and merge quickly.
Impact & Results
- Accelerated Feature Delivery: Engineering teams assembled interfaces from pre-tested, accessible components instead of coding layouts from scratch, substantially speeding up time to market.
- Drastic Reduction in UI Bugs: Standardized tokens eliminated repetitive styling tickets and handoff surprises during sprint releases.
- 100% WCAG 2.1 AA Enforcement: Accessibility compliance became automated across all customer-facing surfaces, guaranteeing accessible contrast and keyboard navigation by default.
- Cross-Functional Alignment: Created a shared design vocabulary that aligned product managers, designers, and developers around a unified quality standard.
Kayla Mandel
Senior Product Manager at DaySmart (Dash)
"His combination of UX/UI skill and web development background made him a rare kind of collaborator. He didn't just design screens, he understood how they'd actually get built, which meant fewer surprises and smoother handoffs every time... He was also quick to explore new tools like Claude... bringing that same curiosity to how AI could fit into the design process."
I had the pleasure of working alongside Daniel as a PM-designer partner, and his combination of UX/UI skill and web development background made him a rare kind of collaborator. He didn't just design screens, he understood how they'd actually get built, which meant fewer surprises and smoother handoffs every time.
What stood out most was his attention to detail. He caught edge cases in complex workflows that others missed, and he had a knack for simplifying multi-step processes without losing the nuance that made them work. He was also quick to explore new tools like Claude Design and Figma Make as we gained access to them, bringing that same curiosity to how AI could fit into the design process.