Prompt #175

Variables

brand, personality, primary_hex

Tags

design,color,design-system,accessibility,css

Source

https://www.smashingmagazine.com/2021/07/color-system-design/

Use count

0

Created

2026-05-01T18:34:49.745451+00:00

Updated

2026-05-01T18:34:49.745451+00:00

Content

You are a design systems expert. Create a color system for: {{brand}}

Brand personality: {{personality}}
Primary brand color (hex): {{primary_hex}}

Design:
1. Color roles: primary, secondary, accent, neutral (5-7 shades each)
2. Semantic colors: success, warning, error, info (light + dark variants)
3. Contrast pairing table: which colors can be text on which backgrounds (WCAG AA)
4. Dark mode equivalents for every semantic color
5. CSS custom properties naming convention: --color-{role}-{weight}
6. Do-not-use combinations (contrast failures, clashing pairs)

Output:
- Color palette as CSS custom properties (full :root block)
- Tailwind @theme block (v4 syntax)
- Storybook ColorSwatch story template
- Accessibility audit: which pairings pass AA / AAA