MADZ

Overview

MADZ is a full-service creative agency that transforms brand ambitions into measurable digital experiences through a philosophy of 'Minimalist-Technical Precision.' The brand operates at the intersection of clarity and aesthetic rigor—every design decision serves both function and form, with no decorative excess. The UI aesthetic is deliberately austere: pure white surfaces (rgb(255, 255, 255)), deep charcoal text (rgb(28, 28, 28)), and a single vibrant accent in electric lime-green (#affa01) that commands attention on CTAs, badges, and key interactive moments. This color restraint creates visual tension that makes the brand's accent feel urgent and purposeful, never frivolous.

The brand voice is direct, professional, and results-oriented—speaking to business leaders and creative directors who value clarity over hype. MADZ communicates in concrete terms: 'We develop sites, virtual stores, visual identities, social content, and audiovisual productions with focus on clarity, aesthetics, and real results.' The tone avoids breathless marketing language; instead, it emphasizes competence, attention to detail, and partnership. Example sentence in brand voice: 'Your brand grows when design, technology, and strategy move together—we make sure they do.'

Colors

The MADZ color system operates on a principle of 'maximum contrast with minimal palette.' The primary surface is pure white (#ffffff, rgb(255, 255, 255)), creating a clean, distraction-free canvas. The text hierarchy uses deep charcoal (#1c1c1c, rgb(28, 28, 28)) for primary content, mid-gray (#666666) for secondary information, and light gray (#f2f2f2, #e9ecef) for subtle container backgrounds and dividers. The single brand accent is electric lime-green (#affa01), applied exclusively to primary CTAs, tagline pills, focus states, and brand-critical interactive elements—this restraint makes the accent feel premium and intentional rather than playful. Secondary dark color (#1c1c1c) is used for dark-mode buttons and high-contrast overlays. The outline palette (#cccccc, #d0d0d0) provides subtle

Typography

The MADZ typography system uses Inter exclusively across all weights (300–700), establishing a modern, technical foundation that reinforces the agency's precision-focused identity. The hierarchy is aggressive and clear: display text at 64px / 500 weight (letterSpacing -0.02em) commands hero sections with authority; headline-lg at 40px / 600 weight structures major sections; body-md at 16px / 400 weight ensures readability on dense content. The system avoids serif or decorative typefaces—Inter's geometric neutrality mirrors the brand's no-nonsense aesthetic. All interactive labels use label-md (14px / 500 weight, letterSpacing 0.01em) to create visual distinction from body text and signal clickability. Line heights are generous (1.5x to 1.75x font size) to maintain breathing room in a minim

Layout

MADZ uses a 12-column grid with a max-width of 1280px, centered with auto margins (margin-right: auto; margin-left: auto). The layout philosophy is 'generous white space with purposeful density'—sections are separated by lg spacing (40px) to create visual breathing room, while content blocks within sections use md spacing (24px) for internal rhythm. The gutter width is 24px, maintaining consistent horizontal padding across all breakpoints. Container padding follows the spacing scale: 24px on desktop, reducing to 16px on tablet and 12px on mobile to preserve readability without overwhelming smaller screens. The layout avoids full-width color blocks; instead, surfaces are contained within the grid to emphasize the white-space-first approach. Hero sections use centered text alignment with max

Elevation & Depth

Depth in MADZ is achieved through subtle shadow and border layering rather than dramatic drop shadows. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like hover states on list items; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals, creating a gentle lift from the surface; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for prominent overlays and expanded dropdowns. Cards and input fields use a 1px solid border at #d0d0d0 (outline-variant) to define edges without relying on shadow alone. On hover, cards transition from md to lg shadow over 240ms (cu

Shapes

The MADZ shape philosophy is 'Soft-Technical Minimalism'—rounded corners are used strategically to soften the geometric precision of the layout without introducing organic or playful qualities. Buttons and input fields use full rounding (border-radius: 100rem, or 1600px in computed styles) to create pill-shaped elements that feel contemporary and approachable while maintaining technical clarity. Cards and containers use lg rounding (1rem / 16px) to provide subtle corner softening without excessive curvature. Smaller UI elements like badges and tagline pills use full rounding (100rem) to emphas

Components

Action Elements Buttons are the primary interaction pattern and use two distinct styles: primary (lime-green background #affa01, charcoal text #1c1c1c, 48px height, 12px 24px padding, full rounding) for main CTAs like 'Quero falar sobre meu projeto'; secondary (transparent background, charcoal text, 1px outline at #cccccc, same dimensions) for lower-priority actions like 'Ver trabalhos.' All buttons use label-md typography (14px / 500 weight) and transition backgrounds over 200ms ease-out on hover. Dark variant buttons (#1c1c1c background, white text) are used in navbar and overlay contexts. Focus states apply a 3px inset box-shadow with primary accent at 10% opacity (rgba(175, 250, 1, 0.1)) and outline: 0.125rem solid #4d65ff for keyboard navigation accessibility.

Containers & Su