pöge druck

Overview

pöge druck is a Leipzig-based print house that communicates technical mastery and bold creativity through a design system rooted in "Chromatic Constructivism"—a modern aesthetic that combines vivid, saturated color-blocking with clean geometric forms and precision typography. The brand serves publishing partners, agencies, and businesses seeking offset and digital printing excellence, and the UI evokes confidence, craftsmanship, and reliability through high-contrast color fields and assertive sans-serif typography. The visual language prioritizes clarity and impact: large color zones (teal, gold, black) create immediate visual hierarchy, while the photography of print production (color swatches, press machinery) grounds the digital experience in tangible craft. Voice: direct, professional, and solution-focused. Example sentence: "Wir drucken in Leipzig—schnell, präzise, in jeder Auflage perfekt."

Colors

The color system is built on three primary brand accents that work in concert: Primary Teal (#00d4a8) is the signature accent used on CTAs, interactive elements, and key highlights—it signals action and the brand's forward-thinking approach. Secondary Gold (#ffd700) provides warmth and emphasis, deployed on hero headlines and decorative elements to evoke premium quality and the precision of color printing. Tertiary Orange (#ff6900) supports secondary messaging and accent states. The surface stack is anchored in clean whites (#ffffff, #fbfaf9) and warm grays (#e8e6e0, #eeeeee) to maintain legibility and reduce visual fatigue on content-heavy pages. On-surface text is pure black (#000000) for maximum contrast; on-surface-variant (#5a5a5a) is used for secondary copy and metadata. Error states

Typography

The type system is anchored in Poppins, a geometric sans-serif that conveys modernity and technical precision—essential for a print-focused brand. Display (60px, weight 900) and Headline-lg (40px, weight 900) are reserved for hero statements and section titles, using aggressive letter-spacing (-0.04em, -0.02em) to create visual tension and command attention. Body text (16px–18px, weight 500) maintains readability at 24–28px line-height, with generous leading to prevent cramping on white backgrounds. Labels and CTAs use weight 700 at 14–16px to signal interactivity. All headlines use weight 900 (the heaviest available in Poppins) to reinforce the brand's assertive personality; this weight is never applied to body copy. When displaying small labels over busy photographic backgrounds (e.g., c

Layout

The page grid is a 12-column fluid layout with a max-width of 1280px, centered on larger screens. Section rhythm alternates between full-width color-blocked zones (hero, dividers) and contained content areas (md spacing: 24px gutter on each side). Hero sections occupy 100% viewport width and use 80px vertical padding to create breathing room around headlines. Content cards and lists use md spacing (24px) for internal padding and lg spacing (40px) for section separation. The design favors bold, uninterrupted color fields over subtle gradients—each section should have a clear background color (primary, secondary, surface, or surface-container) to maintain visual rhythm. Container max-width is 1280px; on mobile, reduce gutter to sm spacing (12px) and stack sections vertically without reducing

Elevation & Depth

Depth in this system is achieved through color-blocking and shadow, not through layering or transparency. Level 1 (Base): flat white or light gray surface with no shadow. Level 2 (Cards, inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards and form elements to lift them slightly off the page. Level 3 (Modals, popovers, hover states): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) for deeper separation. Buttons do not have shadows in their default state; shadows appear only on hover to signal interactivity. Color-blocked sections (hero, dividers) have no shadow—they are opaque, full-

Shapes

The shape philosophy is "Technical Minimalism"—sharp, rectilinear forms with minimal rounding to reflect the precision of print production. Buttons and inputs use rounded: DEFAULT (0px, sharp corners) to convey industrial precision and align with the brand's technical identity. Cards and larger containers use rounded: md (4px) for a subtle softening that prevents harshness without compromising the geometric aesthetic. Only badges and pills use rounded: full (9999px) to signal secondary, non-critical information. Border-radius is never applied to hero sections, color dividers, or full-width blo

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses backgroundColor: {colors.primary} (#00d4a8), textColor: {colors.on-primary} (black), padding: 20px 40px, and height: 56px with fontWeight: 700 and fontSize: 16px. On hover, button-primary-hover transitions to backgroundColor: {colors.primary-fixed-dim} and applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 200ms ease transition. button-secondary uses a light gray background ({colors.surface-container-highest}, #dddddd) with black text, matching the primary button dimensions. Secondary buttons on hover shift to {colors.surface-container-high} (#e8e6e0) and apply the same shadow. All buttons use rounded: DEFAULT (0px) for sharp corners.

Containers & Surfaces Cards (card component) have backgr