---
name: dc-klinieken-design
description: Use this skill to generate well-branded interfaces and assets for DC Klinieken, the Dutch nationwide network of specialist medical centers. Contains the official brand colors (#053787 deep blue, #F3764A coral, #EAC479 sand, #F5EBE1 cream, #B5D0FF light blue, #B284B2 mauve), Axiforma typography (with Mulish fallback), the signature "D-pebble" container shape with diagonal gradients, real logo, photography, and full UI-kit recreations of the marketing website (dcklinieken.nl) and the Mijn DC Klinieken patient portal. Suitable for prototypes, mockups, slide decks, marketing assets, and production-grade design.
user-invocable: true
---

# DC Klinieken design skill

This skill packages the DC Klinieken visual identity for use in design artifacts and production code.

## How to use

1. **Read `README.md`** first — it gives you the brand promise, voice, kernwaarden, visual foundations, and a full asset/component index.
2. **Read `colors_and_type.css`** — it defines every CSS variable you should be using (`--dc-blue-700`, `--grad-blue-deep`, `--font-display`, etc).
3. **Reach for the UI kits** under `ui_kits/marketing/` and `ui_kits/portal/` — fork their components rather than rebuilding from scratch.
4. **Use real assets** from `assets/` — the official logo (`assets/logo-dc-klinieken.png`), the real photography in `assets/photos/`, the Netherlands map, the kernwaarden circle, etc.

## Critical brand rules

- **Default page background is cream `#F5EBE1`**, not white. White is reserved for elevated card surfaces.
- **The "D-pebble" shape** (flat left edge, fully-rounded right edge) is the brand's signature container — use it for hero headlines, photo crops, feature tiles, and quote blocks. Always anchored to a page edge or overlapping another pebble at an offset.
- **Gradients are diagonal (110° L→R)** per the brand guide. Pre-built: `--grad-blue-deep`, `--grad-blue-soft`, `--grad-mauve-coral`, `--grad-sand`.
- **Italic accent typography:** echo the logo's "DC *Klinieken*" pattern by italicizing the operative word in headlines (e.g. "Goede zorg, *nu*.").
- **Mauve `#B284B2` is a subkleur** — use sparingly ("terughoudend gebruiken").
- **Voice:** formal **u** on patient-facing public marketing; informal **je** inside Mijn DC Klinieken. Always Dutch by default.
- **No emoji.** Healthcare context.

## When making artifacts (slides, mocks, throwaway prototypes)

Copy assets from `assets/` and write HTML files referencing `colors_and_type.css`. Lean on the patterns in `preview/` and `ui_kits/`.

## When working on production code

Adopt the CSS variables defined in `colors_and_type.css`. Substitute Axiforma WOFF2 files into `fonts/` (see `fonts/README.md`). Lift component patterns from the UI kits — they intentionally use simple, cosmetic implementations so they translate cleanly to any framework.

## If invoked without further guidance

Ask the user what they want to build (campaign asset · slide deck · patient-facing screen · referrer-facing surface · email template · …), then act as the in-house designer.