Muzamna Technical Solutions
MZ Design System
Color Manifesto
The single source of truth for all color decisions across every section and project.
🤖 NEW — AI Workflow for Engineers
Building a Color System from Any Logo
Copy this exact prompt to Claude when starting a new website project. Works for any logo — just describe the colors or upload the image. Perfect for new team members who need to spin up color systems fast.
“I have a logo with [describe colors, e.g., ‘forest green and golden yellow’ OR attach logo image].
Help me build a complete website color system from it following this structure:
1. Extract from logo:
• Primary color (main brand color) with 7 stops: 100-700
• Accent color(s) with 7 stops: 100-700
2. Generate neutrals:
• Warm or cool gray scale (9 stops: 100-900)
• Must complement the logo colors
3. Deliver full palette with:
• Hex codes for every stop
• CSS variable names (–mz-primary-400, etc.)
• Usage notes (which stop = buttons, backgrounds, text)
4. Strategy guide: Explain which colors go where — headers, buttons, backgrounds, body text, links, borders, hover states. Give me the complete system ready to code.”
7 stops + hex codes
7 stops + usage
9 stops for text/bg
Where each color goes
01 — Color Ramps
The Three Ramps
Every color in every section comes from exactly one of these three ramps. If a color you want isn’t here, use a stop that is closest — don’t introduce new colors.
02 — Section Rhythm
Background Alternation Pattern
Alternate backgrounds every section to create visual rhythm without using color. Every 3–4 sections, use one dark section as a break.
03 — Token Map
Every Element → Correct Token
Use this as the lookup table before styling any element. If the element isn’t here, apply the nearest matching rule.
| Element | Token | Color | Status | Note |
|---|---|---|---|---|
| Section BG (default) | mz-neutral-100 | ✓ Use | Alternate with white every section | |
| Section BG (alt) | mz-bg-white | ✓ Use | Pure white — alternate with neutral-100 | |
| Section BG (CTA / dark) | mz-primary-600 | ✓ Use | Max once every 3–4 sections | |
| Heading text | mz-neutral-900 | ✓ Use | All H1–H3. White on dark sections. | |
| Body / paragraph | mz-neutral-600 | ✓ Use | All descriptive text | |
| Secondary text | mz-neutral-500 | ✓ Use | Meta, captions, labels, dates | |
| Primary button bg | mz-primary-400 | ✓ Use | One per section max. White text. | |
| Primary button hover | mz-primary-500 | ✓ Use | Slightly darker + translateY(-1px) | |
| Ghost / secondary button | neutral-300 border + neutral-700 text | ✓ Use | Hover: neutral-100 bg + neutral-400 border | |
| Card background | mz-bg-white | ✓ Use | Always white — never primary / accent | |
| Card border | mz-neutral-300 | ✓ Use | 1px solid. Hover: neutral-400. | |
| Icons | mz-primary-400 or mz-accent-300 | ✓ Use | Primary for action icons, accent for decorative | |
| Stars / rating | mz-accent-300 | ✓ Use | Always amber. Never green for stars. | |
| Badge / tag bg | mz-primary-100 | ✓ Use | Text must be primary-600 from same ramp | |
| Eyebrow pill | mz-bg-white + neutral-300 border | ✓ Use | Text color: primary-400 or neutral-500 | |
| Accent as full BG | mz-accent-* | ✕ Never | Accent is decoration only — never large BG | |
| Primary for body text | mz-primary-* | ✕ Never | Primary is not a text color | |
| Accent as button bg | mz-accent-* | ✕ Never | Buttons are always primary-400 |
04 — The 11 Rules
Non-Negotiable Color Rules
Every decision must pass through these rules before it ships.
05 — Hover Patterns
Interactive States (live demo)
Hover all elements below to see the correct behavior. No radical color changes — only depth and movement.
+ translateY(-1px)
border goes neutral-400
shadow appears