Design System Foundations for a New App
Get a contrast-checked token system (color, type, spacing, dark mode) plus theme code for your stack before any UI code is written.
Before & after
Same prompt, same agent — the only difference is the skill.
A design system is a great idea for consistency. You'd want to start with a color palette — maybe pick 3-5 colors and create light and dark variants. Then choose two fonts that work together, like a sans serif for body text and maybe a serif for headings. You could use something like Tailwind for utility classes. For components, you'd want buttons, cards, forms, modals, and navigation. It takes a while to build out, but it's worth the investment. Do you have any brand colors already, or should we start from scratch? What's your design aesthetic — modern, minimal, playful? How do you feel about using pre-built component libraries?
DESIGN SYSTEM ASSEMBLED — React Dashboard PALETTE: Primary: Slate 600 (hex F1F5F9 light / 1E293B dark) Accent: Teal 500 (hex 14B8A6) Success: Emerald 500 (hex 10B981) Warning: Amber 500 (hex F59E0B) Error: Rose 500 (hex F43F5E) Neutral: Gray scale (50-950) TYPOGRAPHY PAIRING: Headings: Inter, weight 600-700, sizes 12px-32px Body: Inter, weight 400-500, 14px-16px Code: JetBrains Mono, weight 400, 12px Line height: 1.5 (body), 1.2 (headings) SPACING SCALE (4px base): 0px, 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px COMPONENT PATTERNS (Radix UI style): Button: filled, outline, ghost variants × sizes (sm, md, lg) Card: default, hoverable, interactive Form: input, select, checkbox, radio with error states Modal: overlay, content, close behavior Table: sticky header, striped rows, sortable columns Toast: position (top-right), dismiss timer LIGHT/DARK MODE: Light default: white backgrounds, slate-900 text Dark default: slate-950 backgrounds, slate-50 text Auto-respects system preference DELIVERABLES: tokens.json file ready for Tailwind config Component library with 12 base patterns Light/dark theme CSS variables Implementation guide for React (Radix UI recommended) Hero mockup: sample dashboard with full system applied
About this skill
Your AI-built UI looks like every other SaaS template, your brand teal is unreadable as link text, and dark mode was patched in with dark: classes on every div. That happens because colors get picked as loose hex values with no system behind them. This skill sets up the foundation before you write components: a few decisions that give the product its character, with everything else derived from them and checked for contrast.
What it does
- Picks a typeface, an accent and how often it appears, and a surface style, plus one signature choice so the product doesn't look like a template
- Builds tinted color scales and a semantic token layer (bg, surface, fg-muted, accent-text, focus-ring, status colors), with light and dark values designed separately rather than inverted
- Checks every text and UI pair against WCAG contrast targets and flags brand colors that fail as text or button fills
- Sets a type scale, spacing, radius, elevation, and motion tokens to fit your density (pro tool vs consumer app)
- Writes copy-paste theme code for Tailwind v4/v3, shadcn/ui, Next.js, Vue, SwiftUI, or Flutter
- Audits an existing theme you paste in and ranks the fixes by impact
What you get
A compact design system doc: the key decisions with reasons, tables for semantic tokens and the type scale, rules for core components, and a theme file that's ready to use in your stack.
Best for
Design engineers, solo founders, and frontend developers starting a new product who want a consistent, accessible visual base before Claude or anyone else starts generating screens.
SKILL.md preview
---
name: design-system-foundations
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.