Dansk Skolebridge

Overview

Dansk Skolebridge is a youth-focused educational initiative promoting bridge as a strategic card game in Danish schools. The design system embraces a 'Vibrant Minimalism' aesthetic—combining energetic primary colors (deep rose #BE123C and golden yellow #FACC15) with clean, spacious layouts to create an approachable, community-driven experience. The brand personality is enthusiastic yet grounded: it speaks to young strategic thinkers and social players with clarity and optimism, never condescending. The visual language prioritizes bold typography (Outfit for headlines, Nunito for body) and generous white space to ensure content breathes and invites engagement.

The tone is direct, encouraging, and peer-to-peer. Voice examples: 'Bridge er det ultimative sted for strategiske tænkere og sociale spillere' (Bridge is the ultimate place for strategic thinkers and social players) and 'Udfordr dig selv, med nye mennesker, og bliv mester i spillets kunst' (Challenge yourself, meet new people, and master the art of the game). The brand avoids jargon and speaks in the language of youth culture—energetic, inclusive, and action-oriented.

Colors

The color system is built on three core pillars: Primary (Deep Rose #BE123C) for CTAs, navigation highlights, and brand moments; Secondary (Ocean Blue #0369A1) for supporting information and secondary actions; and Tertiary (Golden Yellow #FACC15) for accents, badges, and attention-grabbing elements. The primary rose is used exclusively on high-priority buttons ('FIND EN KLUB', 'SE EVENTS') and hover states, ensuring every interactive moment feels intentional. The tertiary yellow appears on hero badges ('DET ULTIMATIVE SOCIALE STRATEGISPIL') and accent underlines, creating visual rhythm without overwhelming. Surfaces are anchored in a clean white (#FFFFFF) with a shallow gray hierarchy: surface-container-lowest (#F1F5F9) for subtle backgrounds, surface-container-low (#F0F0F0) for card conta

Typography

The type system uses a three-family stack: Outfit (bold, geometric sans-serif) for all headlines and display text, Nunito (warm, rounded sans-serif) for body copy and descriptive text, and Inter (precise, technical sans-serif) for labels, buttons, and UI microcopy. Display text (60px, 700 weight, -0.04em letter-spacing) commands attention on hero sections; headline-lg (40px, 700 weight) anchors section titles; headline-md (28px, 700 weight) breaks up content zones. Body-lg (18px, Nunito, 400 weight, 28px line-height) ensures readability in descriptive paragraphs; body-md (16px, 400 weight, 24px line-height) is the default for standard content. Label-md (16px, Inter, 900 weight) is applied to all button text and navigation items, creating visual weight and scanability. Label-sm (12px, 700 w

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid design that adapts from mobile (single column) to tablet (6 columns) to desktop (12 columns). The gutter spacing is consistently 24px, creating breathing room between grid items. Section separation uses lg spacing (40px) for major content breaks and md spacing (24px) for subsection dividers. The hero section spans full-width with a two-column split: left column (60%) contains the headline and CTAs; right column (40%) showcases hero imagery with rounded corners (40px border-radius). Container padding follows a semantic scale: md (24px) for standard card padding, lg (40px) for section margins, and xl (64px) for top-level container margins. White space is intentional and generous—the design avoids cramping

Elevation & Depth

Depth is achieved through a layered shadow system rather than color darkening. Level 1 (Base/Surface) has no shadow—it is the foundation. Level 2 (Standard Card) uses box-shadow: 0px 10px 10px -4px rgba(0, 0, 0, 0.1), creating a subtle lift with a 10px blur and -4px spread. Level 3 (Elevated/Modal) uses box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), doubling the blur and spread for pronounced separation. Interactive elements (buttons, inputs) use no shadow by default but gain shadow on hover to signal interactivity. Cards maintain a 4px solid border in white (#FFFFFF) to define edges crisp

Shapes

The shape philosophy is 'Soft-Technical'—combining rounded corners with precise geometry to balance approachability with professionalism. Buttons use rounded.lg (16px / 1rem) for a friendly, pill-like appearance that invites interaction without feeling childish. Cards use rounded.xl (24px / 1.5rem) for a softer, more embracing container feel. Input fields use rounded.DEFAULT (8px / 0.5rem) for a neutral, functional appearance. Hero images and featured content use rounded.lg (16px) to match button styling and create visual cohesion. Badges and accent elements use rounded.full (9999px) for a ful

Components

Action Elements Buttons are the primary interactive component. button-primary uses {colors.primary} (#BE123C) with white text, 16px Inter 900 weight, 12px 24px padding, and 16px border-radius. On hover, the background transitions to #A00D2F (a 15% darkening) with a 0.3s ease transition. button-secondary uses {colors.inverse-surface} (#1E293B) for secondary actions like 'SE EVENTS', maintaining the same typography and padding. button-accent uses {colors.tertiary} (#FACC15) for attention-grabbing elements like hero badges, with dark text (#333333) for contrast. All buttons have height: 48px (matching Material 3 touch targets) and use cursor: pointer with no outline on focus (relying instead on a 3px inset box-shadow: inset 0 0 0 3px rgba(190, 18, 60, 0.3) for focus indication).

Cont

Do's and Don'ts

**Do**

• Do use {colors.primary} (#BE123C) exclusively for primary CTAs and high-priority interactive moments—never dilute it with secondary uses.
• Do apply lg spacing (40px) between major content sections to create visual breathing room and guide the user's eye through the page.
• Do use Outfit for all headlines and display text to maintain the bold, energetic brand voice; reserve Nunito for body copy and Inter for UI labels only.
• Do combine 4px white borders with soft shadows (0px 10px 10px -4px rgba(0, 0, 0, 0.1)) on cards to create depth without darkness.
• Do use rounded.lg (16px) for buttons and hero images to create visual cohesion and reinforce the soft-technical aesthetic.
• Do transition all interactive states over 0.3s ease to signal interactivity without jarring the user.

**Don't**

• Don't use {colors.primary} for body text, backgrounds, or non-interactive elements—it must remain reserved for CTAs and focus states.
• Don't apply shadows darker than rgba(0, 0, 0, 0.1) or blur radii greater than 25px; the design relies on subtle, refined depth, not dramatic darkness.
• Don't mix typefaces within a single heading or button—Outfit is for headlines, Nunito for body, Inter for labels; no exceptions.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii break the visual system.
• Don't apply color overlays or gradients to the white background; the design is intentionally clean and minimal.
• Don't use more than three colors in a single component; the system is built on primary, secondary, and tertiary—additional colors create visual noise.