Themes / 11
Tisane
A soft, unhurried theme for food, wellness and places to stay. Oat paper, olive green, a peach accent and a rounded serif.
npx shadcn@latest add https://strictthemes.com/r/tisane.json- DESIGN.md The spec
- tailwind.css Tailwind CSS v4
- shadcn.css shadcn variables
- nuxt-ui.css Nuxt UI
- app.config.ts Nuxt UI config
- tokens.json W3C design tokens
01 / Preview
Stock shadcn components, this theme.
Ship the page, keep the system.
Every color, corner and typeface in this box comes from the theme's tokens. The components are stock shadcn.
96%88%100%02 / Page prompts
Paste one into your agent. Get that page.
Each prompt is a full brief for one page in this theme: its sections, layout, behavior, and a checklist the agent goes through before it says it is done. The rules in every prompt are generated from the theme's strict block. Each preview is the page a coding agent built from the prompt, shown as it came out.
Home
The opening page of a tea room and shop, with a calm welcome, what is in season, a line about the place, its opening hours and a newsletter sign-up.
33.3k characters · Run 3 times in Claude Code
Strict Check 100%
Menu
The menu of a tea room, in three sections of teas, plates and cakes, with a price and dietary marks for each item and a filter for vegan and gluten-free dishes.
33.1k characters · Run 3 times in Claude Code
Strict Check 100%
Booking
A page to reserve a table at a tea room, with a form for the date, time, number of people, name, email and a note, a summary that follows the form, and a confirmation.
34.8k characters · Run 3 times in Claude Code
Strict Check 100%
Recipe
One recipe from a tea room's journal, with its title, a standfirst, the time and servings, ingredients that scale with a servings control, numbered steps and a note from the kitchen.
33.9k characters · Run 3 times in Claude Code
Strict Check 100%
Visit
The page that tells people how to find a tea room, with its address, opening hours with today marked, how to get there, a map drawn from plain elements, notes on access and a contact form.
35.0k characters · Run 3 times in Claude Code
Strict Check 100%
03 / Colors
Every color the theme allows.
primary
#4C5B1A / #B9CC72
on-primary
#FFFFFF / #1B2206
secondary
#26281C / #EDEBDD
on-secondary
#FCFAF4 / #26281C
tertiary
#F0B59A
on-tertiary
#26281C
neutral
#626451 / #A9AB95
background
#F5F1E8 / #171810
surface
#FCFAF4 / #20221A
foreground
#26281C / #EDEBDD
border
#DAD5C3 / #36382B
error
#A8321F / #FF917E
Left: light mode. Right: dark mode.
04 / Typography
Five sizes. Nothing in between.
display
Young Serif · 56px · weight 400 · line 1.05
The quick brown fox
h1
Young Serif · 38px · weight 400 · line 1.15
The quick brown fox
h2
Young Serif · 26px · weight 400 · line 1.25
The quick brown fox
body
Albert Sans · 17px · weight 400 · line 1.65
The quick brown fox
label
Reddit Mono · 12px · weight 500 · line 1.35
The quick brown fox
05 / Shape and space
Corners and spacing.
sm
6px
md
12px
lg
20px
xs
4px
sm
8px
md
16px
lg
24px
xl
40px
2xl
72px
06 / Rules
What the strict block enforces.
- Contrast
- WCAG AA
- Colors
- Tokens only, within 0.02 of a token
- Spacing
- Scale only, plus 0, 1px, 2px
- Corners
- Scale only, full rounds up to 64px
- Type
- Scale only, declared fonts only
- purple gradient
- Not allowed
- emoji icons
- Not allowed
- nested cards
- Flagged
- glow shadows
- Not allowed
07 / Guidance
What your agent reads.
Overview
Tisane is for slow things: a tea shop, a restaurant menu, a yoga studio, a guesthouse, a recipe journal. It should feel like a linen napkin and a hand-thrown cup. Colors are taken from plants and grain, corners are soft, and the page is in no hurry to sell anything.
Colors
- Primary (
#4C5B1A) is olive green, for the main action and links. - Secondary (
#26281C) is a dark olive-black for secondary buttons and headings. - Tertiary (
#F0B59A) is peach, for a badge such as "Seasonal" or "Few left". Dark text on it. - Neutral (
#626451) sets notes, ingredients' small print and captions. - Background (
#F5F1E8) is oat paper. Surface (#FCFAF4) is a lighter cream for cards and menus. - Error (
#A8321F) is a brick red, used only with a message.
Typography
Young Serif sets headings in its one weight: a round, sturdy serif that reads warm at any size. Never fake a bold. Albert Sans sets body text at 17px with open line spacing. Reddit Mono sets labels: prices, times, weights and measures, in sentence case. Give text room: lines of 60 to 70 characters.
Layout
A 12-column grid, 1120px at its widest, with 24px gutters. Pages are mostly a single calm column with one image or one card beside the text. Spacing comes from the scale (4, 8, 16, 24, 40, 72): 24px inside a card, 72px between sections. Leave the oat background showing around everything.
Elevation & Depth
Flat and matte. A card is cream on oat with a 1px border. No drop shadows on cards; a menu or a dialog floats on one soft, warm shadow.
Shapes
Soft, like something worn smooth: 6px for badges and checkboxes, 12px for buttons and inputs, 20px for cards and images. Avatars are circles.
Components
- Buttons: olive for the one main action, olive-black for the rest. Sentence-case mono labels.
- Cards: cream, 20px corners, 24px padding, a 1px border.
- Badges: peach with dark text, one or two words.
- Menus and lists: a name on the left, a mono price on the right, a 1px rule between rows.
- Icons: 1.5px stroke line icons with round caps. Never emoji.
Do's and Don'ts
- Do keep the palette to what could grow in a garden.
- Do give each section room: one idea, then space.
- Do set prices and times in the mono font, quietly.
- Don't use bright or pure colors, gradients or glows.
- Don't crowd the page with badges or buttons: one of each is usually enough.
- Don't introduce a color, size or radius that is not a token above.