BROEN Danmark

Overview

BROEN Danmark is a Danish nonprofit dedicated to providing active leisure activities for vulnerable children, fostering community, belonging, and personal growth. The design system embodies a "Warm Minimalism" aesthetic—combining bold, energetic accent colors with clean, approachable typography and generous whitespace. The visual language conveys optimism and accessibility: the signature coral-red primary (#ff675b) appears on all call-to-action elements and key interactive moments, while a neutral gray secondary (#646464) provides grounding and hierarchy. The UI evokes a sense of inclusion and joy, never clinical or distant.

The brand voice is direct, encouraging, and human-centered. BROEN speaks in clear, action-oriented Danish, avoiding jargon and corporate formality. Sentences are short and purposeful, with an emphasis on what children and families can *do* together. Example: "Bliv del af BROEN-fællesskabet og giv dit barn en aktiv fritid fuld af eventyr." (Join the BROEN community and give your child an active leisure life full of adventure.) The tone balances warmth with professionalism, reflecting both the nonprofit's mission and its operational credibility.

Colors

The color system is built on a high-contrast, accessible foundation. **Primary (#ff675b)** is the brand's signature coral-red accent, used exclusively on primary call-to-action buttons ("Støt BROEN Horsens"), active navigation states, and focus indicators. It commands attention without aggression, evoking warmth and energy. **Secondary (#646464)** is a neutral gray that anchors the navigation bar and secondary UI elements, providing visual rest and hierarchy. **Tertiary (#b94a48)** is a deeper red-brown reserved for error states, required field indicators, and warning badges—distinct from primary to avoid confusion. **Surface stack** ranges from pure white (#ffffff) for the main canvas through carefully calibrated grays (#f7f7f7 → #e5e5e5 → #c8d8d6) for layered containers and cards, enabli

Typography

The type system uses Raleway, a geometric sans-serif that conveys modern approachability while maintaining excellent legibility at all sizes. **Display (60px, 700 weight)** anchors hero sections and major page titles with -0.04em letter-spacing to create visual impact. **Headline-lg (42px, 600 weight)** is used for page section headings ("Om BROEN Horsens", "Sådan arbejder vi") with -0.02em tracking. **Body-md (16px, 400 weight)** is the workhorse for paragraph text, set at 24px line-height for comfortable reading on screens and print. **Label-md (14px, 600 weight)** is applied to button text, form labels, and small UI copy; use 0.01em letter-spacing to add subtle emphasis. For small labels over busy backgrounds (e.g., badge text on colored surfaces), apply text-shadow: 0 1px 2px rgba(0, 0

Layout

The page layout follows a 12-column grid system with a max-width of 1249px, centered on the viewport. Use **lg spacing (40px)** for section separation (gap between "Om BROEN Horsens" and "Sådan arbejder vi" sections), **md spacing (24px)** for component padding and internal card spacing, and **sm spacing (12px)** for tight groupings within forms or lists. The hero section spans full-width with a light gray background (#c8d8d6) and a centered headline; the primary CTA button ("Støt BROEN Horsens") is positioned 24px below the headline. Container max-width is 1249px; apply this constraint to text-heavy sections to maintain readability (optimal line-length ~65–75 characters). Whitespace is generous: maintain at least 40px vertical gap between major sections and 24px horizontal gutter on mobil

Elevation & Depth

Depth is achieved through subtle shadows and layering, not through color darkening. **Level 1 (Base)**: The main surface is pure white (#ffffff) with no shadow. **Level 2 (Cards & Containers)**: Apply box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3) to cards, modals, and lifted containers; this creates a soft, readable depth without heaviness. **Level 3 (Hover/Active)**: On hover, increase shadow to box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2) and optionally shift the background to surface-container-high (#ddd) to signal interactivity. Modals and overlays use a semi-transparent backdrop (rgba(0, 0, 0, 0.

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are used selectively to balance approachability with clarity. **Buttons** use a full pill shape (border-radius: 50px) for primary CTAs, signaling action and warmth; secondary buttons use 4px (DEFAULT) for a more neutral, contained feel. **Cards and containers** use 4px (DEFAULT) or 8px (md) for subtle rounding that feels modern without being playful. **Input fields** use 2px (sm) for a crisp, form-like appearance that suggests precision and data entry. **Navigation and modals** use 10px (lg) or 30px (xl) for a slightly softer, more in

Components

Action Elements **Button-primary** (primary CTA): backgroundColor: {colors.primary} (#ff675b), textColor: {colors.on-primary} (#ffffff), rounded: {rounded.full} (50px), padding: 12px 40px, height: 48px, fontWeight: 600, fontSize: 15px. Apply a 200ms ease-out transition on backgroundColor and box-shadow. On hover, shift to {colors.primary-container} (#ff4b3c) and add box-shadow: 0 4px 12px rgba(255, 103, 91, 0.3). On focus (keyboard), add a 3px outline at rgba(255, 103, 91, 0.5). On active/pressed, reduce height by 2px and shift shadow inward (0 2px 4px rgba(0, 0, 0, 0.2)).

**Button-secondary** (secondary action): backgroundColor: {colors.surface-container-low} (#eeeeee), textColor: {colors.on-surface-variant} (#555555), rounded: {rounded.DEFAULT} (4px), padding: 10px 10px, height: 40p

Do's and Don'ts

**Do**

• Do use primary (#ff675b) exclusively on primary CTAs, active states, and focus indicators—never on backgrounds or secondary elements.
• Do maintain at least 40px vertical spacing between major sections and 24px gutter on mobile to ensure readability and visual breathing room.
• Do apply a 3px focus ring at rgba(255, 103, 91, 0.1) to all interactive elements when focused via keyboard for WCAG AA compliance.
• Do use Raleway (fontFamily: Raleway, sans-serif) for all typography—headings, body, labels—to maintain brand consistency.
• Do apply box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3) to cards and containers for subtle depth without visual heaviness.
• Do use pill-shaped buttons (border-radius: 50px) for primary actions and 4px radius for secondary buttons to signal interaction hierarchy.

**Don't**

• Don't mix primary (#ff675b) and secondary (#646464) in the same component; instead, pair primary with surface-container for contrast.
• Don't use shadows with opacity > 0.3 on light surfaces; keep shadows soft (0.2–0.3 opacity) to maintain warmth and approachability.
• Don't apply text-shadow to body copy; use it only on small labels over busy backgrounds (0 1px 2px rgba(0, 0, 0, 0.15)).
• Don't mix border-radius values within a single component; if a button is 50px, all its states remain 50px.
• Don't use system fonts (system-ui, -apple-system, sans-serif) for body or heading copy; always declare fontFamily: Raleway, sans-serif.
• Don't exceed 1249px container max-width on desktop; maintain optimal line-length (65–75 characters) for readability.