Exitable

Overview

Exitable is a digital agency and strategic partner for impact-driven organizations across the Netherlands, delivering sustainable digital solutions, web design, development, and creative strategy. The design system embodies 'Purposeful Minimalism'—a deliberate aesthetic movement that strips away ornament in favor of clarity, accessibility, and human-centered interaction. The visual language prioritizes legibility and functional beauty: a warm, neutral canvas (#f5f2ef) anchors the interface, while a deep navy primary (#0a366a) serves as the decisive accent for calls-to-action and interactive elements. Supporting colors—a sophisticated teal secondary (#3a727f) and a vibrant orange tertiary (#ff631c)—provide semantic meaning and visual rhythm without overwhelming the composition.

The brand voice is direct, optimistic, and grounded in pragmatism. Exitable speaks to decision-makers and creative teams with clarity and conviction, avoiding jargon while maintaining sophistication. The tone is conversational yet authoritative, warm yet professional. Example sentence in brand voice: 'We don't just build websites—we craft digital experiences that turn your vision into measurable impact.'

Colors

The color system is rooted in a 'Neutral-Anchored Accent' philosophy: a warm, off-white surface (#f5f2ef) provides visual rest and accessibility, while a restricted palette of three semantic accent colors drives interaction and hierarchy. Primary (#0a366a, a deep navy) is reserved exclusively for primary CTAs, active states, and brand-critical interactive elements—it commands attention without aggression. The primary container (#d8e3f0, a soft blue-gray) provides a lighter context for secondary actions and hover states, maintaining visual continuity at 0.2 opacity shifts. Secondary (#3a727f, a muted teal) supports data visualization, status indicators, and secondary navigation, offering enough contrast (4.8:1 against surface) for WCAG AA compliance. Tertiary (#ff631c, a warm orange) is dep

Typography

The typography system uses TTHovesPro exclusively, a geometric sans-serif with humanist proportions that balances technical precision with approachability. The type hierarchy is built on a 1.4x scale: display (60px, 700 weight) anchors hero sections and major announcements; headline-lg (40px, 600 weight) introduces page sections; headline-md (28px, 600 weight) breaks content into digestible chunks; title-lg (20px, 600 weight) labels subsections and card headers; body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry primary and secondary content respectively, with 1.5x line-height (28px and 24px) ensuring comfortable reading at all sizes; label-md (14px, 600 weight) and label-sm (12px, 500 weight) handle UI labels, buttons, and metadata. Letter-spacing is tightened on display size

Layout

The layout system uses a 12-column fluid grid with a fixed max-width of 1280px (container-xxl), centered with symmetric margins. Page rhythm is established through a consistent spacing scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for gutter spacing and card padding, lg (40px) for section separation, and xl (64px) for major layout breaks. Container max-widths are 960px (narrow) and 1140px (wide) for content-focused sections, with full-width hero sections anchoring the top of pages. White-space is treated as a first-class design element: minimum 40px (lg spacing) separates major sections; minimum 24px (md spacing) separates cards and components within sections. The gutter (24px) is applied consistently to left/right margins on all breakpoints above mobil

Elevation & Depth

Elevation is conveyed through a restrained shadow system and subtle background shifts rather than aggressive depth cues. Level 1 (Base): the surface (#f5f2ef) provides the foundation with no shadow. Level 2 (Standard Cards): box-shadow: 0 1px 2px rgba(0,0,0,0.06) creates a hairline separation; cards use 1px solid border at {colors.surface-variant} (#e6e0da) for definition. Level 3 (Elevated/Modals): box-shadow: 0 4px 12px rgba(0,0,0,0.08) with 1px border at {colors.outline-variant} (#b0c7cc) signals modal prominence. Level 4 (Floating/Sticky): box-shadow: 0 8px 32px rgba(0,0,0,0.12) for naviga

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften the geometric precision of the grid without introducing organic or playful forms. Border-radius follows a deliberate scale: sm (0.25rem / 4px) for small UI elements like badges and toggles; DEFAULT (0.375rem / 6px) for buttons, inputs, and standard cards—this is the workhorse radius, appearing in 60% of components; md (0.5rem / 8px) for list items and secondary containers; lg (1rem / 16px) for primary cards and modals; xl (1.5rem / 24px) for hero sections and full-width containers; full (9999px) for pills

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: primary (navy background, white text, 48px height, 12px vertical / 24px horizontal padding), secondary (light blue background, navy text), and ghost (transparent background, navy text, visible on hover). All buttons use label-md typography (14px, 600 weight) and DEFAULT border-radius (6px). Primary buttons use a 0.2s ease transition on all properties; hover state darkens the background to #072447 and maintains white text. Focus state adds a 3px solid outline at rgba(4,23,45,0.5) with 2px outlineOffset. Secondary buttons transition from primary-container (#d8e3f0) to a slightly darker shade (#cfe0f0) on hover. Ghost buttons show a subtle background fill (#e6e0da) and outline border on hover. All bu

Do's and Don'ts

**Do**

• Do use primary (#0a366a) exclusively for primary CTAs, active navigation states, and focus indicators—it is the brand's decisive accent and should never be diluted or overused.
• Do maintain minimum 24px (md spacing) between major sections and 12px (sm spacing) between components to preserve visual breathing room and reduce cognitive load.
• Do apply consistent border-radius: DEFAULT (6px) for buttons and inputs, lg (16px) for cards, to maintain the Soft-Technical aesthetic across all components.
• Do use TTHovesPro at 600+ weight for all headings and 400 weight for body text to establish clear visual hierarchy and reduce eye strain.
• Do test all interactive elements with keyboard navigation and screen readers—focus states must use 3px solid outline at rgba(4,23,45,0.5) with 2px outlineOffset for WCAG 2.1 Level AAA compliance.

**Don't**

• Don't use primary (#0a366a) for body text, backgrounds, or non-interactive elements—it is reserved for CTAs and active states only.
• Don't introduce new accent colors outside the defined palette (primary, secondary, tertiary, error)—the system's strength lies in its restraint and semantic consistency.
• Don't apply border-radius greater than 24px (xl) or less than 4px (sm) outside the defined scale—this maintains the Soft-Technical aesthetic and prevents visual inconsistency.
• Don't use shadows greater than lg (0 8px 32px rgba(0,0,0,0.12)) for standard components—excessive depth undermines the clean, grounded aesthetic.
• Don't reduce line-height below 1.5x for body text or 1.2x for headings—this compromises readability and accessibility, especially for users with dyslexia or low vision.