Ixtract GmbH

Overview

Ixtract GmbH is a visual knowledge design agency that transforms complex business messages into memorable, strategic visualizations. The brand serves B2B clients across project communication, change management, and executive presentations. The aesthetic is **Geometric Minimalism with High-Contrast Accents**—a deliberate fusion of clean, architectural forms with bold yellow-and-black typography that commands attention without sacrificing clarity. The UI evokes precision, confidence, and intellectual rigor: every pixel serves the message, never the decoration.

The brand voice is direct, professional, and solution-oriented. Ixtract speaks in the language of strategy and impact, avoiding jargon while maintaining sophistication. Tone: authoritative yet approachable, data-driven yet human. Example: "Intelligente Visualisierungen, die nachhaltig im Gedächtnis bleiben"—intelligent visualizations that stick. The vocabulary emphasizes clarity (Visualisierung, Botschaft, Verständnis) and transformation (Changekommunikation, Strategiebild, Authentifizierung).

Colors

The color system is built on a **high-contrast, signal-driven philosophy**: white surfaces provide breathing room, black anchors hierarchy and text, and electric yellow (#fdf400) acts as the brand's signature accent—appearing on CTAs, highlights, and strategic emphasis points. Primary (#fdf400) is used exclusively for call-to-action buttons, accent badges, and hero section highlights; it commands 8–12% of the visual real estate. Secondary (#000000) is the dominant text and structural color, applied to headlines (h1–h3), navigation, and card borders at 1px solid #a9aeb3. Tertiary (#5b6ef5, a periwinkle blue) is reserved for hero gradients and secondary visual elements, creating depth without competing with the yellow accent. Surface colors follow a strict grayscale ladder: #ffffff (base), #

Typography

The type system centers on **Nunito**, a geometric sans-serif that balances warmth with precision—ideal for both technical and human-centered messaging. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major section breaks; it commands the page with confidence. Headline-lg (50px, 400 weight) is used for primary page titles and hero subtitles, maintaining readability at scale. Headline-md (32px, 600 weight) anchors section headers and card titles. Body-lg (18px, 300 weight, 28px line-height) is the primary reading size for testimonials, hero copy, and feature descriptions—the light weight conveys approachability. Body-md (16px, 400 weight) is used for standard paragraph text and form labels. Label-md (14px, 600 weight, 0.01em tracking) is applied to button tex

Layout

The layout follows a **12-column grid with a 1280px container max-width**, maintaining a 24px gutter on desktop and 12px on tablet. Page rhythm is established through lg spacing (40px) for section separation, md spacing (24px) for component padding, and sm spacing (12px) for internal element spacing. The hero section spans full-width with a 80px vertical padding and a 135° diagonal gradient (tertiary blue to lighter blue), creating visual momentum. Card layouts use a 24px padding with 1px borders at #a9aeb3, and list items are separated by 12px vertical spacing with hover backgrounds at #dfe3e8. White-space philosophy: generous margins around text blocks (40px above/below major sections) prevent cognitive overload and allow the yellow accents to breathe. Container max-width is enforced at

Elevation & Depth

Depth is conveyed through **subtle shadow layering and geometric offset**, not through darkness. Level 1 (Base): flat white surface (#ffffff) with no shadow, used for primary content areas and input fields. Level 2 (Standard Card): 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border at #a9aeb3, applied to testimonial cards, feature cards, and form containers—this shadow creates gentle separation from the background. Level 3 (Elevated/Hover): 0 16px 40px rgba(0, 0, 0, 0.12) with a 2px border at #5b6ef5, used for modals, expanded cards on hover, and hero overlays. Transitions between levels use a 30

Shapes

The shape philosophy is **Architectural Sharpness with Minimal Softness**—a deliberate rejection of rounded corners in favor of crisp, 90° angles that reinforce precision and professionalism. Buttons use 1px border-radius (rounded.sm), creating a barely-perceptible softness that prevents harsh edges while maintaining geometric clarity. Cards use 0.5rem (rounded.DEFAULT) for subtle corner relief without compromising the architectural aesthetic. Input fields match buttons at 1px to maintain visual consistency across interactive elements. Accent boxes and hero sections use 0px border-radius (shar

Components

Action Elements Buttons are the primary call-to-action mechanism. **Button-primary** uses a 48px height with 14px vertical and 34px horizontal padding, 18px Nunito 700 weight, and a 1px border-radius. Background is #fdf400 (primary yellow) with #111111 text. On hover, the background shifts to #fffacc (primary-container) and text to #3c3c3c, with a 200ms ease-out transition. Button-secondary mirrors the primary button but inverts colors: #000000 background, #ffffff text, with a hover state of #333333 background and #ebebeb text. Both buttons use a 1px solid border at rgba(0, 0, 0, 0.1) to add subtle depth. Focus state applies a 3px ring at rgba(253, 244, 0, 0.1) with a 150ms transition.

Containers & Surfaces **Card** components use a white background (#ffffff), 24px padding, 0.5rem

Do's and Don'ts

**Do**

• Do use the yellow accent (#fdf400) sparingly—limit to CTAs, badges, and 1–2 hero highlights per page to maintain impact and avoid visual noise.
• Do apply 1px border-radius consistently across all buttons, inputs, and cards to reinforce the architectural sharpness signature.
• Do pair Nunito 300 weight body copy with 600–700 weight headlines to create strong visual hierarchy without relying on color alone.
• Do use the full-width hero gradient (tertiary blue, 135° angle) as a visual anchor for major sections; it signals importance and breaks up white-space monotony.
• Do maintain 40px lg spacing between major sections and 24px md spacing within component groups to ensure breathing room and cognitive clarity.

**Don't**

• Don't use rounded corners > 1px on buttons or cards—the architectural sharpness is the brand signature; softness dilutes authority.
• Don't apply the yellow accent to body text or secondary UI elements; reserve it exclusively for primary CTAs and strategic highlights.
• Don't mix typefaces; Nunito is the sole font family. Avoid Arial, system-ui, or serif fonts, which contradict the geometric minimalism aesthetic.
• Don't use shadows > 0 16px 40px rgba(0, 0, 0, 0.12); excessive depth creates visual clutter and undermines the clean, architectural aesthetic.
• Don't reduce the gutter below 12px on mobile or 24px on desktop; white-space is a core design principle and cramped layouts damage readability and brand perception.