Mauá Finance

Overview

Mauá Finance is a Brazilian fintech platform that unlocks contract guarantees and rapid funding solutions for businesses facing liquidity challenges. The brand embodies a philosophy of "Warm Technical Confidence"—combining the energy and approachability of a vibrant orange-red palette with the precision and reliability expected in financial services. The visual language is deliberately bold and human-centered: large, confident typography (80px display headlines), generous white space, and photography that centers real people in professional contexts. The emotional response is one of clarity and momentum: users feel that complex financial processes are suddenly within reach, that speed and transparency are non-negotiable, and that Mauá is a partner, not a gatekeeper.

The brand voice is direct, optimistic, and solution-oriented. Vocabulary favors active verbs ("destrava," "resolve," "emite") over passive constructions. Sentences are short and declarative, avoiding jargon while maintaining technical credibility. The tone never condescends; it assumes the user is intelligent and time-constrained. Example sentence in brand voice: "Contratos travados por falta de garantia. A Mauá resolve em até 48h, com funding próprio e sem depender de banco."

Colors

The color system is anchored by a primary accent of #f64336 (a warm, energetic red-orange) used exclusively for call-to-action buttons, interactive states, and brand-critical moments. This color appears infrequently but commands attention—it is the visual signal of action and possibility. The secondary palette introduces #15434a (a deep teal-green) as a supporting accent for secondary buttons, navigation highlights, and data visualization. Tertiary #2a6b64 (a softer teal) provides additional depth for tertiary interactions and container backgrounds. The neutral foundation is anchored by #1c1c1c (near-black) for primary text on light backgrounds and #ffffff (pure white) for surfaces and on-dark text. Mid-tone neutrals (#5d5d60, #a2a3a4, #c5c6c6) create a 7-step surface hierarchy: surface (#

Typography

The type system uses Geist (loaded from Google Fonts: weights 300, 400, 500, 600, 700) as the sole typeface, creating visual cohesion across all scales. Display (80px, 400 weight, -0.02em letter-spacing, 88px line-height) anchors hero sections and page titles with confident, open letterforms. Headline-lg (40px, 600 weight, -0.01em, 48px line-height) introduces major sections and card titles. Headline-md (28px, 600 weight, 36px line-height) handles subsection headings. Title-lg (20px, 600 weight, 28px line-height) is reserved for card headers and form labels. Body-lg (18px, 400 weight, 28px line-height) carries descriptive copy and longer-form content. Body-md (16px, 400 weight, 24px line-height) is the default paragraph and list-item size. Label-md (14px, 500 weight, 0.01em letter-spacing,

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered with equal left/right margins. The gutter (horizontal spacing between columns) is 24px. Page sections are separated by lg spacing (40px) vertically, creating a rhythm that feels spacious without excess. The container max-width of 1280px accommodates wide hero images and multi-column content while remaining readable on desktop. White-space philosophy prioritizes breathing room: cards and content blocks use md padding (24px) internally, with sm spacing (12px) between nested elements. Hero sections employ full-bleed backgrounds (extending edge-to-edge) with a 64px (xl) top and bottom padding to frame the content. Navigation uses md spacing (24px) for horizontal menu items. Form fields and input groups use sm spacing

Elevation & Depth

Depth in Mauá Finance is conveyed through a shadow-based elevation system rather than glassmorphism or layered translucency. The system defines three elevation levels: Level 1 (Base) uses no shadow, representing the primary surface plane (e.g., body background #ffffff). Level 2 (Standard Cards & Dropdowns) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle separation from the base. This shadow is used on cards, input fields with focus, and dropdown panels. Level 3 (Elevated Modals & Prominent Cards) applies box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), reserved for modal overlays

Shapes

The shape philosophy is "Soft-Technical Precision"—rounded corners are used strategically to soften the interface without sacrificing clarity or modernity. Buttons use full border-radius (9999px / {rounded.full}), creating pill-shaped containers that feel approachable and clickable. This 1000px radius is applied to all primary, secondary, and tertiary buttons, as well as badges. Cards and containers use md (0.75rem / 12px) or lg (1rem / 16px) border-radius, providing subtle rounding that prevents a harsh, boxy appearance while maintaining a professional aesthetic. Input fields use DEFAULT (0.5

Components

Action Elements Buttons are the primary interactive component. Primary buttons (button-primary) use backgroundColor: {colors.primary} (#f64336), textColor: {colors.on-primary} (#ffffff), rounded: {rounded.full}, padding: 16px 32px, and height: 48px. On hover (button-primary-hover), the background shifts to #d93829 with a 0.2s transition. Secondary buttons (button-secondary) invert the logic: transparent background, {colors.primary} text, and a 2px solid border in {colors.primary}. On hover, they gain a subtle rgba(246, 67, 54, 0.08) background. Tertiary buttons follow the same pattern but use {colors.secondary} (#15434a) for text and border. All buttons use label-md typography (14px, 500 weight, 0.01em letter-spacing). Focus states add a 3px outline in rgba(246, 67, 54, 0.3) for keyboa

Do's and Don'ts

**Do**

• Do use {colors.primary} (#f64336) exclusively for primary CTAs, focus states, and brand-critical moments—it should appear infrequently but command attention.
• Do apply md spacing (24px) between major sections and sm spacing (12px) between nested components to create a predictable, scalable rhythm.
• Do use Geist 400 weight for body text and 600 weight for headings; avoid mixing weights within a single line unless emphasizing a specific word.
• Do apply 0.2s cubic-bezier(0.4, 0, 0.2, 1) transitions to all interactive state changes (hover, focus, active) for consistent motion.
• Do use full border-radius (9999px) on buttons and badges; use md (12px) on cards; use DEFAULT (8px) on inputs—never mix radii on the same component type.
• Do include a 3px focus ring (0 0 0 3px rgba(246, 67, 54, 0.1)) on all interactive elements for keyboard navigation accessibility.

**Don't**

• Don't use secondary (#15434a) or tertiary (#2a6b64) as primary button backgrounds—reserve {colors.primary} (#f64336) for all primary CTAs.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) or smaller than 0 1px 2px rgba(0, 0, 0, 0.06)—this breaks the elevation hierarchy.
• Don't mix typefaces; Geist is the sole font family across all scales. Avoid system-ui, Arial, or Helvetica fallbacks in component definitions.
• Don't use sharp corners (0px border-radius) on interactive elements; minimum is DEFAULT (8px) for inputs, full (9999px) for buttons.
• Don't apply transitions longer than 0.3s or use easing functions other than cubic-bezier(0.4, 0, 0.2, 1)—this maintains snappy, predictable motion.
• Don't hardcode hex values inside component blocks; always reference color tokens like {colors.primary} so the system remains wired and maintainable.