flowmanceDentistPro Design System
DentistPro is a clean, friendly clinic site: white pages washed with very pale blue, black semibold BDO Grotesk headlines, and a single royal blue (#3267FF) for links, icons, one highlighted word and outlined buttons. Photography is bright and people-first: smiling patients and doctors in white coats on soft blue backdrops.
Signatures:
- Leaf corners. Buttons are cut with two opposite corners rounded (border-radius: 0 30px: top-right and bottom-left at 30px, the other two square). Photos use the same idea at a larger scale: the hero photo has 30% 0 (top-left and bottom-right round), and other photos use arches such as 30% 30% 0 and 0 30% 30%.
- One blue word. The hero headline is black with its key word in blue and a small hand-drawn blue sparkle beside it: We are ready to make your smile sparkle. Section titles (Expertise in our field, Meet our doctors) stay all black.
- Short-stroke underline links. Blue links (Learn more, the phone number) carry a short blue dash under the first letters instead of a full underline; the dash grows on hover.
- Pale blue icon tiles. Thin blue line icons (teeth, implants, price tag, heart) sit centred in #EBF1FF squares of about 88px with a 25px radius.
DentistPro is a light-only design.
Colors
Surfaces
#FFFFFFPage, navigation, appointment form
#F7FAFFFooter; the hero gradient runs from #F3F8FF up to white (354°)
#EBF1FFIcon tiles and doctor photo backdrops
Ink
#3267FFText on primary
#FFFFFFText on accent
#000000Headlines, nav, body text
#000000Body copy is full black (p at opacity 1); same value as ink
#353535Testimonial names
#FFFFFFText on service photo cards
Action
#FFFFFFButtons are outlined: transparent fill on white, blue 2px border and blue label
#3267FF.button:hover fills blue with white text
#3267FFLinks, active nav item, icons, highlighted words, roles, footer titles, button outlines (--blue)
Lines & effects
#DDDDDD1px input borders
#E4E4E4The top-bar rule and the thin vertical separators
#C7C7C7 · 20%Date and category tags
#F1F1F1Dropdown link hover
Typography
BDO Grotesk · display-cta · shown in Inter (fallback)
The quick brown fox jumpsFooter call-to-action title (.cta-title, 5vw). 72px · 600 · 1.2
BDO Grotesk · headline-lg · shown in Inter (fallback)
The quick brown fox jumpsSection titles: Expertise in our field, Meet our doctors. 43px · 600 · 1.3
Inter Tight · quote
The quick brown fox jumpsThe testimonial quote, in blue. 37px · 600 · 1.3
BDO Grotesk · title-accent · shown in Inter (fallback)
The quick brown fox jumps.title, a blue sub-heading (3 on the page). 21px · 600 · 1.62
Inter Tight · body-lg
The quick brown fox jumpsHero lead and section leads, in black. 20px · 600 · 1.5
Inter Tight · caption
The quick brown fox jumpsTop bar: phone, address, hours. 14px · 600 · 1.4
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 125px top and bottom (.section), 80px at ≤991px, 70px at ≤767px and 50px at ≤479px |
| Breakpoints | 991px, 767px and 479px, plus a 1440px+ rule |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 8px | |
sm | 15px | |
md | 25px | |
lg | 35px | |
xl | 50px | |
2xl | 80px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
gutter | 72px | |
section | 125px | |
section-top-after-hero | 200px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Fade and rise | opacity 0 → 1 with a move to 0px, 1000ms outQuart (some fades 1250ms) |
| Pop in | scale 0 → 1, 400ms or 600ms outExpo |
| Link stroke | Width change, 300ms ease |
| Button fill | Background colour and a fill moving x 100% → 0%, 300ms ease |
| Arrow nudge | x 3px, y −3px, 300ms ease, and back |
| Hover slide | x 0 → 6px, 500ms outQuint |
| Photo parallax | y −7% ↔ 7%, 500ms, while the section scrolls in view |
| Card press | scale(.96), CSS transition: transform .3s |
| CSS default | transition: all .3s on links and buttons |
Do’s and don’ts
- Keep the page white (#FFFFFF) with pale blue areas (#F7FAFF, #EBF1FF) and black text.
- Use #3267FF for the hero's key word, links, icons and button outlines.
- Cut buttons with the 0 30px leaf radius and a 2px blue border; fill blue only on hover.
- Put icons in #EBF1FF tiles of about 88px with a 25px radius.
- Set headlines in BDO Grotesk 600 and paragraphs in Inter Tight 17px, line height 1.4.
- Show contact details (phone, address, hours) in the top bar on every page.
- Use filled blue buttons at rest or round all four corners of a button.
- Add a second brand colour, or grey body text.
- Use heavy shadows; keep them at 10% black or less.
- Put blue text on #EBF1FF tiles; blue on that tint is about 4.1:1, so keep it for icons. Blue footer titles on #F7FAFF are about 4.4:1, so keep them at 17px semibold or larger.
- Use dark or moody clinical photos; keep them bright and smiling.
- Animate longer than 1250ms or add bounce.
Example prompt
Any page in the DentistPro style
More design systems like this
Health 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 DentistPro 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/dentistpro.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