Bowlingklubben Skive af 1993

Overview

Bowlingklubben Skive af 1993 is a Danish sports club website that embodies Institutional Minimalism—a design philosophy that prioritizes clarity, accessibility, and community trust over visual flourish. The site serves members and prospective bowlers, presenting club information with the quiet confidence of an established organization. The aesthetic is deliberately understated: a muted blue-gray header (#8e9faf) anchors the page, while crisp white surfaces and steel-blue accents (#0073b1) guide interaction. The visual language evokes a sense of stability and belonging—the kind of place where traditions matter and newcomers are welcomed. Voice: direct, informative, and genuinely hospitable. The tone avoids marketing speak; instead, it speaks in the language of schedules, membership tiers, and shared passion. Example sentence: 'I klubben er vi ca. 200 medlemmer fordelt på: Folke- og fortidspensionister. Træner mandage og onsdage i dagtimerne.'

Colors

The color system is anchored by a steel-blue primary (#0073b1), used exclusively for interactive elements—buttons, links, and focus states. This blue is neither corporate nor playful; it reads as trustworthy and institutional. The secondary color, a muted blue-gray (#8e9faf), dominates the header and navigation, creating a calm, authoritative frame. Supporting surfaces use a carefully calibrated white-to-gray scale: surface (#ffffff) for content areas, surface-container-low (#f3f6f8) for subtle backgrounds, and surface-container-highest (#cdcfd2) for borders and dividers. The tertiary color (#454a5d) provides a darker accent for emphasis when needed. Error states use a deep red (#b10823) with a pale background (#fef2f1) for warnings. All interactive states follow a strict hierarchy: primar

Typography

The type system pairs Scope One (a geometric, slightly formal serif) for headlines with Roboto for body text, creating a hierarchy that balances authority with readability. Display (56px, 400 weight, -0.02em tracking) is reserved for the main site title, 'Bowlingklubben Skive af 1993,' setting a dignified tone. Headline-lg (40px) and headline-md (28px) use the same weight and tracking, scaling down for section headers. Body text (16px, 400 weight) is set in Roboto with 24px line-height, ensuring legibility on the light background. Labels and navigation use Roboto at 14px with 600 weight and 0.01em tracking, providing visual distinction for interactive elements. For small text over busy backgrounds or in dense lists, apply text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) to maintain contrast

Layout

The page uses a fixed 1140px container max-width, centered on desktop with 24px gutters on either side. The grid is 12 columns, with content typically spanning 8–10 columns to leave breathing room. The header spans full width with 15px horizontal padding and no vertical padding, allowing the navigation items to sit flush. Section spacing follows the lg token (40px) between major blocks, with md spacing (24px) between cards and list items. The hero section (title + navigation) occupies roughly 25% of the viewport, with the main content area below using a two-column layout: left column (body text, ~65% width) and right column (logo, social share, ~35% width). Whitespace is generous but not excessive—the design avoids the austere emptiness of ultra-minimalism, instead using space to create rh

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than dramatic layering. The base level (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, input fields) uses a 1px solid border in outline-variant (#c4c7c8) and a soft shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (modals, dropdowns, hover states) elevates to box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with the same border treatment. The header uses no shadow, relying instead on its solid background color (#8e9faf) to define separation. Hover states on cards transition the shadow from md to

Shapes

The design philosophy is Soft Institutional—rounded corners are present but restrained, avoiding both hard edges and excessive softness. The default border-radius is 0.5rem (8px), applied to cards, input fields, and most interactive elements. Buttons use a tighter 0.25rem (4px) radius, maintaining a more formal, button-like appearance. The header and full-width sections use 0px radius, emphasizing their structural role. Modals and elevated surfaces use 1rem (16px) radius for a slightly more approachable feel. The logo container and badge elements use full (9999px) radius for pill-shaped treatm

Components

Action Elements Buttons are the primary interactive element. The button-primary component uses #0073b1 background with white text, 16px padding (horizontal) × 44px height, and 4px border-radius. On hover, the background darkens to #006097 (transition: background-color 150ms ease-in-out). On active/pressed, it darkens further to #004b7c. The button-secondary variant uses a transparent background with a 1px inset border (rgba(0, 0, 0, 0.3)) and primary text color, creating an outlined appearance. On hover, the background fills with surface-container-high (#e9ecef). Both variants use label-md typography (14px, 600 weight).

Navigation & Headers The header-nav component spans full width with background #8e9faf and white text. Navigation items (header-nav-item) use body-md typography (1

Do's and Don'ts

**Do**

• Do use the primary blue (#0073b1) exclusively for interactive elements—buttons, links, and focus states—to maintain a clear visual hierarchy.
• Do maintain generous whitespace (lg spacing, 40px) between major sections to create rhythm and guide the eye through content.
• Do apply the soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and elevated surfaces to create subtle depth without visual clutter.
• Do use Scope One for all headlines and Roboto for body text to maintain the institutional-yet-approachable tone.
• Do keep border-radius conservative (8px for cards, 4px for buttons) to reinforce the formal, trustworthy character.
• Do transition interactive states over 150–200ms (e.g., background-color 150ms ease-in-out) to provide smooth, predictable feedback.

**Don't**

• Don't use the primary blue for backgrounds or large surface areas—it's reserved for interactive elements only.
• Don't apply shadows darker than 0.15 opacity or larger than 24px blur; the aesthetic is subtle, not dramatic.
• Don't mix serif and sans-serif fonts within a single text block; maintain the Scope One / Roboto pairing consistently.
• Don't use border-radius greater than 1.5rem (24px) or less than 4px; the design avoids both extreme softness and hard edges.
• Don't override the outline-variant color (#c4c7c8) for borders; it provides consistent visual separation across all components.
• Don't animate transitions faster than 150ms or slower than 300ms; the brand values responsiveness without feeling jarring.