minimal
bergside/awesome-design-skills
Stripped-back design system emphasizing whitespace, clean typography, and restrained color for maximum clarity.
What is minimal?
A minimal design-system skill for creating clean, accessible interfaces with semantic tokens, deliberate spacing, and restrained color palettes. Use this when authoring design guidelines that prioritize clarity, focus, and WCAG 2.2 AA compliance.
- Generate design-system guidance with defined tokens (color, typography, spacing) and component rules
- Enforce accessibility standards (WCAG 2.2 AA, keyboard-first, visible focus states) at the system level
- Specify component anatomy, states (default, hover, focus, active, disabled, loading, error), and interaction behavior
- Create implementation-ready rules anchored to tokens and thresholds, not subjective language
- Document anti-patterns, migration paths, and QA checklists for code review
- Define responsive behavior, edge cases, and content-writing tone standards
How to install minimal
npx skills add https://github.com/bergside/awesome-design-skills --skill minimalHow to use minimal
- 1.Install the skill using the provided npm command
- 2.Restate your design intent in one sentence before proposing rules
- 3.Define tokens (color, typography, spacing) and foundational constraints first
- 4.Specify component anatomy, required states, and interaction behavior for keyboard, pointer, and touch
- 5.Include accessibility acceptance criteria and content-writing standards with examples
- 6.Document anti-patterns and migration guidance for existing inconsistent UI
- 7.Generate a QA checklist for code-review validation
Use cases
- Author design-system documentation for a new product with minimal aesthetic and accessibility requirements
- Create component guidelines (buttons, inputs, cards) with explicit state definitions and keyboard interaction rules
- Establish token-based constraints (spacing scale 4/8/12/16/24/32, color palette, typography weights) across a design system
- Review and refactor inconsistent UI by identifying anti-patterns and providing migration guidance
- Generate QA checklists to validate design-system compliance during code review
- Design-system authors and leads defining guidelines for engineering teams
- Product designers building accessible, minimal interfaces
- Engineers implementing design systems who need testable, unambiguous rules
- Teams adopting WCAG 2.2 AA compliance and keyboard-first interaction patterns
minimal FAQ
Minimal, clean, bold design with emphasis on whitespace, semantic tokens, and restrained color. It uses Open Sans (primary), Inter (display), and Inconsolata (mono) with a neutral-dominant palette and WCAG 2.2 AA accessibility.
Yes. The skill provides default tokens (primary=#0C0C09, secondary=#312C85, success=#16A34A, etc.) and a spacing scale (4/8/12/16/24/32), but you can adapt these to your brand while maintaining the semantic-token approach and accessibility standards.
WCAG 2.2 AA compliance with keyboard-first interactions, visible focus states, and no low-contrast text. Every accessibility rule must be testable in implementation.
Define required states explicitly: default, hover, focus-visible, active, disabled, loading, and error (as relevant). Specify spacing, typography, and color-token usage for each state, plus interaction behavior for keyboard, pointer, and touch.
The skill prioritizes accessibility over novelty. Flag conflicts explicitly, then choose the accessible option. Use the QA checklist to validate compliance during code review.
Full instructions (SKILL.md)
Source of truth, from bergside/awesome-design-skills.
name: minimal description: Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus. license: MIT metadata: author: typeui.sh
<!-- TYPEUI_SH_MANAGED_START -->Minimal Design Design System Skill (Universal)
Mission
You are an expert design-system guideline author for minimal design. Create practical, implementation-ready guidance that can be directly used by engineers and designers.
Brand
Style Foundations
- Visual style: minimal, clean, bold
- Typography scale: desktop-first expressive scale | Fonts: primary=Open Sans, display=Inter, mono=Inconsolata | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#0C0C09, secondary=#312C85, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#F4F4F1, text=#0C0C09
- Spacing scale: 4/8/12/16/24/32
Accessibility
WCAG 2.2 AA, keyboard-first interactions, visible focus states
Writing Tone
concise, confident, helpful
Rules: Do
- prefer semantic tokens over raw values
- preserve visual hierarchy
- keep interaction states explicit
Rules: Don't
- avoid low contrast text
- avoid inconsistent spacing rhythm
- avoid ambiguous labels
Expected Behavior
- Follow the foundations first, then component consistency.
- When uncertain, prioritize accessibility and clarity over novelty.
- Provide concrete defaults and explain trade-offs when alternatives are possible.
- Keep guidance opinionated, concise, and implementation-focused.
Guideline Authoring Workflow
- Restate the design intent in one sentence before proposing rules.
- Define tokens and foundational constraints before component-level guidance.
- Specify component anatomy, states, variants, and interaction behavior.
- Include accessibility acceptance criteria and content-writing expectations.
- Add anti-patterns and migration notes for existing inconsistent UI.
- End with a QA checklist that can be executed in code review.
Required Output Structure
When generating design-system guidance, use this structure:
- Context and goals
- Design tokens and foundations
- Component-level rules (anatomy, variants, states, responsive behavior)
- Accessibility requirements and testable acceptance criteria
- Content and tone standards with examples
- Anti-patterns and prohibited implementations
- QA checklist
Component Rule Expectations
- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).
- Describe interaction behavior for keyboard, pointer, and touch.
- State spacing, typography, and color-token usage explicitly.
- Include responsive behavior and edge cases (long labels, empty states, overflow).
Quality Gates
- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.
- Every accessibility statement must be testable in implementation.
- Prefer system consistency over one-off local optimizations.
- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.
Example Constraint Language
- Use "must" for non-negotiable rules and "should" for recommendations.
- Pair every do-rule with at least one concrete don't-example.
- If introducing a new pattern, include migration guidance for existing components.
Related skills
More from bergside/awesome-design-skills and the wider catalog.

modern
Contemporary editorial design system with serif typography and minimal palettes for polished digital products.

mono
Monospace-driven, high-contrast design system with matrix-inspired aesthetics and hacker-chic styling.

neobrutalism
Modern brutalism design system with bold borders, vivid colors, and high-contrast layouts.

neon
Electric neon glow effects with high-contrast color pairings for bold, attention-grabbing interfaces.

neumorphism
Soft, extruded UI design system with inner/outer shadows for tactile, embedded interfaces.

pacman
Retro arcade design system with pixel fonts, high-contrast colors, and 8-bit game aesthetics.