Introduction

This is the single source of truth for how Curitt looks, sounds, and feels — across the clinic, the website, print, and every campaign. It exists so that anyone working on Curitt, whether an in-house team member or an external freelancer, can make on-brand decisions without needing to ask.

Who this is for

• Anyone writing copy for Curitt — website, social, email, print
• Anyone designing anything — website, ads, signage, collateral
• Developers building app.curitt.com or the marketing site
• External partners — photographers, PR, agencies — who need to get up to speed fast

How to use it

Each section stands alone. If you're writing an Instagram caption, go to Tone of Voice. If you're building a component, go to Digital Design System for the actual token values. When in doubt, the Curitt Language section is the test every decision should pass.

The Curitt Language

Nine principles. Every decision in this document, and everything built from it, should trace back to at least one of these.

Reassuring, not clinical

The opposite of a sterile hospital corridor. Warmth through material, not decoration.

Plain-spoken, not simplified

Removing everything that isn't the answer. Confidence expressed through restraint, not jargon or hand-holding.

Considered, not precious

Generous space and a small number of very deliberate decisions — not about looking expensive. Everything present has a reason to be there.

Human-scaled

Wood, warm neutrals, plants, daylight. A residential aesthetic with durable materials, creating an inviting, refined space that centres on well-being.

Time-rich, not rushed

The entire brand promise is real time with a real doctor, in the room, at the moment it matters — the one thing the Dutch system structurally can't offer.

Real, not staged

Every claim, every piece of copy, every testimonial has to survive Dutch scepticism. No stock wellness language, no unverifiable claims.

Present, not futuristic

Good technology in service of a real doctor relationship, not technology as the point. No spaceship, no chrome, no 2045.

Honest about disease, optimistic about health

Disease isn't pleasant, and Curitt won't pretend otherwise. But the clinic, the experience, the tone, is a healthy place. The optimism lives in the space and the relationship.

Relational, not transactional

Health isn't a single appointment. A curated community, a Q&A space between visits, a sense of having a medical advisor beside you rather than a service you occasionally purchase.

The Name

Curitt — pronounced cure-it.

The name is the promise, said plainly: cure it before it happens. Curitt exists to find and deal with things before symptoms appear — the name should always be explained this simply, without embellishment.

Dictionary-style treatment

For the About page, and usable across brand materials:

Usage rules

• The pronunciation explanation appears on the About page and may be used in introductions, pitch materials, and campaign moments — but sparingly. It's a nice reveal, not a tagline to exhaust.
• "Cure it before it happens" and "Curitt before symptoms appear" are approved supporting lines. They work because they're literal — keep them that way. No riffing into "Curitt your way to wellness" territory.
• The dictionary treatment should always follow the format above: bold name, phonetic spelling, part of speech, plain definition, one example sentence. The example sentence can vary by context, but stays short and dry.
• Never explain the name apologetically ("it's a play on...") — state it as fact. The confidence is part of the register.

Tone of Voice

How the Curitt Language sounds in practice — plus one working decision that affects almost everything downstream.

Patient vs Member — working decision

Member for everything before and around the clinical moment — marketing, booking, the community/Q&A layer, ongoing relationship. It's warm, it signals belonging, and it supports "relational, not transactional" directly. Patient for the clinical moment itself — diagnosis, results, anything medically serious — where the weight of the word is doing real work, not just vibes.

The transition between the two needs to feel deliberate, not jarring — the shift from "member" to "patient" at the point results are delivered should read as a signal that we're in the serious part now, not a random register change. Worth testing the actual transition copy specifically once written.

Before / after

Logo & Identity Marks

Wordmark, lockups, clear space, minimum size, favicon and app icon.

Colour

Named tokens, not arbitrary hex values. Six ramp families, each a full numbered scale with semantic aliases layered on top. Click any swatch to copy its CSS variable.

Surfaces

Neutral Black

neutral-black-600 = text-primary. Body copy, headings — safe everywhere.

Neutral Grey

neutral-grey-600 = text-secondary, 5.03:1 on white. Captions, muted UI text.

Clay

clay-600 = accent-signature — buttons, icons, large fills only (3.35:1, not text-safe). clay-800 = accent-signature-text — the text-safe version (5.50:1), for any clay-coloured text.

Green

green-600 = accent-green, ~9–10:1 on white — the one accent safe to use directly as body text or links, no shade needed.

Wood

wood-600 = accent-wood — dividers, wayfinding, joinery-toned icons. Fill only, never text.

Sand

sand-600 = accent-sand — section backgrounds, alternating bands. Fill only, never text or small UI details.

Numbered scale vs semantic names

Two layers, on purpose. The raw numbered ramp (--clay-600, --green-800, and so on) is the full palette — every step, for anyone who needs a specific one. The semantic aliases (--accent-signature, --text-primary, --signal-attention, and so on) are what everyone should reach for by default; each one just points at a step in the ramp underneath.

Write var(--accent-signature) in a component, not var(--clay-600) directly — even though they resolve to the same value today. The semantic name is the one that can be re-pointed at a different step later without touching every component that uses it. Reach for the numbered scale only when there's a specific, documented reason a semantic token doesn't cover.

Colour usage ratio

How often each colour should appear across a typical Curitt page or piece of collateral — not a palette, a proportion guide. White and near-white carry most of the space; colour is used with intention, not decoration.

What earns each share

Where to use which

CSS variables

/* Curitt design tokens */
:root {
  /* ===== Surfaces (off-ramp) ===== */
  --surface-base: #FFFFFF;
  --surface-card: #F5F3F0;

  /* ===== Neutral Black ramp (text-primary) ===== */
  --neutral-black-950: #0B0B09;
  --neutral-black-800: #11100E;
  --neutral-black-600: #161512;  /* = text-primary */
  --neutral-black-400: #4F4E49;
  --neutral-black-200: #8B8A89;
  --neutral-black-100: #D0D0D0;
  --neutral-black-50:  #F3F3F3;
  --text-primary: var(--neutral-black-600);

  /* ===== Neutral Grey ramp (text-secondary) ===== */
  --neutral-grey-950: #2E2D2B;
  --neutral-grey-800: #51504D;
  --neutral-grey-600: #706F6B;  /* = text-secondary, 5.03:1 on white */
  --neutral-grey-400: #9F9E97;
  --neutral-grey-200: #BCBBB8;
  --neutral-grey-100: #DFDED9;
  --neutral-grey-50:  #F4F3F0;
  --text-secondary: var(--neutral-grey-600);

  /* ===== Clay ramp (accent-signature) ===== */
  --clay-950: #6C3727;
  --clay-800: #A1533D;  /* text-safe, 5.50:1 */
  --clay-600: #D86E4E;  /* fill/icon only, 3.35:1 */
  --clay-400: #E88C71;
  --clay-200: #EDB8A9;
  --clay-100: #F8E2DC;
  --clay-50:  #FEF8F7;
  --accent-signature: var(--clay-600);
  --accent-signature-text: var(--clay-800);

  /* ===== Green ramp (accent-green) ===== */
  --green-950: #08271E;
  --green-800: #0E372B;
  --green-600: #1C483B;  /* = accent-green, ~9-10:1 on white, safe as text directly */
  --green-400: #477568;
  --green-200: #7DA59A;
  --green-100: #C3DDD6;
  --green-50:  #F5F6F5;
  --accent-green: var(--green-600);

  /* ===== Wood ramp (accent-wood) ===== */
  --wood-950: #715C47;
  --wood-800: #957657;
  --wood-600: #C1A07F;  /* = accent-wood, fill only */
  --wood-400: #D2BCA8;
  --wood-200: #E5D8CB;
  --wood-100: #F4EBE4;
  --wood-50:  #FAF8F6;
  --accent-wood: var(--wood-600);

  /* ===== Sand ramp (accent-sand) ===== */
  --sand-950: #7F6D5F;
  --sand-800: #A99687;
  --sand-600: #DBD2CB;  /* = accent-sand, fill only */
  --sand-400: #EAE3DD;
  --sand-200: #F5EEE8;
  --sand-100: #FDF7F1;
  --sand-50:  #FBF8F5;
  --accent-sand: var(--sand-600);

  /* ===== Functional aliases — separately named even where they currently equal a brand accent ===== */
  --signal-attention: var(--clay-600);
  --signal-attention-text: var(--clay-800);
  --signal-success: var(--green-600);
  --focus-outline: var(--clay-600);  /* old ochre fully retired — clay takes over this role */
}

Typography

General Sans (Medium/Semibold) carries headlines. Public Sans (Regular) carries body copy and UI. Monospace is removed for now — no element in the system currently uses it. Every size below is derived from a minor third scale (1.200 ratio) at a 16px base — nothing here was picked by eye.

Download the typefaces for use on other projects:

The full type scale

Weight pairing

Updated to match the revised Figma type scale — headings moved off Semibold entirely.

H1 is grouped with Display (Regular, 400) rather than H2–H4 (Medium, 500). Confirmed by Johannes, 18 September 2026.

Pairings in context

CSS variables

/* Curitt type scale — minor third (1.200), base 16px */
:root {
  /* ===== Typefaces ===== */
  --headline: 'General Sans', sans-serif;  /* display, h1–h4 */
  --body: 'Public Sans', sans-serif;      /* body-large, body, caption, caption-small, eyebrow/label */

  --text-caption-small: 0.6875rem;   /* 11px */
  --text-caption: 0.8125rem;         /* 13px */
  --text-body: 1rem;                 /* 16px */
  --text-body-large: 1.1875rem;      /* 19px */
  --text-h4: 1.4375rem;              /* 23px */
  --text-h3: 1.75rem;                /* 28px */
  --text-h2: 2.0625rem;              /* 33px */
  --text-h1: 2.5rem;                 /* 40px */
  --text-display-sm: 3rem;           /* 48px */
  --text-display: 3.625rem;          /* 58px */
  --text-display-lg: 3.875rem;       /* 62px — capped, deliberate exception to the 1.2 ratio */

  --leading-caption: 1.5;
  --leading-body: 1.6;
  --leading-body-large: 1.55;
  --leading-h4: 1.4;
  --leading-h3: 1.3;
  --leading-h2: 1.25;
  --leading-h1: 1.15;
  --leading-display-sm: 1.1;
  --leading-display: 1.05;
  --leading-display-lg: 1.0;

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-body: 0em;
  --tracking-label: 0.1em;

  /* ===== Weights ===== */
  --weight-display: 400;   /* Display-lg, Display, Display-sm, H1 */
  --weight-heading: 500;   /* H2, H3, H4 */
  --weight-body: 400;
  --weight-emphasis: 500;
  --weight-label: 600;    /* uppercase eyebrows */
}

Materials & Space

Crisp white ceiling and walls, warm clay zellige-style tile as a single accent surface, natural wood door frames and joinery, a single sculptural cut-out as a moment of surprise, deep green planting used generously, pale grey polished concrete floor.

Material palette

Photography & Imagery

Direction, subject matter, diversity, colour grading, what to avoid.

Iconography & Illustration

Style, line weight, usage in UI and print.

Icon system

Lucide. Outline style only, matches the "plain-spoken, not simplified" and "considered, not precious" principles directly — clean single-weight strokes, no unnecessary detail.

Full Lucide guide

Sizes

12px, 14px, 16px, 18px, 20px, 24px. Pick by context — 12/14 for dense UI and inline labels, 16 as the default for most interface icons, 18/20 for larger touch targets or standalone icon moments, 24 for the icon browser below and other large/standalone icon moments.

Browse all icons

Every Lucide icon, live. Search by name or keyword, sort by popularity or A–Z, and preview against light or dark. Click any icon to copy or download it.

Custom icons

Where Curitt needs something Lucide doesn't cover, custom icons should match Lucide's outline conventions — same stroke width logic, same corner radius approach, same visual weight — so a mixed set never reads as two different icon families.

In practice: build it in Figma on a 24×24 artboard, 2px stroke, round caps and joins, no fill (see the JSX example below for the one exception). Export as SVG, strip it down to just the inner shape elements — no <svg> wrapper, no fill/stroke attributes, those are applied globally — and add an entry to curitt-custom-icons.json alongside the brand book:

{
  "my-icon-name": {
    "s": "<path d=\"...\"/>",
    "t": ["search", "tags"]
  }
}

It'll appear in the browser above automatically, flagged with a Custom badge.

Filled icons — exception, not the rule

Lucide's stroke fills aren't officially supported, but work cleanly on select icons via fill + strokeWidth={0} (e.g. <Star fill="var(--accent-signature)" strokeWidth={0} />). Reserve filled icons for specific necessary cases — ratings, favourites/saved states — never as a general style choice. Outline stays the default everywhere else.

import { Star } from "lucide-react";

// Outline (default)
<Star size={16} strokeWidth={1.5} />

// Filled — exception case only (ratings, favourites)
<Star size={16} fill="var(--accent-signature)" strokeWidth={0} />

Data & Health Information Design

How results, risk, and biomarkers are visualised without alarming the reader or feeling clinical.

The core problem

Traffic-light red/amber/green is the default in most health software, but it works against everything in Section 02 — it's alarming, clinical, and designed for a doctor's dashboard, not a patient's reassurance.

Direction to explore

• Language-led rather than colour-led — "within range" / "worth a conversation" / "let's look at this together" rather than green/amber/red
• Where colour is used at all, pull from the Done palette — accent-green for reassurance, signal-attention (muted amber, never red) for anything needing a conversation
• Decide deliberately whether the same visual language should feel more patient-facing (warm, plain language) or more doctor-facing (precise, clinical) depending on which surface it's on

Digital Design System

Component logic, design tokens, the curitt.com (Framer) / app.curitt.com split, accessibility standards.

Curitt runs on two platforms with two different levels of guarantee. The app is code, so tokens can be enforced — an off-brand value simply won't compile. The marketing site is built visually in Framer, so tokens are encouraged through convenience — the easiest path is the on-brand one, but nothing physically blocks someone from picking an arbitrary colour on the canvas. Both aim at the same tokens; only the strength of the guarantee differs.

Spacing — the 4px grid

Every padding, margin, and gap value in the app or Framer site must be a multiple of 4px — no arbitrary values, no 13px "close enough" spacing. This is the same discipline as the colour and type systems: a fixed, named scale rather than eyeballed numbers.

The one exception: border and stroke widths (1px, 2px, 3px) sit outside the spacing grid entirely — hairline details genuinely need sub-4px precision and should use --stroke-hairline, --stroke-thin, or --stroke-medium directly, never treated as spacing.

:root {
  /* Spacing scale — strict 4px grid */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-s:   12px;
  --space-m:   16px;
  --space-l:   24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Hairline exception — NOT part of the spacing grid, borders/strokes only */
  --stroke-hairline: 1px;
  --stroke-thin: 2px;
  --stroke-medium: 3px;
}

App — app.curitt.com (React)

The Box primitive

Every layout element — what would normally be a raw <div> — goes through a single <Box> component. No other component or raw div is used for layout, spacing, or background anywhere in the app.

type SpaceToken = "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl";
type SurfaceToken = "base" | "card" | "sunken";
type TextToken = "primary" | "secondary" | "tertiary";
type RadiusToken = "none" | "s" | "m" | "full";
type BoxProps = {
  background?: SurfaceToken;
  padding?: SpaceToken;
  paddingX?: SpaceToken;
  paddingY?: SpaceToken;
  gap?: SpaceToken;
  radius?: RadiusToken;
  direction?: "row" | "column";
  as?: keyof JSX.IntrinsicElements; // default "div"
  children: React.ReactNode;
};
export function Box({
  background, padding, paddingX, paddingY, gap, radius,
  direction = "column", as: Tag = "div", children,
}: BoxProps) {
  return (
    <Tag
      className={cx(
        background && `bg-${background}`,
        padding && `p-${padding}`,
        paddingX && `px-${paddingX}`,
        paddingY && `py-${paddingY}`,
        gap && `gap-${gap}`,
        radius && `radius-${radius}`,
        `dir-${direction}`
      )}
    >
      {children}
    </Tag>
  );
}

Token reference table

Dark mode — light-dark(), no dark: variants

:root {
  --surface-base: light-dark(#FFFFFF, #141310);
  --surface-card: light-dark(#F5F3EF, #1E1C18);
  --text-primary: light-dark(#161512, #F7F5F0);
  color-scheme: light dark;
}

One definition per token, not a parallel dark: class system. Dark mode is a value, not a separate styling pass.

Enforcement — ESLint, not just documentation

A lint rule fails the build if anyone writes a raw colour, an arbitrary Tailwind utility, or a bare <div> for layout. See box-component-spec.md and .eslintrc-tokens-example.json in the project root for the starter spec and config — this is what makes the system watertight: the rule, not the reminder.

Marketing Website — curitt.com (Framer)

Shared Styles setup

Every token from Section 05 (Colour) should exist as a Framer Shared Style before anyone starts building pages — named to match the CSS tokens exactly, so there's no translation step between the brand book and what shows up in Framer's style picker.

Text styles (headline, body, caption) should be set up the same way once the headline typeface is finalised — named Display / H1, Body / Regular, Caption, etc., never left as ad hoc per-element formatting.

Code Components — the closer equivalent to real enforcement

For anything reused often — buttons, cards, section headers, the booking CTA — build these as Framer Code Components rather than canvas-assembled elements. A code component can have genuinely typed props, same principle as the app's Box:

type CurittButtonProps = {
  variant: "primary" | "secondary"; // not a free string
  size: "s" | "m" | "l";
};

This gives hard enforcement for that specific component, even though the surrounding page canvas remains best-effort.

What this doesn't solve

Someone can still open the canvas and pick an arbitrary hex from the colour wheel, or drag a padding value that doesn't match the spacing scale. There's no build step to catch this. The mitigation is process, not code: whoever's building pages uses the Shared Styles library and Code Components as the default path, and anything off-brand gets caught in review rather than at compile time.

Use this design system in AI tools

One Markdown file that turns any AI assistant into a Curitt designer. It opens with instructions telling the model this is Curitt's design system and to follow it, then carries the hard rules, every token as live CSS, the component CSS, and the full brand book. It's built from this page when you click, so it's always current. The filename and the file itself carry the version (e.g. curitt-design-system-v0.10.md), and the file tells the AI to check this brand book for a newer version before starting work, and to tell you if yours is out of date.

Download design system (.md)

Components

Mirrored from the "02 · Components" page of the Curitt Figma file. Figma is the source of truth: each component here binds to the same tokens Figma's variables do, so a value only ever changes in one place. Buttons first; inputs, badges, cards and navigation follow the same pattern.

Button

Four styles, two sizes, four states. Primary for the one action that matters on a screen, Secondary beside it, Ghost for low-emphasis actions, and White on photography or the green band. The Default column is live, so hover and press those; the other columns are pinned for reference.

The icon is always Lucide arrow-right at 16px, leading or trailing, with an 8px gap.

All styles are fully rounded pills. Keyboard focus shows a 2px focus-outline ring with a 2px offset.

<button class="btn btn--primary">Book a check-up</button>
<button class="btn btn--secondary">How it works</button>
<button class="btn btn--ghost btn--small">
  Learn more <svg class="icon"><use href="#icon-arrow-right"/></svg>
</button>

Button group

One to four buttons in a row, 12px apart, in descending emphasis: Primary, then Secondary, then Ghost.

Tabs

A segmented control for switching views inside a panel. The selected tab fills with accent-green. A tab can carry the clay highlight badge to mark a recommended option. The control below is live.

Calendar day & time slot

The two atoms of the booking date-and-time picker. Today gets a 1.5px accent-green ring; a selected day or slot fills in accent-green.

Tag

Short category or attribute labels. Outlined on light surfaces; Filled where the tag needs to stand out.

Badge

Status and emphasis labels. Label for neutral metadata, Highlight to flag a recommended option (e.g. "Most popular"), Overlay to sit on top of imagery, and the clay Highlight badge for a single standout marker.

Section label

The small uppercase eyebrow above a section heading. The padded-left variant indents 12px to align with content inside a card.

Star rating, avatar stack & social proof

Patient ratings and the social proof strip that pairs them with faces.

Trust signals

Registration and compliance marks: a single trust point for inline use, the 40px tile set, and the stacked trust icon with label.

Trust pointTrust strip point

BIG

ISO

NEN

GDPR

Complaints

BIG-geregistreerdDutch Medical RegisterTrust icon

Spacer & divider

Fixed vertical gaps and horizontal rules. Prefer layout gap tokens over spacer elements where the layout allows it.

Text input, textarea & select

Single-line, multi-line and dropdown fields share one shell: a 1px neutral-grey-400 border, text-secondary on hover or once filled, a 2px accent-green ring on focus and accent-signature-text on error. Every field here is a real input, so type into them.

Search & password

Search is a pill with a leading 14px search icon. Password adds a trailing 14px eye icon to reveal the value.

Checkbox & radio

Real checkboxes and radios, restyled. 20px, 1.5px neutral-grey-400 outline, filling accent-green when on. Click them.

Language option

A row in the language picker. The whole row toggles its checkbox; the selected language turns accent-green.

File upload

A dashed drop zone. Once a file is attached it turns solid accent-green on green-100.

Date input & form field

Date of birth is split into day, month and year boxes. A form field stacks label, hint, an error line when needed, and the input.

Elevation

Three shadows, each bound end to end to Figma variables (offset, blur, spread and colour). Available as --shadow-sm, --shadow-card and --shadow-lg.

Booking search bar

The primary booking entry point: service, city and date, then search. It comes in four layouts (desktop, tablet, mobile and a vertical desktop card), a two-step version without the date, and a version that swaps search for Book now and Call us. Opening a segment highlights it and drops the matching picker below.

Booking pickers

The drawers that open under the search bar. The service picker uses Curitt's service photography; the date picker composes the calendar day and time slot atoms.

Select service

Check-upsACTIVEBlood, heart, lungs + dedicated time with a doctor

---

Blood & Lab Tests55+ parameter blood panel

---

UltrasoundAbdominal, pelvic, or specific lumps and bumps

---

Weight Loss (GLP-1)Pre-prescription blood tests, prescription, monitoring

---

Service picker

Select city

Search cities...

Amsterdam Oud-ZuidAmsterdam CentrumRotterdamThe HagueUtrechtEindhoven

City picker

September 2026

MTWTFSS311234567891011121314151617181920212223242526272829301234

Available times · Amsterdam Oud-Zuid

09:0009:3010:3011:0011:3012:0012:3013:00

Date & time picker

Cards

Content cards for testimonials, stats, pricing, doctors, values and listings. Cards sit on surface-card with a 16px radius unless noted.

Reviewer nameRole or context

"Review text goes here with the patient's testimonial about their experience."

★★★★★03/2025

Testimonial

2,400+Patients served

---

48hrsResults turnaround

---

4.9★Average rating

Stats

EssentialBrief tier description text.

€479/yearor €46/month (12 months)

Get started

CompleteBrief tier description text.

€479/yearor €46/month (12 months)

Get startedMost popular

Pricing · standard and featured

Doctor nameSpecialisationTag 1Tag 2Tag 3

Doctor

Value titleTwo or three lines describing the value in plain language.

Value

MetaListing title goes hereOne or two lines of supporting detail for the listing.

Listing row

Location card, location list item & map pin

How clinics are presented: a large card for location pages, a compact list item beside the map, and the map pins themselves. Hover the default location card.

Location nameStreet Address, Postcode, CityDetailsBook here

Location card · default (hover it)

Location nameStreet Address, Postcode, CityDetailsBook here

Selected

Location nameStreet Address, Postcode, CityDetailsBook here

Hover

Location nameStreet Address, Postcode, CityI'm interested

New location

UtrechtUtrecht, SmakkelaarshoekSmakkelaarshoek 5, 3511 EC UtrechtDirectionsBook here

List item · open

Rotterdam/The HagueRotterdam/The HagueOpening soon.I'm interested

List item · opening soon

AmsterdamDefault

AmsterdamSelected

Rotterdam · Opening soonOpening soon

Service item

A service row for listing pages: image left on desktop, stacked on tablet and mobile.

Navigation

The site navbar, desktop and mobile, with its links, language picker and menu toggle.

Section header & hero content

The two heading blocks that open a page section. Both align left, centre or right; the hero also has a spaced layout with the call to action pushed to the right. Sizes step down at tablet and mobile.

Feedback & utility

Small pieces used across the site and app: breadcrumb, tooltip, inline notifications, the cookie banner and the "AI summary" prompt.

Discovery & content

Pieces from the services and results pages: FAQ, legal clause, panel tabs, filter chips, the biomarker search and row, the contact prompt, next-available slot chips and the service nav.

Service page

Building blocks of a service page: spec items, the who-it's-for list, what's included, and the example results report.

City request modal

Captures interest in a city without a clinic yet: a short form, then a confirmation. The form is live.

Service nav (mini)

A slim, sticky service switcher for service pages, with a blurred background in Figma.

Logo strip

A "trusted by" strip of company logos. Shown here as a layout only.

Library-wide notes

Patterns that repeat across the Figma library, worth fixing once at the source rather than component by component.

Optional: Section Hero

A full-bleed image banner (.section-hero) available at the top of any section — dark gradient overlay, Curitt logomark and wordmark reversed in white, centred. Currently live on Section 01 (Introduction) as a placeholder gradient, pending real photography from the Section 08 shoot.

Use sparingly — Introduction and maybe one or two flagship sections at most, never on every section. The point is a considered moment, not a decorative pattern repeated down the sidebar.

<div class="section-hero" style="background-image: url('PHOTO_URL_HERE');">
  <div class="section-hero-overlay">
    <svg class="hero-mark"><!-- Open C logomark, white --></svg>
    <div class="hero-wordmark">CURITT</div>
  </div>
</div>

/* Full-bleed: breaks out of .content's horizontal padding (48px,
   exactly --space-2xl) rather than sitting inside it like body text.
   Match the negative margin to whatever .content's padding is. */
.section-hero {
  width: calc(100% + var(--space-2xl) * 2);
  margin-left: calc(var(--space-2xl) * -1);
  margin-right: calc(var(--space-2xl) * -1);
  height: 60vh;
  min-height: 400px;
  background-size: cover;
  background-position: center;
  position: relative;
  margin-bottom: var(--space-4xl);
}
.section-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,21,18,0.15) 0%, rgba(22,21,18,0.55) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-m);
}
.hero-wordmark {
  font-family: var(--headline); font-weight: 500;
  font-size: var(--text-h1); letter-spacing: 0.16em; color: #FFFFFF;
}

Clinic & Spatial Design — The Lookbook

What's fixed versus flexible per location, and the spatial and material brief for new clinics as Curitt expands.

Print & Collateral

Business cards, letterheads, patient reports, giveaways, signage.

Advertising & Campaign Guidelines

Digital ads, billboards, social templates, KOAG/KAG compliance notes.

Governance

Ownership, how the system evolves, who approves exceptions.