Velvet
A premium violet SaaS theme: deep purple primary, rich dark surfaces, and a luxe feel for paid products and pro tiers.
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. Sora 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 violet sparingly for maximum impact on key actions.
- •Pair generous spacing with a single elevated shadow.
Don't
- •Don't flatten everything — depth is part of the premium feel.
- •Don't mix in competing accent hues.
- •Let overlays and emphasis ease in slowly for a premium 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.75rem |
| 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 30px -8px rgba(76,29,149,0.20) |
The design brief
Velvet is a premium violet design system for high-end SaaS, pro tiers, and AI products that want to feel expensive. A deep purple primary over rich neutrals reads as considered and upmarket.
Principles
- Violet is the signature — use it for primary actions and brand moments.
- Deep, slightly warm neutrals make the purple glow.
- Soft, generous radii and one elevated shadow create a premium surface.
When to use
Use Velvet for paid SaaS, AI copilots, and pro dashboards where perceived quality drives conversion. Avoid it for utilitarian internal tools.
Signature details
- Violet
#6d28d9primary; lavender#ede9feaccent. - Sora display type with 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: #ffffff;
--foreground: #1e1530;
--card: #ffffff;
--card-foreground: #1e1530;
--popover: #ffffff;
--popover-foreground: #1e1530;
--primary: #6d28d9;
--primary-foreground: #ffffff;
--secondary: #f5f3ff;
--secondary-foreground: #1e1530;
--muted: #f4f2f8;
--muted-foreground: #6b6280;
--accent: #ede9fe;
--accent-foreground: #5b21b6;
--destructive: #dc2626;
--destructive-foreground: #ffffff;
--border: #e9e5f2;
--input: #e9e5f2;
--ring: #6d28d9;
--shadow-sm: 0 1px 2px rgba(30,21,48,0.08);
--shadow-md: 0 10px 30px -8px rgba(76,29,149,0.20);
--shadow-lg: 0 30px 60px -14px rgba(76,29,149,0.30);
--font-sans: 'Sora', 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: #0e0a1a;
--foreground: #ece8f7;
--card: #171127;
--card-foreground: #ece8f7;
--popover: #171127;
--popover-foreground: #ece8f7;
--primary: #a78bfa;
--primary-foreground: #1e1b4b;
--secondary: #1f1733;
--secondary-foreground: #ece8f7;
--muted: #1f1733;
--muted-foreground: #a99fc4;
--accent: #3b2a66;
--accent-foreground: #ede9fe;
--destructive: #f87171;
--destructive-foreground: #450a0a;
--border: #271d40;
--input: #271d40;
--ring: #a78bfa;
}More designs
Aero
An airy sky-blue theme: soft glass surfaces, pastel accents, and rounded controls for calm, friendly product UIs.
Nocturne
Calm, dark-first SaaS theme with a single indigo accent.
Cobalt
A confident cobalt-blue SaaS theme: crisp slate neutrals, electric primary, and a dashboard-ready scale for data apps.