Coral Pop
A vibrant coral-rose theme: punchy pink-red primary, clean whites, and playful energy for consumer brands and app launches.
Build something people love.
A live preview of this theme — every color, font, radius, and shadow you see is rendered straight from its tokens.
Color system
Click any swatch to copy. Contrast graded against WCAG.
Typography
Body sample. Plus Jakarta Sans carries running text — readable paragraphs, comfortable measure, and a rhythm that holds up across long pages of content and UI.
Radius, shadow & fonts
Components
Real UI rendered with this theme's tokens.
A surface for grouping content, with the theme's border, radius, and shadow.
Principles, guidelines & component specs
Do's & don'ts, spacing, motion, iconography, accessibility, and exact component specs — all in the design.md too.
Do
- •Make the coral CTA the brightest thing on the page.
- •Keep surfaces white so the colour stays fresh.
Don't
- •Don't pair coral with another loud hue.
- •Don't use it for error-only semantics.
- •A little bounce on CTAs keeps the playful energy.
Hover to feel this theme's base transition.
Lucide · 1.75px stroke · 1rem. Outline icons with a consistent stroke width; size icons to match adjacent text and align them optically.
- Never use color as the only signal — pair it with text, an icon, or a shape.
- Every interactive element must be keyboard reachable and show a visible focus ring.
- Honor prefers-reduced-motion: reduce by disabling non-essential animation.
- Keep a logical heading order and give every form control a label.
Button
| Background | var(--primary) |
| Text | var(--primary-foreground) |
| Radius | 0.875rem |
| Padding | 0 1.25rem |
| Height | 2.75rem |
| Weight | 700 |
Badge
| Background | var(--accent) / var(--primary) |
| Text | var(--accent-foreground) / var(--primary-foreground) |
| Radius | 9999px |
| Padding | 0.15rem 0.55rem |
| Font size | 0.75rem |
| Weight | 600 |
Use for status, counts, and short labels. Keep to one or two words.
Alert
| Radius | 1.313rem |
| Padding | 1rem 1.25rem |
| Border | 1px solid var(--border) |
Always pair the color with an icon and a text label — never rely on color alone.
Form field
| Background | var(--background) |
| Border | 1px solid var(--input) |
| Radius | 0.875rem |
| Height | 2.75rem |
| Padding | 0.5rem 0.75rem |
Label sits above the field; helper or error text sits below.
Card
| Background | var(--card) |
| Text | var(--card-foreground) |
| Border | 1px solid var(--border) |
| Radius | 1.25rem |
| Padding | 1.5rem |
| Shadow | 0 10px 28px -8px rgba(225,29,72,0.22) |
The design brief
Coral Pop is a vibrant coral-rose design system for consumer brands, app launches, and DTC products. A punchy pink-red primary on clean white feels fun, modern, and shareable.
Principles
- One bold coral does the heavy lifting on CTAs and highlights.
- Clean white surfaces keep the colour feeling fresh, not heavy.
- Friendly, rounded controls invite tapping.
When to use
Use Coral Pop for consumer apps, lifestyle DTC brands, and playful product launches. Avoid it for serious B2B or financial contexts.
Signature details
- Coral
#e11d48primary; rose#ffe4e6accent. - Plus Jakarta Sans, 0.875rem radius.
Use this with your AI
Download or copy the design.md and paste it into Claude, Cursor, or v0 — it tells the agent exactly which colors, fonts, radii, and shadows to use, so your site comes out looking like this.
Export tokens
Drop straight into your codebase.
:root {
--radius: 0.875rem;
--background: #fffbfc;
--foreground: #2a0e15;
--card: #ffffff;
--card-foreground: #2a0e15;
--popover: #ffffff;
--popover-foreground: #2a0e15;
--primary: #e11d48;
--primary-foreground: #ffffff;
--secondary: #fff1f3;
--secondary-foreground: #2a0e15;
--muted: #fbeef1;
--muted-foreground: #8a4a57;
--accent: #ffe4e6;
--accent-foreground: #9f1239;
--destructive: #dc2626;
--destructive-foreground: #ffffff;
--border: #f3dde2;
--input: #f3dde2;
--ring: #e11d48;
--shadow-sm: 0 1px 2px rgba(159,18,57,0.08);
--shadow-md: 0 10px 28px -8px rgba(225,29,72,0.22);
--shadow-lg: 0 28px 56px -14px rgba(225,29,72,0.30);
--font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--ease-standard: cubic-bezier(0.4,0,0.2,1);
--ease-emphasized: cubic-bezier(0.34,1.56,0.64,1);
--duration-base: 250ms;
}
.dark {
--background: #1a0810;
--foreground: #f9e6ea;
--card: #241019;
--card-foreground: #f9e6ea;
--popover: #241019;
--popover-foreground: #f9e6ea;
--primary: #fb7185;
--primary-foreground: #4c0519;
--secondary: #2e1420;
--secondary-foreground: #f9e6ea;
--muted: #2e1420;
--muted-foreground: #c89aa6;
--accent: #7f1d3a;
--accent-foreground: #ffe4e6;
--destructive: #f87171;
--destructive-foreground: #450a0a;
--border: #3a1c2a;
--input: #3a1c2a;
--ring: #fb7185;
}More designs
Aurora
Soft glassmorphic theme with violet glow.
Sunset
A warm sunset theme: burnt-orange primary, peach accents, and confident type for landing pages that feel energetic and human.
Citrus
An energetic amber-lime theme: golden primary, zesty accents, and bold type for high-energy promos and event pages.