Pageworkers Digitalagentur

Overview

Pageworkers is a performance-obsessed digital agency from Aachen that transforms complex web challenges into measurable business outcomes. The brand embodies 'Technical Minimalism'—a design philosophy that strips away visual noise while injecting strategic energy through a single, unmissable accent color. The aesthetic is deliberately austere: a near-black canvas (#0c1d25) paired with crisp white typography and punctuated by electric lime-green (#cdf903) on all interactive moments. This creates a high-contrast, no-nonsense visual language that communicates precision, speed, and results-driven thinking. The UI evokes a sense of technical confidence—like stepping into a command center where every pixel serves a purpose.

The brand voice is direct, data-informed, and conversational without being casual. Pageworkers speaks in active verbs and concrete outcomes: 'Wir entwickeln Webapps, die messbar performen' (We build web apps that measurably perform). The vocabulary emphasizes performance, technical depth, and business impact. Tone examples: 'Full-Service Webdesign Agentur aus Aachen' (straightforward, place-specific), 'die messbar performen' (quantifiable results, not vague promises). The personality is confident but not arrogant—a trusted technical partner, not a hype machine.

Colors

The Pageworkers color system operates on a principle of 'Accent-Driven Minimalism': the vast majority of the interface is composed of near-black surfaces and white text, with lime-green (#cdf903) reserved exclusively for high-priority interactive elements and brand moments. Primary (#cdf903) is the signature accent—used on all CTAs (buttons, links, icon badges), focus states, and brand-critical highlights. It commands attention through contrast alone, not through saturation or size. Secondary (#09827e, a teal-cyan) provides a supporting accent for secondary actions and status indicators, while Tertiary (#ff6900, vivid orange) is used sparingly for alerts, warnings, or tertiary CTAs. The surface stack is deliberately dark: surface (#0c1d25) serves as the page background, surface-container (

Typography

The type system pairs DM Sans for display and headline work (sizes 24px–60px, weights 600–700) with Inter for body and label text (sizes 12px–18px, weights 400–700). DM Sans is a geometric, modern typeface that conveys technical sophistication and forward momentum; Inter is a humanist sans-serif that ensures readability at small sizes and provides a calm, approachable counterpoint to the bold headlines. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements and major page titles. Headline-lg (48px, 700 weight) anchors section introductions. Body-lg (18px, 400 weight, 28px line-height) is used for descriptive copy and ensures comfortable reading at arm's length. Label-md (15px, 700 weight) is applied to button text and UI labels, with 0.01em letter-spacing to add

Layout

The layout system uses a 12-column grid with a maximum container width of 1140px, providing a balanced, scalable structure for both desktop and tablet viewports. The page rhythm is governed by the spacing scale: lg (40px) is used for major section separation, md (24px) for component padding and inter-element spacing, and sm (12px) for internal component spacing. The design favors generous white space—sections are separated by 40px vertical gaps, and cards use 24px internal padding to prevent visual crowding. The gutter (24px) is applied consistently to left/right margins on the container, ensuring content never touches the viewport edge. Hero sections use full-width backgrounds with centered content constrained to the container-max width. The grid is fluid on mobile (100% width with gutter

Elevation & Depth

Depth in Pageworkers is achieved through a restrained shadow system and subtle surface-color shifts rather than aggressive drop shadows. Level 1 (Base): the page background (surface, #0c1d25) with no shadow. Level 2 (Standard Card): surface-container (#14252f) with a 1px border at surface-container-high (#1e3039) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Modal): surface-container-high (#1e3039) with the same border treatment and box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25). Interactive elements (buttons, inputs) use no shadow by default but gain a subtle glow on hover: bo

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used strategically to soften the technical aesthetic without compromising the austere, minimalist feel. Buttons and primary interactive elements use rounded.lg (1rem / 16px) for a balanced, approachable appearance. Cards and elevated surfaces use rounded.xl (1.5rem / 24px) to create a sense of containment and visual breathing room. Input fields use rounded.DEFAULT (0.5rem / 8px) to signal their functional, utilitarian nature. Icon badges and circular elements use rounded.full (9999px) for perfect circles. The rationale: larger r

Components

Action Elements Buttons are the primary interactive currency. Button-primary uses {colors.primary} (#cdf903) background with {colors.on-primary} text, rounded.lg, and 12px 24px padding for a 48px height. On hover, the background shifts to {colors.primary-fixed-dim} (#a79563) with a 0.2s ease transition. The icon inside rotates from -45deg to 0deg on hover (transform: rotate(0deg); transition: transform 0.3s ease), signaling forward momentum. Button-secondary uses a transparent background with a 2px solid {colors.primary} border and the same text color; on hover, the background fills with {colors.surface-container-high}. Button-tertiary uses {colors.secondary} (#09827e) for secondary actions like 'Projekt anfragen'.

Containers & Surfaces Cards (card component) use {colors.surface-c

Do's and Don'ts

**Do**

• Do use {colors.primary} (#cdf903) exclusively on CTAs, focus states, and brand-critical moments—never on body text or backgrounds.
• Do maintain the dark-first aesthetic: surface (#0c1d25) as the default background, with surface-container for elevated regions.
• Do apply 24px gutter spacing on all container edges and 40px vertical spacing between major sections.
• Do use DM Sans for headlines (24px–60px) and Inter for body/labels (12px–18px) to maintain the technical-yet-approachable voice.
• Do add 0.2s ease transitions on all hover states (buttons, cards, inputs) to signal interactivity smoothly.
• Do use rounded.xl (24px) on cards and rounded.lg (16px) on buttons to balance precision with approachability.

**Don't**

• Don't use {colors.primary} on large background areas or body text—it's an accent, not a dominant color.
• Don't apply shadows deeper than 0 16px 40px rgba(0, 0, 0, 0.25) or use multiple layered shadows; keep the shadow system minimal and flat.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the geometric precision.
• Don't apply letter-spacing greater than -0.04em on headlines or less than 0em on body text; maintain the defined range for readability.
• Don't mix DM Sans and Inter weights arbitrarily; use 600–700 for DM Sans headlines and 400–700 for Inter body/labels only.
• Don't add visual effects (gradients, textures, patterns) to the dark background; the minimalist aesthetic depends on clean, flat surfaces.