SEAT

Overview

SEAT is a bold, youthful automotive brand that celebrates energetic design and confident self-expression. The visual system embraces 'Architectural Minimalism with Vibrant Accents'—a philosophy that pairs clean, geometric layouts with striking color blocking to create immediate visual impact. The brand serves car enthusiasts and practical buyers alike, evoking a sense of adventure and accessibility. The emotional response is one of optimism and forward momentum: the interface feels modern, decisive, and inviting without pretension. SEAT's voice is direct, conversational, and action-oriented—never corporate, always human. The brand uses short, punchy sentences and speaks to the driver's aspirations rather than technical specs. Example: 'Let yourself get carried away.'

Colors

The SEAT palette is anchored by a sophisticated dark brown primary (#190f14) that grounds the brand with authority and warmth, paired with a luminous mint secondary (#20c997) that energizes hero sections and CTAs. The primary is used on all interactive elements—buttons, links, and focus states—creating a consistent call-to-action language. The secondary (#20c997) appears as a vibrant background color for hero sections and accent highlights, creating visual contrast against the neutral surface stack (white #ffffff, warm beige #ece9e1, soft taupe #dedad4). Error states use a confident red (#dc3545) for alerts and warnings. The on-surface text color (#0f0f0f) is a near-black that ensures legibility across all backgrounds. Surface variants (#d1cfd0, #cccccc) are used for dividers, borders, and

Typography

The type system is built on the proprietary SEAT font family (SeatBlack, SeatBold, SeatMedium, SeatRegular), creating a distinctive brand voice that is both modern and approachable. Display (60px, SeatBlack, -0.04em letter-spacing) is reserved for hero headlines and major section titles, commanding attention through weight and scale. Headline-lg (40px, SeatBlack) and headline-md (28px, SeatBold) establish visual hierarchy for product names and section headers, with tight line-heights (48px, 36px) that reinforce the brand's architectural precision. Body text (16–18px, SeatRegular, 24–28px line-height) maintains readability at all sizes with generous leading. Labels (14px SeatBold, 12px SeatMedium) are used for buttons, badges, and form fields with increased letter-spacing (0.01–0.05em) for

Layout

The layout system uses a 12-column Bootstrap grid with a max-width of 1140px, ensuring responsive scaling from mobile (100% width with 24px gutter) to desktop. The page rhythm alternates between full-width color-blocked hero sections (80px vertical padding, {spacing.lg} horizontal) and contained content sections (40px top/bottom margin, {spacing.md} internal padding). White-space is generous and intentional: section separators use {spacing.lg} (40px) between major content blocks, while component-level spacing uses {spacing.md} (24px) for card padding and {spacing.sm} (12px) for internal element spacing. The container-max-width of 1140px is applied at the lg breakpoint (992px+), with fluid padding on smaller screens. Grid columns are 12-wide, allowing for flexible 1/2, 1/3, 1/4, and 1/6 spl

Elevation & Depth

Depth in SEAT is achieved through a restrained shadow system and strategic use of color blocking rather than heavy layering. Level 1 (Base): flat surfaces with no shadow, relying on color and border definition. Level 2 (Standard Cards & Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and lifted UI elements; this creates subtle separation without visual heaviness. Level 3 (Elevated/Hover States): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used on hover states of cards and interactive elements to signal interactivity. No blur or spread is used; shadows are tigh

Shapes

SEAT's shape language is 'Soft-Technical Precision'—combining sharp, geometric forms with subtle rounding to balance modernity and approachability. Buttons use a full rounded pill shape (border-radius: 50px) to signal friendliness and action, while maintaining a structured 44px height and 6px 20px padding for consistent touch targets. Cards and containers use minimal rounding (border-radius: 4px or 0.25rem) to preserve architectural clarity and grid alignment. Input fields use 0.5rem (8px) rounding for a balanced, accessible appearance. Badges and status indicators use full rounding (50px) to

Components

Action Elements Buttons are the primary interaction pattern and must use the full rounded pill shape (border-radius: 50px) with a 44px height and 6px 20px padding. Primary buttons (button-primary) use the dark brown background (#190f14) with cream text (#fafaf9), a 2px solid border in the same brown, and SeatBold 14px typography. On hover (button-primary-hover), the background transitions to the primary-container (#33302e) with a 200ms ease-out timing and no border change. Secondary buttons (button-secondary) are transparent with a 2px border in dark brown and dark brown text; on hover, they fill with a light beige background (#dedad4). Outline-white buttons (used on dark backgrounds) have transparent backgrounds, white text, and a 2px white border; on hover, they gain a 10% white over

Do's and Don'ts

**Do**

• Do use the mint green (#20c997) as a hero background to create immediate visual energy and contrast against dark brown text.
• Do apply the full rounded pill shape (50px border-radius) exclusively to buttons to signal clear, actionable CTAs.
• Do maintain the 8px spacing unit throughout—all padding, margins, and gaps must be multiples of 8px for grid alignment.
• Do use SeatBlack for all headlines and SeatBold for interactive labels to reinforce the brand's confident, modern voice.
• Do apply the shadow system consistently: 0 3px 8px for standard elevation, 0 8px 24px for hover/active states.
• Do use the dark brown primary (#190f14) on all interactive elements (buttons, links, focus states) for visual consistency.
• Do include a 3px focus outline at rgba(25, 15, 20, 0.1) on all interactive elements for accessibility and clarity.

**Don't**

• Don't use border-radius: 0 on any component except where grid alignment requires it; the brand avoids pure sharpness.
• Don't apply shadows to text or use text-shadow except on small labels over busy backgrounds (use 0 2px 4px rgba(0, 0, 0, 0.15) only).
• Don't mix the SEAT font family with system fonts; always specify SeatBlack, SeatBold, SeatMedium, or SeatRegular with -apple-system as fallback.
• Don't use the secondary mint green (#20c997) for body text or small UI elements; reserve it for hero sections and accent highlights.
• Don't create custom color values; all colors must reference the defined palette (primary, secondary, tertiary, surface stack, error).
• Don't use letter-spacing greater than 0.05em on body text; restrict tight letter-spacing (-0.04em to -0.01em) to headlines only.
• Don't apply hover transitions longer than 200ms; keep interactions snappy and responsive to user input.