Igor Mahr

Overview

Igor Mahr is a design and development portfolio that embodies 'Maximalist Minimalism'—a deliberate collision of oversized, expressive typography (176px display headlines in the gokil typeface) against vast white space and surgical precision in interaction design. The brand serves ambitious creative technologists and enterprises seeking partners who refuse mediocrity. The aesthetic is unapologetically contemporary: deep purple (#2b0c7d) as the signature accent conveys technical depth and creative confidence, while the white canvas (100% #ffffff) ensures every element lands with impact. The emotional response is one of clarity mixed with ambition—the user feels they are in the presence of someone who has mastered both craft and taste.

The voice is direct, confident, and slightly irreverent. Vocabulary favors precision over flourish: 'Design & Development for when average won't cut it' is the brand promise. Sentences are short, declarative, and free of hedging. The tone never apologizes, never over-explains, and treats the viewer as an equal peer. Example sentence in brand voice: 'Currently booking projects for Sep, 2026 →'—notice the forward arrow, the specificity, the assumption that the reader already understands the value proposition.

Colors

The color system is built on a single, dominant accent: Deep Purple (#2b0c7d) serves as the primary brand color, appearing on all interactive elements, text, and structural lines. This is not a neutral—it is a deliberate, high-saturation choice that signals technical sophistication and creative ambition. Primary (#2b0c7d) is paired with white (#ffffff) for maximum contrast and legibility; on-primary is always #ffffff. The secondary accent, Magenta (#f28afd), provides a softer, more playful counterpoint used sparingly in highlights, gradients, and accent states. Tertiary green (#41b883) is reserved for success states and status indicators. The surface stack is almost entirely white: surface (#ffffff), surface-container (#ede9ff), and surface-container-high (#e1e4f1) create subtle depth thro

Typography

The type system is a study in contrast: the display tier uses gokil (a geometric, ultra-light typeface) at 176px with -0.04em letter-spacing to create an almost architectural presence. Headlines drop to Magnat Head (a refined, humanist sans-serif) at 64px–40px with 300 weight, maintaining elegance while improving readability. Body text and labels use Magnat Head at 15px–12px with 400 weight and 0.01em letter-spacing, ensuring clarity at small sizes. The rationale is deliberate: gokil is reserved for hero moments and cannot be used for body copy; Magnat Head is the workhorse, appearing in navigation, buttons, labels, and prose. This separation prevents visual chaos and makes the type hierarchy immediately legible. When small labels (12px) appear over busy backgrounds or colored surfaces, ap

Layout

The page uses a fluid, single-column layout on mobile (100vw) and a fixed 1360px container on desktop (centered with symmetric margins). The grid is 12 columns, but the design rarely uses more than 3–4 columns of actual content; the remaining space is intentional white space. Section separation is achieved using lg spacing (40px) between major blocks, with md spacing (24px) between cards and components within sections. The gutter (24px) is applied to left/right padding on the container. The hero section occupies the full viewport height on desktop, with the massive display headline anchoring the top and navigation elements distributed across the top bar. Below the fold, project cards are laid out in a single column with 24px gaps, each card consuming the full container width. This rhythm—l

Elevation & Depth

Depth is conveyed through subtle layering rather than dramatic shadows. Level 1 (Base): the white background (#ffffff) with no shadow. Level 2 (Cards and Inputs): 1px solid border in outline-variant (#2b0c7d or #ababab) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Hover/Active states): the same border, but box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) and a background shift to surface-container-low (#f0eff4). No element uses blur, glassmorphism, or transparency; the system is flat and print-like. Buttons and interactive elements use border-only styling (1px solid primary or outline-va

Shapes

The shape philosophy is 'Architectural Precision'—every radius is intentional and serves a functional purpose. Buttons and pills use full radius (50px / border-radius: 9999px) to signal that they are clickable and self-contained. Cards and input fields use DEFAULT radius (8px) for a clean, modern look that is neither too sharp nor too rounded. Larger containers and modals use lg radius (20px) to create a sense of breathing room. The rationale: full-radius buttons are instantly recognizable as interactive; 8px cards feel contemporary without being trendy; 20px containers feel generous and appro

Components

Action Elements Buttons come in two primary variants: primary (solid background, primary color, white text) and secondary (transparent background, primary text, primary border). Both use full radius (50px) and padding of 9px 14px, yielding a compact, pill-shaped appearance. On hover, primary buttons shift to primary-container background (#ede9ff) with primary text (#2b0c7d), maintaining the border. Secondary buttons shift to surface-container-high (#e1e4f1) on hover. All button transitions use 200ms ease timing. Navigation links follow the secondary button pattern: transparent background, primary text, 1px primary border, full radius. When active, the text and border remain primary, and a subtle background tint (surface-container) appears.

Containers & Surfaces Cards use DEFAULT r

Do's and Don'ts

**Do**

• Do use the deep purple (#2b0c7d) as the primary accent on all CTAs, active states, and brand-critical elements—it is the signature color and must be instantly recognizable.
• Do maintain generous white space around large typography; the 176px display headline should never feel cramped, and the surrounding void is part of the design.
• Do apply 1px solid borders to all interactive elements (buttons, inputs, cards) in primary or outline-variant; borders are the primary depth cue, not shadows.
• Do use Magnat Head for all body copy, labels, and navigation; reserve gokil exclusively for hero display headlines at 176px or larger.
• Do transition interactive states over 200ms ease; this timing feels responsive without being jarring and aligns with Material 3 conventions.

**Don't**

• Don't introduce new accent colors beyond primary (#2b0c7d), secondary (#f28afd), and tertiary (#41b883)—the palette is intentionally minimal and any deviation dilutes brand recognition.
• Don't use drop shadows as the primary depth cue; the system relies on borders, color shifts, and white space, not blur or shadow stacking.
• Don't apply border-radius values other than those defined in the rounded scale (4px, 8px, 12px, 20px, 50px, 9999px)—consistency is critical to the architectural aesthetic.
• Don't use system fonts or generic sans-serif fallbacks; Magnat Head and gokil are core to the brand identity and must load reliably.
• Don't exceed 40px (lg spacing) for section gaps or 24px (md spacing) for component gaps; the rhythm is tight and intentional, not loose or airy.