Pearl
A light luxury minimal theme: warm greige neutrals, soft shadows, and generous radii for premium, understated product UIs.
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. Manrope 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
- •Use warm greige neutrals for an understated, premium feel.
- •Lean on one soft elevation step and generous radii.
Don't
- •Don't use cold greys or harsh shadows.
- •Don't crowd surfaces — restraint signals quality.
- •Let surfaces ease up softly for a premium, tactile feel.
Hover to feel this theme's base transition.
Lucide · 1.5px 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.75rem |
| Padding | 0 1.15rem |
| Height | 2.6rem |
| Weight | 600 |
Badge
| Background | var(--accent) / var(--primary) |
| Text | var(--accent-foreground) / var(--primary-foreground) |
| Radius | 9999px |
| Padding | 0.15rem 0.55rem |
| Font size | 0.72rem |
| Weight | 600 |
Use for status, counts, and short labels. Keep to one or two words.
Alert
| Radius | 1.125rem |
| 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.75rem |
| Height | 2.6rem |
| 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 | 1rem |
| Padding | 1.5rem |
| Shadow | 0 10px 28px -10px rgba(41,37,36,0.14) |
The design brief
Pearl is a light luxury minimal design system. Warm greige neutrals, soft shadows, and generous radii read as premium and understated — quiet money, not loud branding.
Principles
- Warm greige neutrals feel richer than cold grey.
- One soft elevation step gives surfaces a tactile, premium lift.
- Generous radii and spacing signal calm confidence.
When to use
Use Pearl for premium SaaS, fintech, and high-end commerce that wants understated luxury. Avoid it for playful or budget brands.
Signature details
- Greige
#44403cprimary on warm#fafaf9surfaces. - Manrope + JetBrains Mono, 0.75rem 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.75rem;
--background: #fafaf9;
--foreground: #292524;
--card: #ffffff;
--card-foreground: #292524;
--popover: #ffffff;
--popover-foreground: #292524;
--primary: #44403c;
--primary-foreground: #fafaf9;
--secondary: #f2f1ee;
--secondary-foreground: #292524;
--muted: #f2f1ee;
--muted-foreground: #6f6b64;
--accent: #eae8e3;
--accent-foreground: #292524;
--destructive: #b91c1c;
--destructive-foreground: #ffffff;
--border: #e7e5e0;
--input: #e7e5e0;
--ring: #44403c;
--shadow-sm: 0 1px 2px rgba(41,37,36,0.05);
--shadow-md: 0 10px 28px -10px rgba(41,37,36,0.14);
--shadow-lg: 0 28px 56px -18px rgba(41,37,36,0.20);
--font-sans: 'Manrope', 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.16,1,0.3,1);
--duration-base: 260ms;
}
.dark {
--background: #1a1917;
--foreground: #ebe9e5;
--card: #222120;
--card-foreground: #ebe9e5;
--popover: #222120;
--popover-foreground: #ebe9e5;
--primary: #d6d3cd;
--primary-foreground: #1a1917;
--secondary: #2a2826;
--secondary-foreground: #ebe9e5;
--muted: #2a2826;
--muted-foreground: #a8a39b;
--accent: #332f2c;
--accent-foreground: #ebe9e5;
--destructive: #f87171;
--destructive-foreground: #450a0a;
--border: #34302c;
--input: #34302c;
--ring: #d6d3cd;
}More designs
Monolith
Pure-monochrome, dark-first UI for frontier products — black, white, and a precise gray ramp.
Bone
A warm off-white minimal theme: bone paper, stone-black ink, and quiet warmth for calm, content-first product UIs.
Carbon
A dark-first minimal theme: near-black surfaces, crisp white type, tight radii, and zero noise for focused tools and editors.