Design Systems
Shipped a Framework Powering a B2B SaaS
Full CSS framework — grid, animation, responsive, efficiency. Code-first, no Figma library.
Gestionix·B2B SaaS for Mexican SMBs·—
The Problem
- Multiple screens, no shared language — each feature reinvented its own UI patterns.
- Designs in Figma, code in chaos — handoff was the bottleneck.
- Engineering needed primitives, not pixel-perfect mocks.
What I Did
Founder & Technical Director
- Architected the framework's core systems: grid, animations, responsive breakpoints, efficiency utilities
- Wrote production CSS as the design system source of truth — no Figma library, code was the contract
- Defined composition rules so engineering could build any screen from the same primitives
- Bridged design intent and engineering implementation in the same codebase, years before the Design Engineer title existed
Key Wins
- Full CSS framework built from scratch — grid, animation, responsive, efficiency systems
- Code as the source of truth — design system shipped as production CSS, not Figma
- Reusable primitives — same building blocks composed into any new screen
Quick summary complete
Want the full story?Keep reading
📖 Full Case Study
🎯 The Challenge
Building a system robust enough for any future screen while keeping it lean. Defining composition rules without over-engineering. Educating both designers and engineers on a single source of truth that lived in code, not in mockups.
✅ The Solution
Designed and coded a complete Bootstrap-style framework: grid system, animation library, responsive utilities, and efficiency helpers. Engineering and design spoke the same language — production CSS as the contract, not Figma redlines.
Code-first design framework — grid, animations, responsive, efficiency
Grid System
Composable Grid
A flexible grid engineering could compose into any layout. Defined breakpoints, gutters, and column behavior in production CSS — same primitives, infinite screens.
Grid system — the foundation of every screen
Animation & Motion
Motion Library
Curated motion patterns expressed as CSS keyframes and transitions, reusable across any component without writing custom animation code per screen.
Animation library — consistent motion across the product
Responsive & Efficiency
Performance-Aware Patterns
Responsive utilities and efficiency helpers — patterns that work across viewports without paying a runtime cost. Engineering primitives that scaled.
Responsive + efficiency — engineering primitives that scale
Interested in working together?
Open to Product Design Lead, Product Design Engineer or Design Manager roles at product companies building products and infrastructure at scale. Remote-first, open to relocation.