Design & UX Skill
Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns…
$15
Design System Patterns
Build scalable design systems with design tokens, theming infrastructure, and component…
A blueprint for building scalable design systems with proper design tokens, theming infrastructure, and component architecture. It establishes a three-tier token hierarchy (primitive, semantic, component), wires up light/dark and multi-brand theming, and standardizes component APIs with variant systems. Gives you a consistent, maintainable UI foundation across web and mobile.
$15 one-time
Add to a kit → Prices include 20% VAT. · Forged on real agency work · one-time, no lock-in
- Type Skill
- Category Design & UX
- Delivery Email · instant
- License One-time
Inside the run · no black box
See the actual work before you buy it.
The skill builds a design system as a strict three-layer token cascade plus theming and component architecture. The actual construction order:
- Defines the token hierarchy in three layers of CSS custom properties: primitive tokens hold raw values (color scales, spacing, radii), semantic tokens give them meaning (text-primary, surface-elevated), component tokens map them to specific usage (button-bg, card-border).
- Enforces one-way cascade flow: a component token may only reference a semantic token, which references a primitive. A component reaching directly into a primitive is an architecture violation, because it silently breaks theme switching.
- Wires theme infrastructure: a React ThemeProvider resolving light, dark or system preference via prefers-color-scheme, persisting the choice, and applying the theme class before first paint so users never see the unstyled flash.
- Builds variant systems with class-variance-authority: base styles plus declared variant and size maps with defaultVariants, so a button with nothing specified still renders correctly instead of exploding into ad-hoc props.
- Configures the Style Dictionary pipeline so one token source compiles to every platform: CSS variables, SCSS, Swift classes for iOS and XML resources for Android, with output references preserved.
- Applies the naming and governance rules: tokens named by purpose not appearance, token changes versioned like API changes, and every theme combination tested against every component before release.
One power source. 6 lines out.
design-system-patterns · core
core active · 6 lines
- ✓ creating design tokens for
Creating design tokens for colors, typography, spacing, and shadows
- ✓ implementing light/dark…
Implementing light/dark theme switching with CSS custom properties
- ✓ building a multi-brand t…
Building a multi-brand theming system
- ✓ architecting a component
Architecting a component library with consistent variant APIs
- ✓ setting up a figma-to-code
Setting up a Figma-to-code token pipeline with Style Dictionary
- ✓ establishing semantic to…
Establishing semantic token hierarchies and naming conventions
Yours to keep.
Drag time forward. Watch what stays.
Forever
That's what owning means.
The rented stack
ai writing tool: subscription
expired · access lostanalytics suite: subscription
expired · access lostdesign platform: subscription
expired · access lost(nothing left)
Your forge
-
Roll out brand changes from a single source instead of editing dozens of files
license: perpetual -
Eliminate visual inconsistency across web and mobile platforms
license: perpetual -
Speed up developer onboarding with predictable, well-named tokens
license: perpetual -
Prevent theme-switch flicker and design drift with proven architecture
license: perpetual
subscriptions expire · deeds don't
Everything in the box.
Pick a piece up. Watch it work.
Three-layer token hierarchy: primitive, semantic, and component tokens
6 parts · one working system · ships instantly by email
This wasn't forged for everyone.
- Not for you if you'd rather rent a tool than own one.
- Not for you if you want someone else to run your stack.
- Not for you if you're happy guessing.
Front-end engineers and design-system owners building a consistent, scalable UI foundation across multiple platforms and brands.
then this was forged for you.Works with
Universal by design: these run in any AI. Delivered in the open Agent Skills + MCP format (native in Claude); ChatGPT, Gemini, Cursor and Copilot adapt the same files their own way.
- Claude Native format
- ChatGPT Adapts via open standards
- Gemini Adapts via open standards
- Cursor Adapts via open standards
- Copilot Adapts via open standards
Catch what's on your mind.
the air is clear. nothing between you and the forge.
catch a spark: the forge will answer
-
Is this tied to React, or can I use the token structure with Vue or plain CSS?
The three-tier token model and theming wiring are framework-agnostic, built on CSS custom properties. The component API conventions apply wherever you build, the patterns do not assume one framework.
-
Three token tiers sounds heavy for a small product. Is that hierarchy worth it early?
The primitive, semantic and component split is what lets you reskin or add a brand later without touching every component. On a tiny one-off it is overhead, on anything you expect to theme or scale it pays back fast.
-
Does it generate my components, or just define how they should be structured?
It sets the architecture: token tiers, theming and variant APIs, so your components stay consistent. Writing the actual components is still on you, this is the foundation, not a component factory.
-
How is it delivered?
By email right after purchase: ready to run, downloaded instantly, no setup wait.
-
One-time or subscription?
A one-time purchase; no subscription or hidden fees. VAT (20%) is included.
-
Can I get a refund?
As a digital product, it can’t be refunded once downloaded. That’s why we show exactly what’s inside and who it’s for, right here.