The Dutch Grip

Overview

The Dutch Grip is a premium kickboxing gym brand that embodies 'Earthy Athleticism'—a design philosophy that merges the raw power of combat sports with the refined sophistication of natural, warm materials. The visual identity draws from earth tones (sage greens, warm beiges, deep charcoals) and architectural minimalism to create an environment that feels both intimidating and welcoming. The UI evokes discipline, strength, and community: every interaction reinforces the brand's promise of transformative training delivered with professionalism and care.

The brand voice is direct, motivational, and grounded. Language is action-oriented and honest—no hyperbole, no false promises. Example: 'Train mee op onze locatie in Harderwijk en ervaar de ultieme workout, terwijl je je kickboks vaardigheden verbetert.' The tone respects the user's time and intelligence, speaking to them as a serious athlete or fitness enthusiast, not a casual browser.

Colors

The color system is anchored in a warm, natural palette that reflects both the physicality of kickboxing and the approachability of a community gym. Primary (#E0CCB1) is a warm beige used exclusively on call-to-action buttons and key interactive elements—it commands attention without aggression, inviting users to 'Gratis proefles' or 'Lees verder.' Secondary (#4F533E) is a deep sage-green that dominates the header, hero section, and subscription cards, establishing authority and trust. Tertiary (#595D46) provides subtle depth for hover states and secondary containers.

The surface stack progresses from pure white (#FFFFFF) for the main canvas through warm grays (#F3F4F0, #DCDED3, #E9DBC8) for layered content, ensuring readability and visual hierarchy. On-surface text (#241B0F) is a near-bl

Typography

The type system is built on Montserrat, a geometric sans-serif that conveys modernity and precision—essential for a fitness brand. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines like 'Train Hard, Kickboks Beter!' and commands the full attention of the viewport. Headline-lg (46px, 700 weight) is used for section titles and major content blocks. Body copy (16–18px, 400 weight, 24–28px line-height) is set in warm beige (#E0CCB1) on dark backgrounds and charcoal (#241B0F) on light backgrounds, ensuring 7:1+ contrast ratios. Labels (12–14px, 600–700 weight, 0.01–0.05em tracking) are uppercase and used for navigation, buttons, and form fields to reinforce hierarchy and urgency. All text over busy backgrounds (e.g., hero copy over image) receives a subtle text-shadow:

Layout

The layout follows a 12-column fluid grid that collapses to single-column on mobile (breakpoints: 991px, 767px, 478px). Container max-width is 1280px, with a consistent gutter of 24px on desktop, 12px on tablet, and 4px on mobile. Section spacing uses the lg token (40px) for major breaks between hero, offerings, and footer; md (24px) for card groupings; and sm (12px) for internal component padding. The hero section uses a full-bleed background image with overlay gradient (linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(79,83,62,0.8) 100%)) and positions content at margin-top: 300px to create breathing room. Subscription cards are arranged in a responsive grid (3 columns on desktop, 1 on mobile) with consistent 24px gaps. The footer uses a 4-column grid on desktop that collapses to single-

Elevation & Depth

Depth is achieved through a restrained shadow system and strategic use of borders rather than heavy drop shadows. Level 1 (Base): flat surfaces with no shadow, relying on color contrast and 2px borders (e.g., subscription cards: border: 2px solid {colors.secondary}). Level 2 (Elevated Cards & Modals): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used on interactive elements like buttons and form inputs to signal clickability. Level 3 (Deep Elevation): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), reserved for modal overlays and hero backgrounds. Hover states on cards transition the border color fr

Shapes

The shape philosophy is 'Structured Warmth'—sharp enough to convey professionalism and discipline, rounded enough to feel approachable. Buttons use border-radius: 5px (0.3125rem), a subtle softness that avoids the clinical feel of 0px while rejecting the playfulness of full rounding. Subscription cards and major containers use border-radius: 8px (0.5rem), creating a balanced, modern aesthetic. Input fields and smaller UI elements use border-radius: 4px (0.25rem), maintaining visual consistency with the button treatment. The only full-radius element (border-radius: 9999px) is reserved for badge

Components

Action Elements Buttons are the primary driver of user engagement. The primary button (button-primary) uses background: {colors.primary} (#E0CCB1), text-color: white, padding: 8px 22px, height: 44px, border-radius: 5px, and border: 2px solid {colors.primary}. On hover (button-primary-hover), the background transitions to {colors.primary-fixed-dim} (#AEB299) with a 200ms ease-in-out transition, creating tactile feedback. The secondary button (button-secondary) inverts this: transparent background, white border and text, same padding and height. On hover, it gains a subtle background: rgba(255, 255, 255, 0.1) to signal interactivity without overwhelming the dark hero background. All buttons use typography.label-md (14px, 700 weight, uppercase) to command attention.

Containers & Surf

Do's and Don'ts

**Do**

• Do use the warm beige primary (#E0CCB1) exclusively on CTAs and key interactive moments—it's the brand's signature accent and must never be diluted or overused.
• Do maintain 2px solid borders on all cards, buttons, and major containers to reinforce the architectural, structured aesthetic—never rely on shadow alone for depth.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to body copy over busy backgrounds (hero images, dark overlays) to ensure 7:1+ contrast and readability.
• Do use the sage-green secondary (#4F533E) as the dominant background for headers, hero sections, and subscription cards—it establishes trust and authority.
• Do transition all hover states over 150–200ms with ease-in-out timing to create smooth, tactile feedback that respects the user's interaction.

**Don't**

• Don't use pure black (#000000) or pure white (#FFFFFF) for text—always use the warm-tinted on-surface (#241B0F) or inverse-on-surface (#F3F4F0) to maintain the earthy aesthetic.
• Don't apply heavy drop shadows (box-shadow > 0 8px 24px) to interactive elements like buttons or cards—use 2px borders and subtle shadows (0 3px 8px) instead to maintain the architectural style.
• Don't round corners beyond 8px on major containers or 5px on buttons—the brand is structured and disciplined, not playful or organic.
• Don't mix typefaces—Montserrat is the sole typographic voice across all scales and weights. Never introduce secondary fonts like Work Sans or Nunito in user-facing UI.
• Don't override the 2px border treatment on cards or buttons with outline or box-shadow alternatives—the border is the visual signature of the brand's architectural minimalism.