GuideBeginner
Ui Systems And Design Implementation
Learn to implement design in code systematically: move from writing loose CSS for each screen to a real design system, with design tokens (color, spacing, and typography as meaningful variables), utility-first CSS with Tailwind, spacing and typography scales, accessible color and contrast measured with WCAG, components with variants (a `Button` or `ProductCard` configured through props, the `cva` pattern), dark mode and responsiveness inside the system, and accessible primitives in the shadcn/Radix style. The core idea is consistency at scale: when every color, space, and component comes from a system instead of an ad-hoc decision, the interface looks coherent, maintains itself, and is accessible by default. Each module runs the system's logic in Node.js — token resolution, mapping Tailwind utilities to CSS, WCAG contrast calculation, variant resolution — to verify the system is coherent and accessible, not just that it "looks good." The throughline is Mercado's storefront design system: its light and dark tokens, its Tailwind configuration, its `Button` and `ProductCard` with variants, and its responsive, accessible UI. It builds on the Web Fundamentals Guide and the React Fundamentals Guide within NIEVA's Fullstack ecosystem.
- 64
- lessons
- 8
- modules
- English · Spanish
- available in
- Free
- access
Outcomes
What you'll be able to do
- Understand a design system's layers: tokens, utilities, components, and patterns
- Define design tokens (primitive, semantic, and component-level) as CSS variables, and apply light/dark theming by changing the token, not the component
- Work with utility-first Tailwind and understand how its utilities work underneath (equal specificity, they win by source order)
- Build coherent spacing and typography scales, and verify color contrast with the WCAG algorithm (AA/AAA)
- Build components with variants (`variant`, `size`) resolved through props with the `cva` pattern, instead of hand-written class conditionals
- Apply responsive design and dark mode inside the system, without duplicating components
- Use accessible primitives in the shadcn/Radix style: unstyled components with focus, ARIA roles, and keyboard handling already solved
- Build Mercado's full storefront design system: tokens, Tailwind, components with variants, verified contrast, responsive design, and dark mode
Before you start
What you need to bring
It's for you if...
- React developers who write ad-hoc CSS for every screen and want to move to a real system
- Devs who use Tailwind but don't understand what it does underneath, or copy shadcn components without judgment when customizing them
- Those who need their UI to be accessible by default (contrast, focus, roles), not patched on at the end
- Teams looking for visual consistency at scale without rebuilding every component from scratch per screen
Requirements and materials
- Hand-written CSS (box model, cascade/specificity, Flexbox, Grid, media queries), or having completed the Web Fundamentals: HTML and CSS Guide
- React components with props, or having completed the React Fundamentals Guide
- Node.js installed to run each module's logic
- Basic comfort with the terminal and npm
Content
The syllabus, module by module
Open any of them to see its lessons.
- Module introduction: what a design system is
- From ad-hoc CSS to a system
- The four layers: tokens, utilities, components, patterns
- Consistency and the cost of drift
- Maintainability and the single source of truth
- Accessibility as a system property
- Anatomy of Mercado's design system
- Project: Mercado's design system inventory
- Module introduction: design tokens
- What a design token is
- Primitive, semantic, and component: the three token layers
- CSS custom properties: tokens in the browser
- Naming tokens by role, not by value
- Theming: light and dark by changing the token's value
- Tokens in practice: Mercado's palette
- Project: Mercado's token set
- Module introduction: responsive and dark mode in the system
- Responsive prefixes and the mobile-first approach
- Breakpoints as a scale of the system
- The `dark:` variant
- The two dark mode strategies: `media` vs `class`
- Token theming in dark: the utility doesn't change, the token does
- Responsive and dark without duplication: one `class=""` covers everything
- Project: Mercado's catalog, responsive and dark
- Module overview: primitives and component libraries
- The accessibility you can't see
- Unstyled but accessible primitives
- Dressing primitives with your tokens
- The shadcn model: copy the code
- When to use a library and when to build
- A Dialog done right
- Project: Mercado's cart and sort order on accessible primitives
- Module overview: the capstone — Mercado's design system
- Define Mercado's final tokens
- Connect Tailwind to the final token set
- Audit the complete system's contrast
- Build the Button and the ProductCard with variants
- Make the catalog responsive and dark
- Add accessible primitives
- Final project: Mercado's design system, end to end
Common questions
What people usually ask
No limit. It's a free guide: come in whenever you like, as often as you like.
No. Modules run from easier to harder, but you can jump to the one you need. Progress is saved per lesson.
Whatever is needed is listed under “What you need to bring”, above. If nothing is listed there, you can start from zero.
In the Club's WhatsApp group, and every two weeks there's a live with an instructor where questions get worked through.
Start whenever you like
What students say
These reviews are from enrolled students who completed at least 50% of the course. We moderate reviews only on content grounds (spam, offensive language, personal data), never for being critical or negative.
No approved reviews yet.
Be the first to share your experience!