Couro Azul

Overview

Couro Azul represents a refined aesthetic rooted in **Architectural Minimalism with Tactile Warmth**—a design philosophy that celebrates the craftsmanship of premium leather through restrained, purposeful visual language. The brand serves the automotive luxury sector (Porsche, Mercedes, Volvo, VW) and demands a UI that communicates heritage, precision, and material authenticity. The interface evokes the sensory experience of fine leather: warm earth tones (#a68676 primary, #f1eee9 surface), generous whitespace, and deliberate typographic hierarchy create an atmosphere of quiet confidence and expert knowledge.

The voice is authoritative yet approachable—never breathless or trendy. Couro Azul speaks with the measured cadence of a craftsperson: "We've developed 56 million steering wheels since 1998. Each one carries our commitment to precision." The vocabulary favors concrete nouns (leather, craftsmanship, heritage, innovation) over abstract marketing language. Typography is deliberately classical (Miller Display for headlines, Gill Sans for body), reinforcing the brand's 25-year legacy. Interactions are smooth but not flashy; transitions occur at 300–400ms to respect the user's attention without feeling sluggish.

Colors

The color system is anchored in a warm, earthy palette that reflects the tactile nature of leather manufacturing. **Primary (#a68676)** is the signature accent—a muted terracotta-brown used on all CTAs, active states, and brand-critical interactive elements. It appears on the primary button, link underlines, and focus rings, creating a visual thread that guides users through the interface. **Secondary (#fec109)** is a warm golden-yellow reserved for secondary CTAs and highlights (e.g., "Learn More" buttons); it provides contrast without competing with primary. **Tertiary (#0f0b04)** is near-black, used for text-heavy sections and dark-mode contexts. The **surface stack** progresses from cream (#f1eee9) at the base through progressively warmer grays (#ebe8e3, #e5e2dd) for layered containers

Typography

The type system pairs two distinct families to reinforce the brand's dual nature: heritage and innovation. **Miller Display** (loaded via @font-face) serves headlines and display text, evoking classical print design and the brand's 1939 origins; it is always set in light weight (400) with generous letter-spacing (0.875em for h2, 0.25em for titles) to create an airy, sophisticated presence. **Gill Sans** (also @font-face) handles body and UI text, providing clarity and legibility at small sizes while maintaining warmth through its humanist proportions. The hierarchy spans from display (64px, -0.02em tracking) down to label-sm (12px, 0.05em tracking). All body text uses 18px/29px for desktop (16px/27px on tablet) with 0.015em letter-spacing to ensure readability over the warm cream backgroun

Layout

The page grid uses a 12-column fluid layout with a max-width of 1440px, centered on desktop and edge-to-edge on mobile. The gutter is 24px (md spacing), creating a consistent rhythm across sections. Container padding follows the spacing scale: lg (40px) for hero and full-width sections, md (24px) for card-based layouts, and sm (12px) for dense component groups. White-space is generous—section separation uses lg spacing (40px) vertically to allow the eye to rest between content blocks. The homepage hero occupies 100vh with a dark overlay (rgba(0, 0, 0, 0.3)) over a video background, ensuring text legibility while maintaining visual drama. Cards and content blocks use surface-container with md padding and md border-radius (10px), creating a soft, approachable aesthetic. On tablet (max-width:

Elevation & Depth

Depth is conveyed through a restrained shadow system that respects the warm, tactile aesthetic. The base layer (Level 1) is the cream surface (#f1eee9) with no shadow. Level 2 (cards, modals) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that suggests proximity without harshness. Level 3 (elevated modals, popovers) uses 0 4px 20px 4px rgba(0, 20, 60, 0.1), a slightly larger spread that conveys greater lift. Buttons on hover elevate to Level 2 (0 4px 12px rgba(0, 0, 0, 0.2)), signaling interactivity. Avoid harsh, dark shadows (rgba(0, 0, 0, 0.3+)) as they conf

Shapes

The shape language is **Soft-Technical**—combining minimal, precise geometry with subtle softness to reflect both the industrial precision of leather manufacturing and the tactile warmth of the final product. **Border-radius: 4px (DEFAULT)** is used for buttons, inputs, and small interactive elements, providing just enough rounding to feel modern without sacrificing clarity. **10px (md)** is reserved for cards and larger containers, creating a more approachable, inviting feel. **16px (lg)** is used sparingly for hero overlays or full-width sections that need visual softness. **Full (9999px)**

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses #a68676 background with white text, 44px height, 12px vertical / 24px horizontal padding, and 4px border-radius. On hover, shift to primary-fixed-dim (#b7a89d) and increase shadow to 0 4px 12px rgba(0, 0, 0, 0.2). Apply a 300ms transition on background-color and box-shadow. **button-secondary** uses #fec109 background with #3e3937 text, same dimensions, and no shadow by default; on hover, darken to #ffc107 and add 0 3px 8px rgba(0, 0, 0, 0.15). **button-ghost** has transparent background, #a68676 text, and a 1px border at #a68676; on hover, fill with surface-container-high (#ebe8e3) to create a subtle background reveal.

Containers & Surfaces **card** uses surface-container (#f1eee9) background, 10

Do's and Don'ts

**Do**

• Do use primary (#a68676) exclusively for CTAs, active states, and focus rings—it is the brand's signature accent and must remain visually distinct.
• Do maintain generous whitespace (lg spacing, 40px) between major sections to create a calm, confident atmosphere that reflects the brand's heritage.
• Do apply letter-spacing consistently: 0.875em for Miller Display headlines, 0.015em for Gill Sans body text, and 0.09em for small labels to preserve the classical, precise aesthetic.
• Do use the shadow system sparingly: Level 2 (0 3px 8px rgba(0, 0, 0, 0.15)) for cards, Level 3 (0 4px 20px 4px rgba(0, 20, 60, 0.1)) for modals only.
• Do transition interactive elements at 200–300ms (ease-out) to feel responsive without appearing rushed or flashy.

**Don't**

• Don't use secondary (#fec109) on primary CTAs or in high-frequency interactive elements—it is a supporting accent and must not compete with primary.
• Don't apply border-radius >16px to any component; excessive rounding conflicts with the brand's architectural precision and craftsmanship narrative.
• Don't use system fonts (system-ui, -apple-system, sans-serif) in primary content; Miller Display and Gill Sans are loaded via @font-face and must be the only typefaces visible to users.
• Don't apply harsh shadows (rgba(0, 0, 0, 0.3+)) or drop-shadows >20px spread; they contradict the warm, tactile aesthetic and create visual heaviness.
• Don't mix letter-spacing styles within a single typographic level; maintain consistency (e.g., all h2 use 0.875em, all body-md use 0.015em) to preserve the refined, intentional voice.