| name | design-inspiration |
| description | This skill should be used when creating or modifying any web UI component, page, or layout. It provides curated visual references organized by category (dashboards, navigation, forms, tables, cards, modals, sidebars, empty-states) that define the target aesthetic — clean SaaS inspired by Linear. Read the relevant category's reference images before writing or editing any TSX, CSS, or layout code to ensure designs align with the established look and feel. |
Design Inspiration
Visual reference library for achieving a clean, Linear-inspired SaaS aesthetic across all UI work. Before creating or modifying any UI component, consult the relevant reference images to ensure visual consistency.
How to Use This Skill
Step 1: Identify the Category
Match the UI work to one or more categories:
| Category | When to Reference | Asset Path |
|---|
| Dashboards | Building metric cards, stat grids, overview pages, analytics views | assets/dashboards/ |
| Navigation | Sidebars, top bars, breadcrumbs, tab systems, command palettes | assets/navigation/ |
| Forms | Input fields, select menus, date pickers, multi-step forms, settings pages | assets/forms/ |
| Tables | Data tables, list views, sortable columns, inline editing, bulk actions | assets/tables/ |
| Cards | Content cards, feature cards, list items, summary panels | assets/cards/ |
| Modals | Dialogs, confirmation prompts, slide-overs, sheets, popovers | assets/modals/ |
| Sidebars | Navigation panels, detail panels, filter panels, collapsible sidebars | assets/sidebars/ |
| Empty States | Zero-data views, onboarding prompts, error states, placeholder content | assets/empty-states/ |
Step 2: Read the Reference Images
Open and visually examine every image in the matching category folder(s) using the Read tool. Study:
- Layout structure and spacing rhythm
- Color usage and contrast patterns
- Typography hierarchy and weight choices
- Border, shadow, and separator treatments
- Interactive element styling (buttons, inputs, links)
- Information density and whitespace balance
Step 3: Read the Design Principles
Reference references/design-principles.md for the codified rules that extract common patterns from the visual references. These principles translate what the images show into actionable implementation guidance.
Step 4: Apply to Implementation
When writing TSX/CSS code, continuously cross-reference the visual references. Specific guidance:
- Match the density: Linear uses medium density — not cramped, not wasteful. Content breathes but screens feel purposeful.
- Match the restraint: One accent color. Minimal borders. Subtle shadows. Let typography and spacing create hierarchy.
- Match the polish: Smooth transitions, consistent radii, aligned baselines, pixel-perfect spacing.
Adding New References
To add new design inspiration:
- Save screenshots as PNG or JPG files
- Use descriptive filenames:
linear-project-list.png, notion-settings-form.png
- Place in the appropriate category folder under
assets/
- If a reference spans multiple categories, place it in the primary one
Recommended sources for screenshots:
- Mobbin (mobbin.com) — search for "Linear", "Notion", "Vercel", "Stripe"
- Dribbble — search for "SaaS dashboard", "admin panel", "clean UI"
- Direct screenshots from Linear, Notion, Vercel Dashboard, Stripe Dashboard
Design DNA (Quick Reference)
The target aesthetic is Linear-grade SaaS. Key traits:
- Dark-first: Dark backgrounds (zinc-900/950) with subtle borders (zinc-800)
- Monochrome + one accent: Zinc/neutral palette with a single accent (violet, blue, or indigo)
- Tight typography: Inter/Geist, medium weight headings, 13-14px body text
- Subtle depth: No heavy shadows — use 1px borders and very subtle elevation
- Functional density: Every pixel earns its place. No decorative filler.
- Micro-interactions: Smooth hover states, keyboard-navigable, instant feedback
- Icon-forward: Small, consistent icons paired with labels — not icon-only, not label-only
