Themes / 07
Sorbet
A friendly, rounded theme for consumer apps. Peach cream, raspberry, butter yellow and soft, generous shapes.
npx shadcn@latest add https://strictthemes.com/r/sorbet.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.
Welcome
The public page of a habit-tracking app, with a friendly opening and one main button, three things the app does, a drawn preview of the app, a quote from a user and a sign-up form.
35.1k characters · Run 3 times in Claude Code
Strict Check 100%
Today
The home screen of a habit-tracking app, with a greeting and the date, today's habits as cards that can be marked done, a count that updates, a celebration badge when all are done and a form to add a habit.
33.9k characters · Run 3 times in Claude Code
Strict Check 100%
Progress
The progress screen of a habit-tracking app, with a week and month switch, the streak as a key figure, a chart of completed habits with a text alternative and each habit's completion in words and numbers.
34.8k characters · Run 3 times in Claude Code
Strict Check 100%
Plans
The plans page of a habit-tracking app, with a monthly and yearly switch, three plan cards with one recommended, what each includes in words and a short FAQ.
34.1k characters · Run 3 times in Claude Code
Strict Check 100%
Profile
The profile screen of a habit-tracking app, with name and email that are checked and saved, reminders as labelled switches, a reminder time and a way to delete the account after typing a word.
34.8k characters · Run 3 times in Claude Code
Strict Check 100%
03 / Colors
Every color the theme allows.
primary
#AD1457 / #FF85B4
on-primary
#FFFFFF / #3A0A1E
secondary
#2B1721 / #FBEAF0
on-secondary
#FFF6F1 / #2B1721
tertiary
#FFD23F
on-tertiary
#2B1721
neutral
#735E68 / #BFA6B0
background
#FFF6F1 / #1D1118
surface
#FFFFFF / #291922
foreground
#2B1721 / #FBEAF0
border
#F0D9D2 / #402A35
error
#B42318 / #FF8A80
success
#1C7C54 / #5BD6A0
Left: light mode. Right: dark mode.
04 / Typography
Five sizes. Nothing in between.
display
Gabarito · 56px · weight 800 · line 1.05
The quick brown fox
h1
Gabarito · 36px · weight 700 · line 1.15
The quick brown fox
h2
Gabarito · 24px · weight 700 · line 1.25
The quick brown fox
body
Figtree · 17px · weight 400 · line 1.6
The quick brown fox
label
Sometype Mono · 13px · weight 500 · line 1.35
The quick brown fox
05 / Shape and space
Corners and spacing.
sm
10px
md
20px
lg
28px
xs
4px
sm
8px
md
12px
lg
16px
xl
24px
2xl
40px
3xl
64px
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
Sorbet is for apps people use for themselves: habits, recipes, budgets, learning, a first-run flow. It should feel like a kind person explaining something. Shapes are round and large, the page is the color of peach cream, and the type is big enough to read on a phone held in one hand.
Colors
- Primary (
#AD1457) is raspberry, for the main action and links. - Secondary (
#2B1721) is a plum-black for secondary buttons and headings. - Tertiary (
#FFD23F) is butter yellow, for a badge, a streak or a small celebration. Dark text on it, always. - Neutral (
#735E68) sets helper text and labels. - Background (
#FFF6F1) is peach cream. Surface (#FFFFFF) is the white card that sits on it. - Success (
#1C7C54) and Error (#B42318) report state, each with a word and an icon.
Typography
Gabarito sets headings: round, heavy and friendly. Figtree sets body text at 17px, a size larger than most themes, because these screens are read on phones. Sometype Mono sets labels, counts and times. Labels are sentence case. Write short sentences and address the reader as "you".
Layout
A single column on phones and a 12-column grid, 1120px at its widest, from tablets up, with 24px gutters. One idea per screen and one main button per view. Spacing comes from the scale (4, 8, 12, 16, 24, 40, 64): 24px inside a card, 40px between groups, 64px between sections. Touch targets are at least 44px tall.
Elevation & Depth
Flat and soft. A card is white on peach with a 1px border. No drop shadows on cards; sheets and menus that float get one short, soft shadow.
Shapes
Round everywhere: 10px for badges and small tiles, 20px for buttons and inputs, which makes a button a pill, and 28px for cards. Avatars are circles.
Components
- Buttons: raspberry for the one main action, plum-black for the rest. A quiet choice beside them (cancel, back, skip) is an outline button: the card's white with a 1px border. Pill-shaped, with wide side padding.
- Cards: white, 28px corners, 24px padding, a 1px border.
- Badges: butter yellow with dark text, for progress and small wins.
- Inputs: pill-shaped, with a visible label above. Never a placeholder as the only label.
- Icons: 1.5px stroke line icons with round caps. Never emoji.
Do's and Don'ts
- Do keep one main action per view, in raspberry.
- Do use yellow for good news and nothing else.
- Do write the way you would say it out loud.
- Don't use gradients or glows to look playful: the shapes and the color do that.
- Don't put a card inside a card.
- Don't introduce a color, size or radius that is not a token above.