Mads Matters

Overview

Mads Matters is a digital-first agency brand system rooted in **Architectural Minimalism**—a design philosophy that strips away corporate ornamentation to reveal functional clarity. The brand evolved from legacy consulting into a high-velocity digital practice, and the design language reflects this transformation: clean geometric forms, precise color hierarchies, and purposeful whitespace create an environment where strategy and execution feel seamless. The visual identity evokes confidence without arrogance, technical sophistication without coldness. Users encounter a brand that respects their intelligence and time.

The tone is direct, strategic, and occasionally witty. Mads Matters speaks in active voice, avoids jargon unless necessary, and leads with outcomes rather than process. The vocabulary is contemporary but not trendy—words like "agility," "precision," "evolved," and "pull the ropes" signal a team that understands both the old guard and the new landscape. Example sentence in brand voice: "We don't inherit problems—we architect solutions."

Colors

The color system operates on a **dual-contrast principle**: a luminous primary blue (#0099ff) anchors all interactive moments and CTAs, while a vibrant lime-green secondary (#9ada00) provides accent energy for highlights and status indicators. The primary blue is the brand's signature accent—it appears on buttons, links, focus states, and anywhere user action is invited. It commands attention without aggression: at 100% opacity on white backgrounds, it reads as confident and modern; at reduced opacity (rgba(0, 153, 255, 0.08)), it creates subtle hover states that feel responsive without jarring. The secondary green (#9ada00) is reserved for success states, badges, and secondary CTAs, providing a warm counterpoint to the cool blue.

The surface stack is deliberately minimal and light: the b

Typography

The type system pairs **Inter Display** (display and headline scales) with **Inter Tight** (title and label scales) and **Inter** (body text), creating a three-tier hierarchy that balances personality with legibility. Display (64px, 500 weight, -0.02em tracking) is reserved for hero statements and major section breaks—it's generous and commanding but never decorative. Headline-lg (40px, 600 weight) anchors page sections and card titles, while headline-md (28px, 600 weight) handles subsections. Body text (16px, 400 weight, 24px line-height) is set with 0.02em letter-spacing to prevent the Inter family from feeling cramped at smaller sizes. Labels (12–14px, 500–600 weight) use tighter tracking (0.01–0.03em) to maintain visual hierarchy in dense UI. On small labels over busy backgrounds or in

Layout

The layout operates on a **12-column fluid grid** with a 1280px container max-width, ensuring content remains readable on desktop while adapting gracefully to tablet and mobile. The gutter between columns is 24px (md spacing), and section separation uses lg spacing (40px) vertically to create breathing room between major content blocks. The design philosophy favors generous whitespace over density: a card typically has 24px padding (md), with 12px (sm) gutters between elements within the card. Container max-width is enforced at 1280px to prevent line lengths from exceeding 75–80 characters, maintaining optimal reading comfort. Horizontal margins on full-width sections are set to 24px on desktop, reducing to 16px on tablet and 12px on mobile. The spacing scale (xs: 4px, sm: 12px, md: 24px,

Elevation & Depth

Depth is achieved through **subtle shadow layering and border definition** rather than dramatic drop shadows. The system uses three elevation levels: Level 1 (Base) has no shadow, just a 1px border in outline-variant (#999999) to define edges. Level 2 (Standard Card) applies elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) with a 1px border, creating a barely-perceptible lift. Level 3 (Elevated/Modal) uses elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)) with the same border, signaling modal or overlay status. Hover states on cards transition from Level 2 to Level 3 over 200ms using cubic-bezier(0.4,

Shapes

The shape language follows **Soft-Technical Precision**: rounded corners are used strategically to soften hard edges without introducing organic curves. Buttons and primary interactive elements use lg radius (1rem / 16px), creating a friendly but professional appearance. Cards and containers use xl radius (1.5rem / 24px) for a more generous, inviting feel. Input fields and smaller UI components use DEFAULT radius (0.5rem / 8px), maintaining visual hierarchy through scale. Chips and badges use full radius (9999px) to signal their secondary, non-critical nature. The rationale: larger radius valu

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses the primary blue (#0099ff) background with white text, 48px height, 12px vertical / 24px horizontal padding, and lg radius (16px). On hover, the background darkens to #0077cc over 200ms, signaling interactivity without animation overhead. The button-secondary variant uses the surface-container background (#eff4f7) with primary text and a 1px outline-variant border, allowing secondary actions to coexist without visual competition. Button-ghost removes the background entirely, using only text color and a transparent hover state (rgba(0, 153, 255, 0.08)) for tertiary actions. All buttons use label-md typography (14px, 600 weight) and transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1

Do's and Don'ts

**Do**

• Do use primary blue (#0099ff) exclusively for CTAs, focus states, and primary interactive elements—it's the brand's signature accent and should never be diluted across secondary UI.
• Do maintain at least 24px (md) padding inside cards and containers; whitespace is a design tool, not wasted space.
• Do apply negative letter-spacing (-0.01 to -0.02em) to all headlines to tighten visual mass and signal hierarchy.
• Do use the three-tier elevation system (Level 1: no shadow + border, Level 2: sm shadow, Level 3: md shadow) consistently; never invent intermediate shadow values.
• Do transition interactive states over 200ms using cubic-bezier(0.4, 0, 0.2, 1); this timing feels responsive without feeling rushed.

**Don't**

• Don't use the secondary green (#9ada00) on primary CTAs or interactive elements; it's reserved for success states, badges, and accent highlights.
• Don't apply shadows larger than elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)) to any component; the brand aesthetic is flat and precise, not layered and dramatic.
• Don't reduce border-radius below DEFAULT (8px) on interactive elements; smaller radius values feel cramped and reduce perceived clickability.
• Don't use system fonts or generic sans-serif fallbacks; always specify Inter, Inter Tight, or Inter Display from Google Fonts to maintain brand consistency.
• Don't mix rounded corner scales arbitrarily; use lg (16px) for buttons, xl (24px) for cards, and DEFAULT (8px) for inputs—this scale hierarchy is intentional.