The mark
A single horizontal logotype: the droplet/tooth mark in Soft Blue (#A8D0E7) paired with the DENTA-VITA wordmark. The mark colour stays constant; only the wordmark flips — Deep Navy on light surfaces, Ivory on dark.
Clear space: keep at least the height of the mark clear on all sides. Min height: 22px on screen. Never recolour the mark, stretch, or add effects.
Modern family dental clinic
from Copenhagen or Zurich.
Light medical minimalism on white. Large whitespace, editorial composition, clean geometry, thin lines, very subtle shadows. Calm, honest, safe — premium but approachable. The hero is the doctor and the human care, never gimmicks.
Palette
White is the canvas. Deep navy is the brand color used on elements (buttons, headings, logo, footer, accent cards). Champagne only as a hairline.
Contrast: Deep Navy, Dark Text and Medical Blue on white are safe for text. White text only on navy elements. Soft Blue, Sand & Champagne are decorative — never small text.
One family — Manrope
A single geometric sans carries everything. Hierarchy comes from weight, size and tracking. Free and native in Framer & Google Fonts. No italic.
Wordmark: DENTA-VITA = Manrope SemiBold, tracking +0.04em · STOMATOLOGIE = Manrope Medium, uppercase, tracking +0.5em.
UI building blocks
Primary: navy fill, radius 12, hover → Midnight. Secondary: white, navy border + text.
A single navy feature/footer band is the only place navy fills the background.
Objednání
Light card (default): white bg, 1px navy-10% border, radius 16, soft navy-tinted shadow. Outline icons, 2px stroke.
Lužiny
1 min od metra Lužiny (linka B). Archeologická 2636/3, Praha 5 – Lužiny.
Do & Don't
- White background, large whitespace, editorial calm
- Manrope only — weight for hierarchy
- Navy as accent: buttons, headings, logo, icons
- Outline icons, 2px, rounded ends
- Real daylight photos of real doctors & patients
- Navy (or any) full-page background
- A second font, or italic text
- Gold styling, tooth icons, medical crosses
- Cartoon smiles, clipart, stock models
- Purple, gradient overload, glossy effects
Remap existing Framer styles
Keep the style names in your project, change the values. Set page/section backgrounds to White; set every text style to Manrope.
| Framer style (current) | New value | Becomes |
|---|---|---|
| Bílá | #FFFFFF | Pure White — page background |
| Primární modrá | #06284A | Deep Navy (brand/accent) |
| Světlá modrá | #A8D1E8 | Soft Blue (accent) |
| Béžová | #E9DED0 | Sand Beige (decorative) |
| Black | #17212B | Dark Text |
| Purple | — remove — | retire (off-brand) |
| + add: Midnight | #0D355D | accent cards / hover |
| + add: Medical Blue | #2E5F91 | links on white |
| + add: Champagne | #C9B08A | hairlines only |
CSS variables
Drop into Framer (custom code / Workshop) or any build. Also saved as denta-vita-tokens.css.
:root{ --dv-white:#FFFFFF; /* page background */ --dv-deep-navy:#06284A; /* brand / accent */ --dv-midnight:#0D355D; --dv-medical-blue:#2E5F91; --dv-soft-blue:#A8D1E8; --dv-ivory:#F8F5F0; --dv-sand:#E9DED0; --dv-ink:#17212B; /* body text on white */ --dv-champagne:#C9B08A; /* hairlines only */ --dv-font:'Manrope', system-ui, sans-serif; --dv-radius-m:12px; --dv-radius-l:16px; --dv-card-border:1px solid rgba(6,40,74,.10); --dv-card-shadow:0 16px 40px rgba(6,40,74,.08); }