Linen
Warm minimal theme on stone neutrals.
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
- •Let stone and clay neutrals do the work.
- •Use the Fraunces display for warmth at large sizes.
- •Keep contrast soft but always readable.
Don't
- •Don't introduce a loud accent.
- •Don't use harsh black or pure white.
- •Don't over-shadow — keep it gentle.
- •Soft and unhurried — premium calm.
- •Gentle fades, small movements.
Hover to feel this theme's base transition.
Lucide · 1.75px stroke · 1rem. Refined 1.75px icons in stone tones.
- Soft contrast must still clear 4.5:1 for text.
- Pair color with text or icon.
Button
| Background | var(--primary) |
| Text | var(--primary-foreground) |
| Radius | 0.5rem |
| Padding | 0.5rem 1rem |
| Height | 2.6rem |
| Weight | 600 |
Badge
| Background | var(--accent) / var(--primary) |
| Text | var(--accent-foreground) / var(--primary-foreground) |
| Radius | 0.375rem |
| Padding | 0.15rem 0.55rem |
| Font size | 0.75rem |
| Weight | 700 |
Use for status, counts, and short labels. Keep to one or two words.
Alert
| Radius | 0.75rem |
| 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.5rem |
| Height | 2.5rem |
| 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 | 0.75rem |
| Padding | 1.4rem |
| Shadow | 0 4px 14px -3px rgba(43,41,37,0.08) |
The design brief
Linen is a warm, quiet, minimal theme built on stone neutrals and a Fraunces display.
Principles
- Neutral first. Stone and clay tones do almost everything; color is a whisper.
- Soft contrast. Comfortable, never harsh — easy on the eyes in both modes.
- Gentle structure. A medium radius and light shadows keep it calm and premium.
When to use
Portfolios, studios, agencies, wellness and lifestyle brands, premium minimal products.
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.5rem;
--background: #faf9f6;
--foreground: #2b2925;
--card: #ffffff;
--card-foreground: #2b2925;
--popover: #ffffff;
--popover-foreground: #2b2925;
--primary: #57534e;
--primary-foreground: #faf9f6;
--secondary: #f0efe9;
--secondary-foreground: #44403c;
--muted: #f0efe9;
--muted-foreground: #78716c;
--accent: #eceae3;
--accent-foreground: #44403c;
--destructive: #dc2626;
--border: #e7e5e0;
--input: #e7e5e0;
--ring: #a8a29e;
--shadow-sm: 0 1px 2px rgba(43,41,37,0.05);
--shadow-md: 0 4px 14px -3px rgba(43,41,37,0.08);
--shadow-lg: 0 12px 30px -8px rgba(43,41,37,0.12);
--font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
--font-serif: 'Fraunces', ui-serif, Georgia, 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.2,0.8,0.2,1);
--duration-base: 260ms;
}
.dark {
--background: #1c1b19;
--foreground: #ebe9e4;
--card: #26241f;
--card-foreground: #ebe9e4;
--popover: #26241f;
--popover-foreground: #ebe9e4;
--primary: #d6d3cd;
--primary-foreground: #1c1b19;
--secondary: #2d2a24;
--secondary-foreground: #d6d3cd;
--muted: #2d2a24;
--muted-foreground: #a8a29e;
--accent: #33302a;
--accent-foreground: #d6d3cd;
--destructive: #f87171;
--border: #3a362f;
--input: #3a362f;
--ring: #a8a29e;
}