---
name: generic-design-system
description: Complete design system reference for any project - colors, typography, spacing, components, animations. Adapts to project theme and tech stack. Use when implementing UI, choosing colors, creating animations, or ensuring brand consistency. For new design systems, use ui-research skill first.
---

# Generic Design System

Design system reference adapting to any project's visual language.

## Research First for New Systems

When creating a NEW design system (not following an existing one):

```
Skill(ui-research)  # Research modern patterns first
```

**References:**

- [UI Inspiration Sources](references/upstream/9b32542c607a5d45-UI_INSPIRATION_SOURCES.md) - Research sources
- [Design Patterns](references/upstream/95581c252f1c6382-DESIGN_PATTERNS.md) - Visual tokens

## When to Use This Skill

**Use for:**

- Implementing UI components
- Choosing colors or typography
- Creating animations or transitions
- Ensuring visual consistency
- Setting up design tokens
- Reviewing design system compliance

**Don't use when:**

- UX flow design → use `generic-ux-designer`
- Feature architecture → use `generic-feature-developer`
- Code quality review → use `generic-code-reviewer`

## Design System Architecture

### When to Build vs Reference

| Situation              | Action                                  |
| ---------------------- | --------------------------------------- |
| Existing design system | Follow it strictly                      |
| No design system       | Use this skill to establish foundations |
| Partial system         | Identify gaps, extend consistently      |

### Token Organization

| Layer     | Example               | Purpose    |
| --------- | --------------------- | ---------- |
| Primitive | `--color-blue-500`    | Raw values |
| Semantic  | `--color-primary`     | Meaning    |
| Component | `--button-background` | Context    |

**Decision:** Use semantic tokens in code, primitive tokens as foundation only.

### Consistency Decision Tree

1. **Component exists?** → Use existing pattern
2. **Similar exists?** → Adapt existing (don't create competing pattern)
3. **New category?** → Propose to user, document reasoning

## Color System

**Every project should define:**

- Primary, Secondary, Accent
- Background, Foreground, Muted
- Destructive, Success, Warning

### Contrast Requirements

| Use Case      | Minimum    |
| ------------- | ---------- |
| Body text     | 4.5:1 (AA) |
| Large text    | 3:1 (AA)   |
| UI components | 3:1 (AA)   |

## Typography

### Font Stack

```css
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "SF Mono", Monaco, "Courier New", monospace;
```

### Type Scale

| Name | Size | Use             |
| ---- | ---- | --------------- |
| sm   | 14px | Secondary text  |
| base | 16px | Body text       |
| lg   | 18px | Lead paragraphs |
| xl   | 20px | Section headers |
| 2xl  | 24px | Page headers    |

## Spacing System

**Base unit:** 4px or 8px

| Token | 4px Base | Use           |
| ----- | -------- | ------------- |
| 1     | 4px      | Tight spacing |
| 2     | 8px      | Default gap   |
| 4     | 16px     | Card padding  |
| 6     | 24px     | Page margins  |

## Animation

### GPU-Accelerated Only

**DO animate:** `transform`, `opacity`
**AVOID:** `width`, `height`, `top`, `left`, `margin`, `padding`

### Duration

| Token   | Duration | Use                |
| ------- | -------- | ------------------ |
| fast    | 100ms    | Micro-interactions |
| DEFAULT | 200ms    | Most transitions   |
| slow    | 300ms    | Complex animations |

### Timing

```css
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
```

## Components

### Component States

| State    | Visual Treatment  | Example                 |
| -------- | ----------------- | ----------------------- |
| Default  | Base styling      | Normal button           |
| Hover    | Subtle feedback   | Lighter/darker bg       |
| Active   | Pressed state     | Scaled down slightly    |
| Focus    | Visible outline   | 2px ring, offset        |
| Disabled | Reduced opacity   | 50% opacity, no pointer |
| Loading  | Spinner/skeleton  | Button with spinner     |
| Error    | Destructive color | Red border/text         |

### Touch Targets

- **Minimum:** 44x44px (WCAG 2.1 AAA)
- **Spacing:** 8px between adjacent targets
- **Mobile:** Consider 48x48px for primary actions

### Buttons

| Variant     | Use                 | Min Size |
| ----------- | ------------------- | -------- |
| Primary     | Main actions        | 44x44px  |
| Secondary   | Alternative actions | 44x44px  |
| Ghost       | Subtle actions      | 44x44px  |
| Destructive | Delete actions      | 44x44px  |

### Form Inputs

- Clear focus states (2px visible ring)
- Error states with messages
- Label always visible
- Required indicator

### Modals

- Focus trapped inside
- Escape to close
- Dark overlay (50-70% opacity)

## Responsive Breakpoints

| Token | Min Width |
| ----- | --------- |
| sm    | 640px     |
| md    | 768px     |
| lg    | 1024px    |
| xl    | 1280px    |

## Dark Mode

```css
:root {
  --background: #ffffff;
  --foreground: #000000;
}
[data-theme="dark"] {
  --background: #000000;
  --foreground: #ffffff;
}
```

## See Also

- [Design Patterns](references/upstream/95581c252f1c6382-DESIGN_PATTERNS.md) - Atomic Design, tokens, component docs
- [Code Review Standards](references/upstream/ca6d99e49dd49acb-CODE_REVIEW_STANDARDS.md) - Accessibility checks
- `generic-ux-designer` - For UX flow and research decisions
- Project `CLAUDE.md` - Project-specific design constraints

**READ references when:**

- Setting up new design system → DESIGN_PATTERNS.md (full structure)
- Complex component patterns → DESIGN_PATTERNS.md (Atomic Design section)


---
Source attribution: travisjneuman
Original project: https://github.com/travisjneuman/.claude/blob/852be4c9e0e6986928e015587ca92db4de6370ae/skills/generic-design-system/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Dave AI.

## Upstream license notice

MIT License

Copyright (c) 2026 Travis Neuman

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Dave AI resource metadata

Creator / publisher: travisjneuman
Original project: https://github.com/travisjneuman/.claude/blob/852be4c9e0e6986928e015587ca92db4de6370ae/skills/generic-design-system/SKILL.md
Attribution basis: Recovered original package and original project license at a pinned revision

Fields of work: Design, Development & Engineering
Roles: Frontend Developer, Graphic Designer, Product Designer, UI Designer, UX Designer
Specialties: Cross Platform, Design
Tools: Tool not specified
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: 941f4bbb79fcaf9e7c4d6f9af7a8317b5f3aaea4d9dc25f799d1a5aac93a0e64
Metadata reviewed: 2026-10-27
This metadata supersedes earlier Dave AI catalog attribution. Original instruction and supporting files are preserved.