flowmanceDactör Design System
Dactör is a modern clinic or private-practice site. It is mostly white, calm and tidy, with one strong electric violet (#3B00DB) that does all the work: buttons, links, service titles, the working-hours card and large curved colour blocks. Turquoise (#00DBD8) and sky blue (#0095DB) appear as secondary shapes and gradients behind the violet; sky blue also fills the closing CTA band. The type is plain Inter, large and slightly tight in the hero, with full-black body text.
Four signatures make it recognisable:
- Big curved colour blocks. The hero's right side is a violet panel with a 200px rounded bottom-left corner; behind the video section a violet block, a turquoise quarter-circle and a sky-blue corner overlap. The curves are huge (200px radii), never small.
- Cut-out doctor on a circle. The hero doctor is a background-free cut-out standing in a violet circle with a turquoise and blue arc, flanked by small round illustrated badges (stethoscope, heartbeat) with confetti dots.
- Violet en dash. Compound words use a violet, thin (weight 200) en dash: Your go–to medical expert., patient – centered app.
- The working-hours card. A violet card in the services grid lists MON – WED 8AM – 7PM rows split by white-30% hairlines, each with a small black Book ◷ pill.
Colors
Surfaces
#FFFFFFPage background
#F7F8FCFeature and service cards, the app panel, inputs, dropdown hover
#F7F8FCInputs and their placeholder
#5E5E5EText on field
Ink
#FFFFFFText on primary
#3B00DBText on secondary
#FFFFFFText on accent
#020202Headlines and body text
#26272BNav links and footer links
#020202Body text is full ink in this template (the base p colour is #020202)
#020202 · 59%text-small meta (14px)
#555555Blog category text
#8F8F8FFooter links on hover
#FFFFFF · 70%Paragraphs on violet
#FFFFFFText on chip
#FFFFFFAction
#3B00DBMain button, working-hours card, hero panel, testimonial portrait backdrops
#FFFFFFThe Book an appointment button that sits on the violet hero panel
#00DBD8Turquoise arcs and quarter-circles; the hover end of the circle-button gradient
#0095DBThe closing CTA band and blue corner shapes
Lines & effects
#E1E1E1Rare 1px dividers (#EFEFF0 is also defined as a line variable)
#FFFFFF · 30%Hairlines between working-hours rows
#020202Book pills
Typography
Inter · display-hero
The quick brown fox jumpsHero h1: Your go–to medical expert. 86px · 500 · 1.0 · -2px
Inter · headline-md
The quick brown fox jumpsSection h2: Wide range of medical services, Patient testimonials. 39px · 600 · 1.1 · -1px
Inter · title-lg
The quick brown fox jumpsCard titles on the video section: Consult our doctors. 24px · 600 · 1.25
Inter · body-lead
The quick brown fox jumpsHero lead and violet eyebrows (What we can offer?, Book within minutes). 21px · 500 · 1.24 · -1px
Inter · label
The quick brown fox jumpsCard links (Learn More), footer links and titles. 16px · 600 · 1.25
Inter · eyebrow
The quick brown fox jumpsWORKING HOURS. 14px · 500 · 1.43 · 1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 150px top and bottom (100px at ≤991px, 70px at ≤479px); 80px for the coloured bands (section color, the CTA), 40px with no side padding at ≤479px; the footer is 80px top and 30px bottom (50px top at ≤479px) |
| Breakpoints | 991px, 767px and 479px (max-width), plus min-width steps at 768, 1440 and 1920px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 20px | |
md | 25px | |
lg | 30px | |
xl | 48px | |
2xl | 70px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 30px | |
gutter | 72px | |
section-band | 80px | |
section | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Arrow nudge on button hover | x 0 → 6px, 500ms outQuint, and back |
| Icon and social hover | scale 1 → 1.1, 100ms ease or 200ms (CSS), and back |
| Mouse parallax on hero badges | Elements move between ±50px and ±80px on x and y, 500ms, following the cursor |
| Scroll reveal | opacity 0 → 1, 1000ms outQuart |
| Dropdown | Chevron rotates, 400ms swingTo; list height 300ms ease |
| Nav links | color and opacity 300ms; 2px underline |
| Footer links, dropdown rows | all 300ms |
| Button background | background-color 200ms cubic-bezier(.645,.045,.355,1) |
Do’s and don’ts
- Use primary #3B00DB for the main buttons, links, eyebrows and service titles, with white text on violet fills.
- Back key content with big curved blocks: violet with a 200px corner, plus turquoise #00DBD8 and blue #0095DB shapes peeking out behind it.
- Put a violet body-lead eyebrow above most headline-md section titles.
- Use surface-1 #F7F8FC cards with a 15px radius and no border or shadow.
- Set body copy in near-black #020202 at 15px / 500.
- Use the violet en dash (weight 200) in compound words in big titles.
- Put text on turquoise or use turquoise for buttons; it is a shape colour only.
- Add drop shadows, borders on cards, or glass effects.
- Use grey body text; grey is for small meta (#02020296, #555555) and hover only.
- Use small radii on colour blocks; shapes use 200px corners, cards 15px, buttons 5px.
- Add a second typeface or uppercase beyond the working-hours label.
- Use stock photos with busy backgrounds; keep subjects cut out or on plain white rooms.
Example prompt
Any page in the Dactör 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 Dactör 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/dactor.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