flowmanceDolce Design System
Dolce is a cheerful, approachable startup template. Headlines are set in a heavy monospace (Fira Mono 700) in deep teal, which gives it a typewriter, "made by builders" feel, while the body copy stays in calm grey Inter. White sections sit inset on a warm cream page, lavender buttons carry a tiny arrow, and flat vector illustrations of a person juggling charts set the friendly tone.
Four signatures make it recognisable:
- The cream frame. The page is warm cream (#FAF0DC). The nav bar and every white section are inset 40px from the viewport edges, so a cream border runs down both sides of the page. The hero and the testimonials band sit directly on the cream.
- Monospace headlines, sans-serif paragraphs. Every headline, button, nav link and name is Fira Mono; every paragraph is Inter. The mono is bold (700) for headlines and 500 for feature and blog titles and UI text.
- The lavender arrow button. A flat #E6D7FA block with midnight-purple (#2D235F) mono text and a small ▸ arrow on the right, 4px radius, 58px tall. On hover it lightens and the arrow slides right.
- Colour-block bands. Between white sections the page drops into full midnight-purple (#2D235F) or deep teal (#0B4141) bands with white headlines, a salmon CORE FEATURES tag and photography.
Colors
Surfaces
#FFFFFFSection background (the white panels), nav bar, cards
#FBF8FFPricing card (ghost white)
#FAF0DCThe cream frame behind everything, the hero and the testimonials band
#F2E9FDTwitter icon circles, blockquotes; also the button hover
#2D235FMidnight-purple band, pricing quote panel, play button
#0B4141Teal band (See how Dolce works), the cart button in the nav
#FFFFFFInputs and their typed text; placeholder #555555
#111111Text on field
Ink
#2D235FText on primary
#0B4141Headlines (title-1, title-3), blog titles
#313137Hero lead and section subtitles, dropdown links
#222222Nav links
#000000Feature titles and testimonial names (the body default colour)
#072125Footer links
#686868Body paragraphs (p)
#8A8A8ABlog categories, crossed price tags
#FFFFFFText on accent
#FFFFFFText on the bands; .white-link at 70% goes full white on hover
#FFFFFF · 70%Text on the bands; .white-link at 70% goes full white on hover
Action
#E6D7FAThe main button (thistle with midnight text)
#F2E9FDButton background on hover
#2D235FLearn More ▸ and Work With Us ▸ text links
#FF6864The small uppercase tag (CORE FEATURES)
Lines & effects
#29335C · 15%1px input borders
#E1E1E1Centre of the fading hairline divider (white → #E1E1E1 → white)
Typography
Fira Mono · display-hero
The quick brown fox jumpsHero title A perfect template to get started. 65px · 700 · 1.00
Fira Mono · headline-lg
The quick brown fox jumpsSection titles (title-3): Testimonials, Pricing, band titles. 38px · 700 · 1.16
Fira Mono · title-lg
The quick brown fox jumpsBlog card titles. 23px · 500 · 1.17
Inter · body-lg
The quick brown fox jumpsHero lead, section subtitles (Start for free! Pay as you grow). 18px · 400 · 1.44
Inter · caption
The quick brown fox jumpsBlog categories, inputs, the twitter handle line. 14px · 500 · 1.43
Fira Mono · label
The quick brown fox jumpsButtons, Learn More ▸ links, footer links. 16px · 500 · 1.25
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1140px, centred |
| Section rhythm | 80px top and bottom, 5% side padding (68px at 1440px); 60px at ≤991px |
| Breakpoints | 991px, 767px and 479px (Webflow defaults) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 20px | |
lg | 30px | |
xl | 40px | |
2xl | 60px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
frame | 40px | |
section-side | 68px | |
section | 80px | |
hero-top | 165px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Scroll-in reveal | opacity 0 → 1 and y → 0px, 1000ms outQuart |
| Button hover | Background #E6D7FA → #F2E9FD, caret background-position 88% → 93%, 0.2s |
| Nav dropdown | Caret rotates, 300ms ease; list fades opacity 0 → 1, 300ms ease |
| Link hovers | Colour or opacity change, 0.2s (opacity .2s on nav links, all .2s on footer and blog links) |
Do’s and don’ts
- Set headlines in Fira Mono 700 teal #0B4141 (#20484F for title-4 subheads) and every paragraph in Inter 400 #686868.
- Inset white sections 40px from the edges on the #FAF0DC cream frame, and let the hero and testimonials sit on the cream.
- Use the lavender button-primary (#E6D7FA, #2D235F text, 4px radius, 58px tall, ▸ caret) for main actions, and Learn More ▸ text links for secondary ones.
- Break the page with one midnight #2D235F or teal #0B4141 band, introduced by the salmon CORE FEATURES tag.
- Centre section intros: headline-lg title, body-lg subtitle in #313137, 60px gap.
- Use flat vector illustration in the lavender/teal/cream palette for heroes and empty states.
- Use Fira Mono for paragraphs or Inter for headlines. The split is the identity.
- Use salmon #FF6864 for anything but the small tag; white on salmon is only 2.8:1, so keep tag text at 11px bold uppercase with 2px tracking and never use it for body text.
- Put ink-subtle #8A8A8A on text under 14px or on cream. It is 3.4:1 on white; use it only for categories and struck-through prices.
- Add heavy shadows. The strongest card shadow is black at 5% (0 15px 25px).
- Round buttons beyond 4px or cards beyond 10px; pill shapes are not part of Dolce.
- Use black (#000000) for section headings; it is only for small feature titles and names. Use teal #0B4141, or #20484F for subheads.
Example prompt
Any page in the Dolce style
More design systems like this
SaaS design systems, the same colors first.
Bring any of them to your AI tool
All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.
Get All AccessUpgrade to All AccessHow to use the Dolce design system
Pick a file to see what it’s for and where it goes.
What it is
The whole design system in one markdown file, written for AI: every color, type style, spacing value, component and motion rule, plus do's, don'ts and a ready prompt.
Best for
Claude, ChatGPT, Gemini, Cursor and v0, or any other AI tool that builds pages or code.
How to use it
- Put
DESIGN.mdin your project and mention it in your request, or save it as.cursor/rules/dolce.mdc - For the rule file, start it with a front-matter block that sets
alwaysApply: true, so every chat uses it - Ask: “Build a pricing page using DESIGN.md.” Cursor follows the colors, fonts, spacing and rules
- Put
DESIGN.mdin the project root - Add one line to
CLAUDE.md: “Follow DESIGN.md for all UI.” - Ask for any page or component; Claude reads the file first
- Attach
DESIGN.mdto the chat (or paste it in) - Ask: “Build a landing page in this design system.”
- Keep the file in the chat or project knowledge, so follow-up pages stay on style
What it is
Every token as data, in the W3C Design Tokens format: colors with their roles, type styles, radius, spacing, and component tokens that point at them.
Best for
Figma (Tokens Studio), Style Dictionary and other design-token tools, and build scripts.
How to use it
- In Figma, open Tokens Studio, choose Import, and pick
tokens.json - Or point Style Dictionary’s
sourceat it to generate tokens for any platform - In code, import it like any JSON file
What it is
A Tailwind CSS v4 theme: every color, font, type style, radius and spacing value becomes a Tailwind utility, like bg-canvas, text-headline-lg or rounded-md.
Best for
Tailwind v4 projects, and AI builders that write Tailwind (v0, Lovable, Bolt).
How to use it
- Save
theme.cssnext to your main CSS file - Import it after Tailwind:
@import "tailwindcss"; @import "./theme.css"; - Use the classes:
bg-canvas text-ink rounded-md p-lg
What it is
The same tokens as plain CSS variables on :root. Component values point at the color variables, so changing one color updates everything that uses it.
Best for
Any website: plain CSS, Webflow custom code, Framer, WordPress.
How to use it
- Add it to your stylesheet, or in Webflow paste it into Site settings → Custom code inside a
<style>tag - Use the variables anywhere:
color: var(--color-ink) - Change a token once and every place that uses it follows