Der Pragmaticus

Overview

Der Pragmaticus is an Austrian political commentary platform that champions pragmatic, uncompromising analysis of policy and governance. The design aesthetic is rooted in classical editorial tradition—think 19th-century broadsheet newspapers meets contemporary digital clarity. The brand personality is authoritative yet accessible: direct, intellectually rigorous, and unafraid of sharp critique. The visual language employs a monochromatic foundation (deep navy #112337 on warm cream #ddd9d6) punctuated by a bold editorial red (#cb2e21) that signals urgency and calls to action. This is "Architectural Pragmatism"—clean lines, no ornament, maximum legibility, and a single accent color that demands attention without distraction. The emotional response is one of intellectual confidence: the user feels they are reading serious analysis from a source that respects their intelligence. Voice example: "Österreich braucht keine Reparaturen—es braucht einen echten Neustart." (Austria needs no repairs—it needs a genuine restart.)

Colors

The color system reflects editorial restraint and political clarity. Primary (#cb2e21, a warm brick red) is reserved exclusively for call-to-action buttons, critical links, and interactive affordances—it is the color of urgency and editorial emphasis, appearing sparingly to guide user attention. Secondary (#112337, a deep navy-black) anchors the typographic hierarchy and forms the dominant text color, conveying authority and gravitas. The surface stack progresses from pure white (#ffffff) for primary content areas through warm beige (#ddd9d6) for secondary containers and light gray (#f5f5f5) for tertiary backgrounds, creating subtle visual depth without relying on shadows. Tertiary (#0693e3, a bright cyan) is used for supplementary interactive elements, data visualization, and secondary CT

Typography

The type system is built on IBM Plex Serif, a contemporary serif face that balances classical authority with modern clarity. Display sizes (60px, 400 weight, -0.02em letter-spacing) are reserved for hero headlines and major section breaks, commanding attention through scale rather than weight. Headline-lg (53px, 400 weight) is used for article titles and primary page headings, maintaining the same refined weight to avoid visual heaviness. Body text (19px, 300 weight, 28px line-height) is set at a generous size and light weight to ensure comfortable reading of long-form political analysis; the 300 weight creates an open, inviting texture that encourages sustained engagement. Labels and UI text (14px, 600 weight, 0.05em letter-spacing) use increased weight and spacing to create visual distin

Layout

The page grid is a 12-column fluid layout with a fixed max-width of 1200px, centered on the viewport. The gutter width is 20px, providing breathing room between columns without excessive whitespace. Section spacing follows a semantic rhythm: major sections are separated by 40px (lg spacing) vertically, creating clear visual breaks between topics; subsections use 24px (md spacing) for tighter grouping. The container max-width of 1200px ensures that long-form text remains within comfortable reading line-lengths (approximately 65–75 characters per line at body size). Hero sections span the full width with a warm beige background (#ddd9d6), creating a visual anchor that frames the page entry point. Content cards use 24px padding (md spacing) internally, with 12px (sm spacing) between card elem

Elevation & Depth

Depth in this system is achieved through subtle layering and restrained shadow use, avoiding the visual heaviness that would contradict the clean editorial aesthetic. Level 1 (Base): flat surfaces with no shadow, used for primary content areas and the main background. Level 2 (Cards & Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to card elements, input fields, and secondary containers; this creates a gentle lift without visual drama. Level 3 (Modals & Overlays): box-shadow: 0 6px 6px rgba(0, 0, 0, 0.25), reserved for cookie consent panels, modal dialogs, and floating UI elem

Shapes

The shape philosophy is "Architectural Minimalism"—sharp, rectilinear forms with minimal rounding, reflecting the pragmatic, no-nonsense brand personality. Border-radius values are deliberately small: buttons and inputs use 4px (DEFAULT), creating a subtle softness that prevents the interface from feeling harsh or cold. Cards use 5px (md), slightly more generous than buttons to create visual distinction between interactive and container elements. The full-radius (9999px) is reserved exclusively for badge elements and avatar containers, where circular forms are semantically appropriate. No elem

Components

Action Elements Buttons are the primary interactive affordance. The primary button (button-primary) uses the brand red (#cb2e21) background with white text, 16px vertical and 24px horizontal padding, and 4px border-radius. The label-md typography (14px, 600 weight, 0.05em letter-spacing) ensures text reads as actionable. On hover (button-primary-hover), the background shifts to the lighter primary-container (#fd6053) over 200ms, providing clear feedback without changing the text color. The active state (button-primary-active) uses primary-fixed-dim (#cb2e21), a darker variant that reinforces the pressed state. Secondary buttons (button-secondary) use a light gray background (#e8e8e8) with a 1px outline in outline-variant (#cccccc), maintaining visual hierarchy while offering an alterna

Do's and Don'ts

**Do**

• Do use the primary red (#cb2e21) exclusively for critical CTAs, primary buttons, and interactive affordances—never use it for decorative elements or backgrounds.
• Do maintain the warm beige (#ddd9d6) for hero sections and major visual breaks to create a paper-like, editorial aesthetic that reinforces the brand identity.
• Do apply generous whitespace (20px–40px) around text blocks and between sections to prevent cognitive overload and support the magazine-like reading experience.
• Do use IBM Plex Serif at 300–400 weight for body and headline text; avoid weights below 300 or above 600 to maintain the refined, authoritative tone.
• Do apply the focus ring (0 0 0 3px rgba(203, 46, 33, 0.1)) to all interactive elements for accessibility and clear keyboard navigation feedback.

**Don't**

• Don't use multiple accent colors or competing hues—the primary red (#cb2e21) and secondary navy (#112337) are sufficient; tertiary cyan (#0693e3) is reserved for data visualization only.
• Don't apply heavy shadows (blur > 8px or spread > 2px) that would soften the architectural precision of the design; keep shadows tight and purposeful.
• Don't use border-radius values greater than 12px on standard components; the minimal rounding is intentional and reflects the pragmatic brand personality.
• Don't set body text smaller than 16px or lighter than 300 weight; readability of long-form political analysis is non-negotiable.
• Don't introduce decorative elements, gradients, or animations that distract from content; every visual decision must serve the editorial mission of clarity and authority.