mailchimp
starsforks
How to install mailchimp?
ihlamury/design-skills/mailchimp
$npx -y skills add ihlamury/design-skills --skill mailchimpMailchimp's UI design system. Use when building interfaces inspired by Mailchimp's aesthetic - light mode, Inter font, 4px grid.
SKILL.md
| 1 | # Mailchimp UI Skills |
| 2 | |
| 3 | Opinionated constraints for building Mailchimp-style interfaces with AI agents. |
| 4 | |
| 5 | ## When to Apply |
| 6 | |
| 7 | Reference these guidelines when: |
| 8 | - Building light-mode interfaces |
| 9 | - Creating Mailchimp-inspired design systems |
| 10 | - Implementing UIs with Inter font and 4px grid |
| 11 | |
| 12 | ## Colors |
| 13 | |
| 14 | - SHOULD use light backgrounds for primary surfaces |
| 15 | - MUST use `#000000` as page background (`surface-base`) |
| 16 | - MUST use `#2E114B` for primary actions and focus states (`accent`) |
| 17 | - SHOULD reduce color palette (currently 35 colors detected) |
| 18 | - MUST maintain text contrast ratio of at least 4.5:1 for accessibility |
| 19 | |
| 20 | ### Semantic Tokens |
| 21 | |
| 22 | | Token | HEX | RGB | Usage | |
| 23 | |-------|-----|-----|-------| |
| 24 | | `surface-base` | #000000 | rgb(0,0,0) | Page background | |
| 25 | | `surface-raised` | #191610 | rgb(25,22,16) | Cards, modals, raised surfaces | |
| 26 | | `surface-overlay` | #F2F2F2 | rgb(242,242,242) | Overlays, tooltips, dropdowns | |
| 27 | | `text-primary` | #1A1A1A | rgb(26,26,26) | Headings, body text | |
| 28 | | `text-2` | #4D4D4D | rgb(77,77,77) | Additional text | |
| 29 | | `text-secondary` | #A7A7A7 | rgb(167,167,167) | Secondary, muted text | |
| 30 | | `border-default` | #F7F7F7 | rgb(247,247,247) | Subtle borders, dividers | |
| 31 | | `warning` | #FDDB17 | rgb(253,219,23) | Warning states, cautions | |
| 32 | | `accent` | #2E114B | rgb(46,17,75) | Primary actions, links, focus | |
| 33 | | `success` | #72DF58 | rgb(114,223,88) | Success states, confirmations | |
| 34 | |
| 35 | ## Typography |
| 36 | |
| 37 | - MUST use `Inter` as primary font family |
| 38 | - SHOULD use single font family for consistency |
| 39 | - MUST use `53px` / `extra_bold` for primary headings |
| 40 | - MUST use `31px` / `semi_bold` for body text |
| 41 | - SHOULD reduce font weights (currently 6 detected) |
| 42 | - MUST use `text-balance` for headings and `text-pretty` for body text |
| 43 | - SHOULD use `tabular-nums` for numeric data |
| 44 | - NEVER modify letter-spacing unless explicitly requested |
| 45 | |
| 46 | ### Text Styles |
| 47 | |
| 48 | | Style | Font | Size | Weight | Color | Count | |
| 49 | |-------|------|------|--------|-------|-------| |
| 50 | | `heading-1` | Inter | 53px | extra_bold | #34332F | 1 | |
| 51 | | `text-40px` | Inter | 40px | semi_bold | #D9D7D3 | 1 | |
| 52 | | `text-36px` | Inter | 36px | extra_bold | #1A1A1A | 1 | |
| 53 | | `body` | Inter | 31px | semi_bold | #3E3E3E | 1 | |
| 54 | | `text-24px` | Inter | 24px | 500 | #898989 | 1 | |
| 55 | | `text-22px` | Inter | 22px | 400 | #42423F | 1 | |
| 56 | | `text-20px` | Inter | 20px | 500 | #3F3F3F | 1 | |
| 57 | | `text-18px` | Inter | 18px | 500 | #252525 | 1 | |
| 58 | | `text-18px` | Inter | 18px | 700 | #E4DCE8 | 1 | |
| 59 | | `text-18px` | Inter | 18px | 500 | #BFBFBF | 1 | |
| 60 | |
| 61 | ### Typography Reference |
| 62 | |
| 63 | **Font Families:** |
| 64 | - `Inter` (used 55x) |
| 65 | |
| 66 | **Font Sizes:** 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 14px, 15px, 17px, 18px, 20px, 22px, 24px, 31px, 36px, 40px, 53px |
| 67 | |
| 68 | ## Spacing |
| 69 | |
| 70 | - MUST use 4px grid for spacing |
| 71 | - SHOULD use spacing from scale: 1px, 2px, 3px, 4px, 5px, 6px, 11px, 13px |
| 72 | - SHOULD use 2px as default gap between elements |
| 73 | - NEVER use arbitrary spacing values (use design scale) |
| 74 | - SHOULD maintain consistent padding within containers |
| 75 | |
| 76 | ## Borders |
| 77 | |
| 78 | - MUST use border-radius from scale: 0px, 1px, 2px, 3px, 4px, 5px, 6px, 7px, 9px, 22px, 25px |
| 79 | - SHOULD use 22px+ radius for pill-shaped elements |
| 80 | - SHOULD limit border widths to: 1px, 2px |
| 81 | - SHOULD use 1px as default border-radius |
| 82 | - NEVER use arbitrary border-radius values (use design scale) |
| 83 | - SHOULD use subtle borders (1px) for element separation |
| 84 | |
| 85 | ### Border Radius Reference |
| 86 | |
| 87 | **Scale:** 0px, 1px, 2px, 3px, 4px, 5px, 6px, 7px, 9px, 22px, 25px |
| 88 | |
| 89 | ## Layout |
| 90 | |
| 91 | - MUST design for 1920px base viewport width |
| 92 | - SHOULD use consistent element widths: 10px, 12px, 16px, 11px, 27px |
| 93 | - SHOULD maintain text-heavy layout with clear hierarchy |
| 94 | - NEVER use `h-screen`, use `h-dvh` for full viewport height |
| 95 | - MUST respect `safe-area-inset` for fixed elements |
| 96 | - SHOULD use `size-*` for square elements instead of `w-*` + `h-*` |
| 97 | |
| 98 | ### Detected Layout Patterns |
| 99 | |
| 100 | - **Main Content**: width: 1920px, height: 607px |
| 101 | - **Header**: height: 30px |
| 102 | |
| 103 | ## Components |
| 104 | |
| 105 | ### Buttons |
| 106 | |
| 107 | | Variant | Background | Text | Border | Height | Radius | |
| 108 | |---------|------------|------|--------|--------|--------| |
| 109 | | Ghost | transparent | #A7A7A7 | none | - | - | |
| 110 | |
| 111 | ## Interactive States |
| 112 | |
| 113 | ### Focus |
| 114 | |
| 115 | - MUST use `2px` outline with accent color (`#2E114B`) |
| 116 | - MUST use `2px` outline-offset |
| 117 | - NEVER remove focus indicators |
| 118 | |
| 119 | ### Hover |
| 120 | |
| 121 | - Buttons (primary): lighten background by 10% |
| 122 | - Buttons (secondary): use `#191610` background |
| 123 | - List items: use `#191610` background |
| 124 | |
| 125 | ### Disabled |
| 126 | |
| 127 | - MUST use `opacity: 0.5` |
| 128 | - MUST use `cursor: not-allowed` |
| 129 | |
| 130 | ## Interaction |
| 131 | |
| 132 | - MUST use an `AlertDialog` for destructive or irreversible actions |
| 133 | - SHOULD use structural skeletons for loading states |
| 134 | - MUST show errors next to where the action happens |
| 135 | - NEVER block paste in `input` or `textarea` elements |
| 136 | - MUST add an `aria-label` to |
People who liked this also viewed
6 picksType
- seo-auditWhen the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tagSkillsJul 2026
- copywritingWhen the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user sSkillsJul 2026
- marketing-psychologyWhen the user wants to apply psychological principles, mental models, or behavioral science to marketing. Also use when the user mentions 'psychology,' 'mental models,' 'cognitive bias,' 'persuasion,'SkillsJul 2026
- content-strategyWhen the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "conSkillsJul 2026
- programmatic-seoWhen the user wants to create SEO-driven pages at scale using templates and data. Also use when the user mentions "programmatic SEO," "template pages," "pages at scale," "directory pages," "location pSkillsJul 2026
- marketing-ideasWhen the user needs marketing ideas, inspiration, or strategies for their SaaS or software product. Also use when the user asks for 'marketing ideas,' 'growth ideas,' 'how to market,' 'marketing stratSkillsJul 2026
