# DC Klinieken — Design System

A visual + content system for **DC Klinieken**, a Dutch nationwide network of 16 independent specialist medical centers (Zelfstandige Behandelcentra) plus a digital clinic. The brand serves:

1. **Patients** — looking for fast, hospitable, fully-reimbursed specialist care close to home.
2. **Verwijzers (referring GPs)** — looking for a reliable, well-networked, low-friction partner.
3. **Algemene bezoekers** & **werkzoekenden** — for information and recruitment.

> **Brand promise:** *"Goede zorg, nu."* — Good care, now. Specialistische, laagcomplexe zorg without hospital-grade waiting times, delivered in a hospitable (gastvrij) and personal setting. *Tijd is kostbaar.*

---

## Sources used

This system was built from the **official DC Klinieken brand guide** (March 2026 deck, supplied by the team). Every color, font, gradient, container shape, and core asset comes directly from that document.

- Brand book PPTX → `uploads/brand_pdf-1779448910900.pptx`
- All extracted visual assets are catalogued under `assets/`
- Web reference: <https://www.dcklinieken.nl> (used for context / copy tone, not for visuals)

---

## Index

### Foundations
- [`colors_and_type.css`](./colors_and_type.css) — every CSS variable (colors · type · spacing · radii · shadows · motion · gradient presets · `.dc-pebble` helpers)
- [`fonts/README.md`](./fonts/README.md) — how to drop in Axiforma WOFF2 files (currently using Mulish as substitute)

### Brand assets ([`assets/`](./assets/))
- `logo-dc-klinieken.png` — official wordmark (deep blue on transparent)
- `logo.svg` / `logo-white.svg` — vector reconstructions using Mulish (drop-in for real Axiforma)
- `axiforma-specimen.png` — the official Axiforma type specimen
- `pebble-templates.png` — the official D-pebble templates from the brand book
- `kernwaarden.png` — kernwaarden circle (Aandacht · Snelheid · Daadkracht · Eenvoud)
- `map-netherlands.png` — official locations map
- `organogram.png` — official org chart
- `illustrations/5v-hand.png` — the 5V strategy hand illustration
- `illustrations/yoga.png` — sample lifestyle illustration
- `photos/` — real photography from the brand book

### UI kits
- [`ui_kits/marketing/`](./ui_kits/marketing/) — dcklinieken.nl-style marketing site (homepage with hero, USPs, services grid, locations map, patient story, news, footer)
- [`ui_kits/portal/`](./ui_kits/portal/) — Mijn DC Klinieken patient portal (login with DigiD, dashboard, appointments, results)
- [`ui_kits/_shared/ui.css`](./ui_kits/_shared/ui.css) — shared button / badge / card / pebble / layout primitives

### Preview
- [`preview/`](./preview/) — 27 specimen cards rendered in the Design System tab

### Cross-compatible
- [`SKILL.md`](./SKILL.md) — Agent-Skill manifest for downstream use

---

## Content fundamentals

### Voice & tone

DC Klinieken's voice is **calm, direct, persoonlijk, and Dutch-pragmatic**. It treats the patient as a capable adult who values their own time. It is **not** chirpy, not overly clinical, not marketing-hyperbolic.

The brand's four **kernwaarden** drive the writing:

| Kernwaarde | What it means in copy |
|---|---|
| **Aandacht** | "We nemen de tijd." Direct address. Patient is named subject of sentences. |
| **Snelheid** | Concrete numbers (24 uur uitslag, binnen 1 week terecht). Short sentences. |
| **Daadkracht** | No-nonsense. "Wij doen X." Not "wij willen graag X." |
| **Eenvoud** | Short words. Short clauses. Active voice. One idea per sentence. |

| Trait | Yes | No |
|---|---|---|
| Address | Formal **u** on patient-facing public marketing. Informal **je** post-login in Mijn DC Klinieken. | Mixing within a surface. |
| Pacing | Declarative, short. | Long subordinate clauses. |
| Promise framing | Concrete numbers ("vaak binnen een week", "uitslag in 24 uur") | Vague superlatives ("de beste zorg") |
| Tense | Present active. | Passive, conditional. |

**Words from the official brand vocabulary:**
*gastvrij · persoonlijk · snel · daadkrachtig · eenvoud · korte wachttijden · gespecialiseerd · verzekerd · vergoed · verwijzing · uitslag · afspraak · onderzoek · behandeling · dichtbij.*

### Casing & punctuation

- **Sentence case** for headings and buttons. Never ALL-CAPS except in tracked eyebrow labels (max 12px, tracked +0.10em).
- **Italic-accent device** — italicize the *operative word* in a headline. The brand uses this everywhere (the logo "DC *Klinieken*"; "Weer *focus* op je vak"; "Goede zorg, *nu*"). Build headlines as `<h1>Text <em>accent</em> rest</h1>`.
- Periods drop from single-sentence cards/CTAs.
- Number formatting: Dutch (`16 vestigingen`, `175.000`, `€ 0,–`, `24 uur`, `088 0100 900`).
- Times: `17:30 – 20:00` with en-dash.
- Use non-breaking hyphens in `MRI‑scan`, `maag‑darmonderzoek`, `hooi‑koorts` (avoid bad line breaks).

### Examples

✓ "Goede zorg, *nu*."
✓ "Snel een afspraak. Vaak binnen een week terecht."
✓ "Weer *focus* op je vak? Wij hebben plek voor anesthesiologen, dermatologen, gynaecologen…"
✓ "Ook met pijn je leven terug. *Dát* is de zorg van DC."

✗ "🎉 Welkom bij DC! We're so excited to help!"
✗ "BOEK NU"
✗ "Onze experts staan altijd voor u klaar."

### Emoji

**No.** Healthcare context erodes trust with emoji. The only acceptable mark is a single ✓ in feature lists, ideally rendered as an SVG check (we ship one).

---

## Visual foundations

### Mood

**"Warm zakelijk"** — warm but professional. Modern Dutch healthcare. The system pairs a confident deep blue (institutional authority) with a coral accent, soft mauve, and warm sand-cream surfaces. Cream — not white — is the default page background. Photography is real, warm-lit, candid.

### Color (from the brand book)

#### 5 Hoofdkleuren

| Token | Hex | Role |
|---|---|---|
| `--dc-blue-dark` (`--dc-blue-700`) | **#053787** | PRIMARY — headlines, logo, CTAs |
| `--dc-blue-light` (`--dc-blue-200`) | **#B5D0FF** | Soft surfaces, gradient endpoint |
| `--dc-coral` (`--dc-coral-400`) | **#F3764A** | ACCENT — sparing emphasis |
| `--dc-sand` (`--dc-sand-300`) | **#EAC479** | Warm secondary, illustration fills |
| `--dc-cream` | **#F5EBE1** | DEFAULT PAGE BACKGROUND |

#### Subkleur (terughoudend gebruiken)

| Token | Hex | Role |
|---|---|---|
| `--dc-mauve` (`--dc-mauve-300`) | **#B284B2** | Soft accent for keyword highlights, 5V hand, secondary pebbles |

Use mauve sparingly. Common idioms: italic accent in body copy (e.g. *doktersassistenten*), layered pebble compositions (mauve over blue), illustration accent fills.

### Typography

**Axiforma** by Type Department, in weights **Medium · Bold · Black · Bold Italic**.

- The logo wordmark uses Bold + Bold Italic ("DC" upright + "*Klinieken*" italic). This italic-accent pattern recurs throughout headlines, ads, and editorial copy.
- Body copy: Medium or Regular at 16px / 1.55 line-height.

Currently substituted with **Mulish** (Google Fonts) — see `fonts/README.md` for license + swap instructions.

### Spacing & rhythm

- Base unit: **4 px**. Spacing tokens: `--sp-1` (4) · `--sp-2` (8) · `--sp-3` (12) · `--sp-4` (16) · `--sp-6` (24) · `--sp-8` (32) · `--sp-12` (48) · `--sp-16` (64) · `--sp-20` (80) · `--sp-24` (96).
- Layout grid: 12-col @ 1280px max, 32px gutters, 32px lateral page margin.

### Corner radii

- `--r-xs` 4 px — inputs (when sharp)
- `--r-sm` 8 px — badges
- `--r-md` 16 px — small cards
- `--r-lg` 24 px — default card
- `--r-xl` 40 px — hero panel
- `--r-pill` ∞ — pill buttons, the D-shape

The brand favors **generous, soft** corners. Sharp corners only on data-dense tables.

### The D-pebble

The brand's signature container: a shape with **flat left edge** and **fully-rounded right edge** (or vice-versa, mirrored). Used for:

- Hero text overlays
- Photo crops in editorial layouts
- Quote callouts
- Feature tiles in print + social

Always overlapping the **left edge of the page** (anchored), with optional **layered offset pebbles** — mauve-coral gradient behind a deep-blue pebble, for example.

Helper class: `.dc-pebble` (deep blue gradient default) · `.dc-pebble--mauve` · `.dc-pebble--soft` · `.dc-pebble--sand`. See `colors_and_type.css`.

### Diagonal gradients

Per the brand guide: *"Het verloop wordt diagonaal toegepast (van links naar rechts)."* All gradients are **110°, left-to-right** with a slight downward tilt. Pre-built tokens:

- `--grad-blue-deep` — deep blue → light blue (most-used)
- `--grad-blue-soft` — light blue → cream
- `--grad-mauve-coral` — mauve → soft coral-mauve
- `--grad-sand` — sand → cream

### Borders

- Default 1px borders use `--border-soft` (≈ 8% blue-tinted neutral) — visible but quiet.
- Hover/focus borders escalate to `--dc-blue-700`.
- Never use pure black borders. Never use a thick colored left-border accent on a card.

### Elevation / shadows

Two-layer **blue-tinted** shadows (not pure black):

- `--shadow-1` — inline cards, subtle lift
- `--shadow-2` — floating cards, modal triggers
- `--shadow-3` — modals, hero pebbles

Healthcare = quiet. Don't over-shadow.

### Backgrounds & imagery

- **Cream** (`--dc-cream`) is the default body background. White panels float on it.
- Marketing hero sections often use the **layered pebble** composition: a deep-blue photo-bearing pebble on top of a soft mauve back layer.
- **Photography style:** real DC Klinieken staff and patients. Navy uniform with white shirt and small "DC Klinieken" embroidery. Warm interior daylight or natural outdoor settings. Candid — direct eye contact when looking at camera, otherwise mid-conversation. Slight shallow DOF. **Never** stock-style "doctor pointing at tablet."
- **Illustrations:** whimsical line work — **deep-blue stroke** + **mauve fills** + the occasional white/cream highlight. Hand-drawn feel. Used for editorial articles, leefstijl/wellness content, conceptual diagrams (e.g. the 5V hand).
- **Photo treatment in pebble crops:** the photo lives *inside* the D-pebble (clipped to the shape). The pebble is sometimes layered behind a small "Naam · Functietitel" tag pebble.

### Motion

- **Easing:** `cubic-bezier(0.2, 0, 0, 1)` (gentle ease-out) for entrances; `cubic-bezier(0.4, 0, 0.6, 1)` for exits.
- **Duration:** 180 ms micro · 280 ms page · 400 ms hero.
- **No bounces. No springs. No rotation.** Healthcare = calm.
- Reduced-motion users get instant transitions, full functionality.

### Interaction states

- **Hover** — primary buttons → `--dc-blue-800`. Outline buttons → fill with `--dc-blue-50`. Cards rise 1 elevation level + 1px translate-up.
- **Active / press** — scale 0.98 + filter brightness 0.96.
- **Focus-visible** — 2px solid `--dc-blue-700` outline + 4px ambient `rgba(5,55,135,.12)` ring. Always visible.
- **Disabled** — opacity 0.45, no pointer events. Never grayscale.

### Transparency & blur

Used only for: (a) modal backdrops (`rgba(2,26,64,0.55)` + 8px backdrop-blur), (b) sticky-header tint on scroll. Not decorative.

---

## Iconography

**Primary icon set: [Lucide](https://lucide.dev/)** loaded via CDN. Stroke 1.7–2.0 px, 18–24px default, currentColor. The neutral, single-weight outline pairs cleanly with Axiforma's humanist sans.

| Use | Set | Notes |
|---|---|---|
| UI / nav / inline | Lucide (CDN) | Primary set. Match stroke to ≈ 1.75–2.0. |
| Custom marks | Inline SVG | The circular arrow CTA (`→` on a 40–56 px blue disc) is a brand pattern — see `preview/components-pebble-in-use.html`. |
| Illustrations | Hand-drawn line | See `assets/illustrations/5v-hand.png` & `yoga.png`. Never generated. |
| Logo / wordmark | `assets/logo-dc-klinieken.png` (raster) or `assets/logo.svg` (Mulish vector reconstruction). |

**Emoji** — not used.
**Unicode** — `→` `·` `–` `—` `✓` permitted.

The brand also has a recurring **mauve hand-drawn arrow** (the "scan de QR-code" arrow from the symposium PDF) — use it sparingly to point/annotate informational graphics.

---

## Caveats (please review)

1. **Axiforma not licensed.** The system currently uses Mulish (free) as a visual stand-in. Drop the real WOFF2 files into `fonts/` per the instructions and every token + UI kit will pick them up automatically. Visible differences are noted in `fonts/README.md`.

2. **Verwijzers portal not mocked.** I built the marketing site + Mijn DC Klinieken patient portal. The B2B "Voor verwijzers" interface would be a third UI kit to commission.

3. **Mobile UI kits not included.** The marketing and portal kits are designed at 1280px+. They respond down to ~720px tolerably, but a dedicated mobile design pass would improve nav and pebble layering.

4. **Sample photography is sparse.** The brand book provided ~6 usable patient/staff photos. UI mocks reuse them, but production marketing should expand the library.

5. **The logo SVG is a reconstruction.** It uses Mulish glyphs to approximate the wordmark — perfect for layout/preview, but please ship the official Axiforma vector logo for any printed or live customer-facing materials.

---

## Strong ask

This v1 captures every visual rule from your brand book. To make it production-perfect, I need:

1. **The Axiforma WOFF2 files** (or your license / Type Department download)
2. **5–10 more real photographs** (interior, staff, patient interactions) for marketing layouts
3. **The official vector logo** (SVG or AI) to replace the Mulish reconstruction

Drop them in and I'll iterate. Also, **please remember to set the file type to "Design System" in the Share menu** so others in your org can view this system.