Sint Maartenskliniek

Overview

Sint Maartenskliniek is a Dutch rehabilitation and movement-freedom clinic serving patients seeking to restore mobility and independence. The design system embodies 'Clinical Warmth'—a fusion of professional medical authority with human-centered accessibility. The aesthetic combines a neutral, calming beige foundation (rgb(236, 236, 235)) with a confident teal accent (rgb(0, 64, 64)) that signals trust and clinical expertise, complemented by warm orange accents (rgb(255, 136, 0)) for secondary actions and calls-to-action. The UI evokes a sense of professional care: clean, organized, and reassuring without sterility.

The brand voice is direct, compassionate, and action-oriented. Tone: matter-of-fact yet encouraging, using Dutch directness paired with genuine empathy. Vocabulary favors clarity over jargon; when medical terms appear, they're paired with accessible explanations. The brand speaks to patients as capable partners in their recovery journey, never patronizing. Example sentence in brand voice: 'Uw bewegingsvrijheid staat centraal—wij helpen u daar stap voor stap.'

Colors

The color system is built on clinical trust and human warmth. Primary (#004040, a deep teal) anchors all interactive elements—buttons, links, focus states—and represents the clinic's core identity: reliable, professional, grounded. Secondary (#ff8800, a warm orange) energizes CTAs and highlights, creating visual momentum without aggression. Tertiary (#ff5200, a brighter orange-red) marks urgent or attention-demanding elements like alerts and confirmations. The surface stack uses a warm beige (#ecece3) as the dominant background, creating a non-clinical, approachable canvas. On-surface text (#272525, near-black) maintains high contrast (WCAG AAA) for accessibility. Outline and outline-variant tokens (#7a7770 and #ccc9c0) provide subtle visual separation for borders and dividers. Error state

Typography

The type system uses ff-strada-web-pro (a humanist sans-serif) paired with Trebuchet MS as fallback, creating a warm, approachable voice that softens clinical formality. Display (64px, 700 weight, -0.02em tracking) anchors hero sections and major headings with authority and breathing room. Headline-lg (48px, 700) and headline-md (32px, 700) create a clear visual hierarchy for section titles and card headers, with negative letter-spacing (-0.015em to -0.01em) tightening the letterforms for visual impact. Body-lg (21px, 400, 0.01em tracking) matches the rendered DOM and serves as the primary reading size—generous and accessible. Body-md (18px, 400) handles secondary content and form labels. Label-md (16px, 600) and label-sm (14px, 500) provide hierarchy for buttons, badges, and UI labels wit

Layout

The layout system uses a 12-column grid with a max-width of 1250px, centered on the viewport. Spacing follows an 8px unit scale: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section padding, lg (40px) for major section separation, and xl (64px) for hero/footer spacing. The gutter is 24px, applied symmetrically to container sides. White-space is generous: section margins use lg spacing (40px) to create visual breathing room between content blocks. Cards and containers use md padding (24px) internally, with sm (12px) for compact form fields. The container-max-width of 1250px prevents text lines from exceeding ~80 characters at body-lg size, supporting cognitive load and readability. Responsive breakpoints follow Bootstrap conventions (576px, 768px, 992

Elevation & Depth

Depth is conveyed through subtle shadows and layering, avoiding harsh drop-shadows that would feel clinical or cold. Level 1 (Base): the warm beige surface (#ecece3) with no shadow, establishing the calm foundation. Level 2 (Cards & Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with 1px solid border in outline-variant (#ccc9c0), creating a soft lift and definition. Level 3 (Modals & Elevated Surfaces): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with the same border treatment, signaling prominence without aggression. Hover states transition shadows smoothly (200ms ease-in-out) from Lev

Shapes

The shape philosophy is 'Soft Professionalism'—rounded corners that feel human and approachable without sacrificing clarity or clinical credibility. Buttons use lg radius (1rem / 16px), creating a friendly, inviting appearance that encourages interaction. Cards and containers use lg (16px) for consistency, softening the rectangular form. Input fields use DEFAULT radius (0.5rem / 8px), a subtle roundness that signals interactivity without distraction. Modals and elevated surfaces use xl radius (1.5rem / 24px), emphasizing their prominence and creating a sense of containment. Badges and pills us

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses primary color (#004040) with white text, lg radius (16px), and 12px 24px padding, creating a 48px tall target. On hover (200ms transition), the background shifts to primary-container (#51a0a0), a lighter teal that maintains contrast while signaling interactivity. Button-secondary uses a transparent background with a 2px primary border and primary text, inverting on hover to primary background with white text. Button-accent uses secondary color (#ff8800) for high-priority CTAs like 'Contact en locaties', with the same 48px height and lg radius. All buttons use label-md typography (16px, 600 weight) with 0.02em letter-spacing for clarity. Disabled buttons reduce opacity to 0.6 and remove pointer-events.

###

Do's and Don'ts

**Do**

• Do use primary (#004040) for all primary CTAs, focus states, and interactive elements—it's the brand's signature trust signal.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and containers; it's subtle enough to feel approachable, not clinical.
• Do maintain 48px minimum height for all buttons and interactive targets to meet accessibility and touch-friendly standards.
• Do use body-lg (21px) as the default reading size; it matches the rendered DOM and ensures accessibility for aging patients.
• Do transition all interactive states over 200ms (ease-in-out) to create a smooth, responsive feel that builds confidence.
• Do pair primary (#004040) with secondary (#ff8800) for visual contrast in CTAs; the warm orange energizes without overwhelming.
• Do use the full rounded scale intentionally: lg for buttons/cards, DEFAULT for inputs, full for badges—hierarchy through shape.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background; the warm beige (#ecece3) and near-black (#272525) are the brand's foundation.
• Don't apply harsh shadows (box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3)); stick to md/lg elevation values to maintain the calm, approachable aesthetic.
• Don't mix tertiary (#ff5200) with secondary (#ff8800) in the same UI section; they're too similar and create visual confusion.
• Don't reduce button height below 48px or padding below 12px 24px; accessibility and touch-friendliness are non-negotiable.
• Don't use system fonts (system-ui, -apple-system); always specify ff-strada-web-pro with Trebuchet MS fallback to maintain brand voice.
• Don't apply letter-spacing tighter than -0.02em on display text; it reduces legibility and feels aggressive.
• Don't skip focus states or use outline: none; all interactive elements must have a 3px inset box-shadow (0 0 0 3px rgba(0, 64, 64, 0.1)) for keyboard navigation.