21st Europe

Overview

21st Europe is a civic engagement and policy platform that presents transformative blueprints for European governance and society. The design embodies a philosophy of "Architectural Clarity"—a minimalist, light-forward aesthetic that prioritizes legibility, institutional trust, and intellectual rigor. The interface uses a refined cream-white palette (#f7f7f4) as the dominant surface, paired with a vibrant cobalt blue accent (#0099ff) that signals actionable moments and calls-to-action. The emotional response is one of calm authority: the user feels they are engaging with serious, well-considered ideas presented without unnecessary ornamentation. The brand voice is measured, policy-focused, and European in sensibility—avoiding hyperbole and favoring precision. Example sentence in brand voice: "Our research identifies three structural reforms necessary for fiscal resilience across the eurozone by 2030."

Colors

The color system is built on a light, neutral foundation with a single, decisive accent. Primary (#0099ff) is the signature brand color, deployed on all interactive elements—buttons, links, focus states, and key data highlights. It conveys forward momentum and digital confidence without aggression. On-primary (#ffffff) ensures maximum contrast for accessibility (WCAG AAA). The surface stack progresses from surface-bright (#ffffff) for elevated cards, through surface (#f7f7f4) as the page background, to surface-dim (#e9ecef) for subtle container differentiation. Secondary (#505050) and tertiary (#343434) are reserved for hierarchical text and structural elements; they are never used for interactive states. Error (#d32f2f) is deployed sparingly for validation and warnings. The outline token

Typography

The type system pairs Switzer (a geometric, contemporary sans-serif) for headlines and display text with Inter (a humanist sans-serif) for body and label text. This pairing creates visual hierarchy through personality rather than weight alone: Switzer's geometric precision conveys institutional authority, while Inter's warmth ensures body text remains approachable. Display (60px, 700 weight, -0.02em letter-spacing) is reserved for hero statements; headline-lg (40px, 700 weight) anchors major sections; headline-md (28px, 700 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and feature callouts, while body-md (16px, 400 weight, 24px line-height) is the standard reading size. Label-md (14px, 600 weight, 0.01em letter-spacing) is

Layout

The layout follows a 12-column grid system with a max-width of 1199px, centered on the viewport. The page background is surface (#f7f7f4), a warm off-white that reduces eye strain while maintaining institutional formality. Sections are separated using lg spacing (40px) vertically, creating a rhythm that feels deliberate and spacious without excess. The gutter (24px) is applied consistently to left/right margins on desktop, reducing to sm (12px) on tablet and xs (4px) on mobile. Container elements (cards, input fields, nav bars) use md spacing (24px) for internal padding, creating a consistent breathing room. The hero section occupies full viewport height with a background image overlay, using inverse-surface (#222222) at 40% opacity to ensure text legibility. All interactive elements maint

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids drama in favor of clarity. The base layer (Level 1) is the page background at surface (#f7f7f4) with no shadow. Standard cards (Level 2) use elevation.md: a compound shadow of rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 1px 0px 0px, and rgba(255, 255, 255, 0.15) 0px 0px 0px 1px—the inner white border creates a subtle inset effect that reinforces the card's containment. Elevated states (Level 3, such as hover or modal overlays) use elevation.lg: 0 3px 8px rgba(0, 0, 0, 0.15), a slightly larger blur radius that crea

Shapes

The shape philosophy is termed "Geometric Restraint"—rounded corners are used sparingly and consistently to signal interaction without compromising the architectural precision of the layout. Buttons and form inputs use rounded.md (0.75rem / 12px), a subtle curve that softens the form while maintaining geometric clarity. Cards and larger containers use rounded.lg (1rem / 16px), creating a slightly more approachable appearance for content blocks. Navigation items and badges use rounded.DEFAULT (0.5rem / 8px) for a tighter, more technical feel. The full radius (9999px) is reserved exclusively for

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses backgroundColor: {colors.primary} (#0099ff), textColor: {colors.on-primary} (#ffffff), rounded: {rounded.md} (12px), and padding: 12px 24px with a 44px height to meet accessibility touch targets. The button-primary-hover state shifts backgroundColor to #0077cc (a 20% darker blue) with a 200ms ease-out transition, providing clear feedback without animation lag. button-secondary uses a transparent background with a 1px border at {colors.outline} (#c2c2c2) and textColor: {colors.primary}, allowing secondary actions to coexist without visual dominance. On hover, button-secondary-hover applies backgroundColor: {colors.surface-container-high} (#efefec), creating a subtle fill that indicates interactivity.

Do's and Don'ts

**Do**

• Do use primary (#0099ff) exclusively for interactive elements—buttons, links, focus states, and data highlights—to create a consistent visual language for user actions.
• Do maintain the 44px minimum height for all clickable elements (buttons, nav items, input fields) to ensure accessibility and mobile usability.
• Do apply lg spacing (40px) between major sections to create visual breathing room and signal hierarchy without relying on color alone.
• Do use Switzer for all headlines and display text to reinforce institutional authority; reserve Inter for body and label text to maintain warmth and readability.
• Do apply the compound shadow system (elevation.md for cards, elevation.lg for hover states) to create subtle depth without theatrical effects.
• Do include a 1px border at outline-variant on all cards and containers to reinforce the architectural grid structure and prevent visual flatness.

**Don't**

• Don't use primary (#0099ff) for body text, backgrounds, or non-interactive elements—it is reserved exclusively for calls-to-action and interactive states.
• Don't apply rounded corners larger than rounded.lg (16px) to cards or containers; excessive rounding undermines the geometric precision of the design.
• Don't use secondary (#505050) or tertiary (#343434) for interactive elements; these colors are reserved for structural text and hierarchy.
• Don't apply multiple shadows or combine elevation levels on a single element; stick to the defined elevation scale (sm, md, lg) to maintain visual consistency.
• Don't reduce padding below {spacing.sm} (12px) on interactive elements or below {spacing.md} (24px) on card interiors; white-space is a design material.
• Don't use color alone to convey information; always pair color with text labels, icons, or other visual indicators to ensure accessibility for color-blind users.