# Autoconf.com.br Design System

> A high-contrast automotive management interface pairing structural Space Grotesk headlines with dependable blue and amber action states.

**Source:** https://autoconf.com.br | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Autoconf.com.br utilizes a "monochrome-plus" system where a deep slate-blue foundation (`#3b506c`) anchors a clean white canvas. The brand voltage is concentrated in high-saturation primary actions: a bright digital blue (`#307fe2`) for core navigation and functional UI, and a warm amber (`#fdb833`) for conversion-focused "Demonstração" CTAs. Typography is a deliberate mix of technical and friendly, using **Space Grotesk** for bold, geometric display headers and **Rubik** or **Poppins** for high-legibility body content. Layouts rely on generous vertical spacing (up to 100px) and a consistent 8px-10px border radius for interactive elements.

## Signature DNA
1. **The Conversion Amber** (The use of `#fdb833` or `#eaaa00` specifically for "Agendar demonstração" buttons, creating a high-contrast visual priority against the blue/white base.)
2. **Geometric Display** (Space Grotesk at weight 700 for primary section headers, providing a modern, "tech-first" automotive feel.)
3. **Softened Controls** (A consistent 8px to 10px corner radius on all primary buttons and cards, balancing the sharp geometry of the display type.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text, surface base | 68 | 1.0 | Computed |
| `{color.slate-blue}` | `#3b506c` | Primary text, brand accent, border | 101 | 0.8 | Computed |
| `{color.charcoal}` | `#262626` | High-emphasis text, footer text | 37 | 0.8 | Computed |
| `{color.light-gray}` | `#f3f5f7` | Input backgrounds, subtle surfaces | 3 | 1.0 | Token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary-blue}` | `#307fe2` | Functional CTAs, active states, icons | 70 | 0.8 | Computed |
| `{color.primary-amber}` | `#fdb833` | Conversion CTAs, primary buttons | 16 | 0.8 | Computed |
| `{color.deep-amber}` | `#eaaa00` | Secondary conversion buttons | 6 | 0.6 | Computed |

### Semantic
| Token | Hex | Role | Source |
|-------|-----|------|--------|
| `{color.error}` | `#e51520` | Validation errors, required indicators | `--hsf-global-error__color` |
| `{color.success}` | `#018184` | Progress indicators | `--hsf-progressbar-progressLine__background-color` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Space Grotesk | 700 | Display Headlines | Space Grotesk (Google) | OFL |
| Poppins | 400, 500, 600, 700 | UI Labels, Headings | Poppins (Google) | OFL |
| Rubik | 400, 600, 700 | Body, Navigation | Rubik (Google) | OFL |
| Raleway | 500, 700 | Button Labels | Raleway (Google) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 64px | 64px | normal | 700 | Hero H1/H2 | `h2.elementor-heading-title` |
| `{type.display-lg}` | 48px | 48px | normal | 700 | Section Headers | `h2.elementor-heading-title` |
| `{type.heading-md}` | 30px | 30px | normal | 600 | Large Buttons | `a.elementor-button-link` |
| `{type.heading-sm}` | 24px | 36px | normal | 700 | Accordion/Subheads | `button.accordion` |
| `{type.button-lg}` | 22px | 22px | normal | 500 | Primary Nav CTA | `a.elementor-button.elementor-size-sm` |
| `{type.body-lg}` | 18px | 27px | normal | 400 | Intro Paragraphs | `p` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default Body | `section.elementor-top-section` |
| `{type.caption}` | 12px | 18px | normal | 400 | Legal/Small text | `p` |

### Principles
1. **Headlines are always bold.** Space Grotesk is never used below weight 700 for display.
2. **Button text is heavy.** Interactive labels use weight 500-700 to ensure legibility against saturated backgrounds.
3. **Generous Leading.** Body text (16px) maintains a 1.5x line-height (24px) for readability.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 39 |
| `{space.sm}` | 20px | 14 |
| `{space.md}` | 24px | 62 |
| `{space.lg}` | 50px | 16 |
| `{space.xl}` | 100px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers | 319 occurrences |
| `{radius.sm}` | 3px | Inputs, small cards | 4 occurrences |
| `{radius.md}` | 8px | Standard Buttons | 34 occurrences |
| `{radius.lg}` | 10px | Feature Buttons/Cards | 13 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | Default state for all cards/buttons | Observed across all pages |
| Ghost | `rgba(255, 255, 255, 0.5) 0px 0px 0px 0px` | Decorative surface layering | Observed on About/Pricing |

## Components

### Tier 1: Foundational

#### Primary Action Button
**Role:** Main conversion driver (Demonstração)
**Pages observed:** All
**Spec:** Background: `#fdb833` | Text: `#ffffff` | Radius: `8px` | Padding: `12px 24px` | Typography: `Poppins 600`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Secondary Action Button
**Role:** Functional navigation (Solutions, Login)
**Pages observed:** All
**Spec:** Background: `#307fe2` | Text: `#ffffff` | Radius: `8px` | Padding: `18px` | Typography: `Rubik 400`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product benefits
**Pages observed:** Homepage
**Spec:** Background: `#307fe2` | Text: `#3b506c` | Radius: `10px` | Padding: `20px` | Typography: `Rubik 400`
**States observed:** Default

#### Accordion Control
**Role:** FAQ and content density management
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#307fe2` | Text: `#ffffff` | Radius: `0px` | Padding: `10px` | Typography: `Rubik 700 24px`
**States observed:** Default

### Tier 3: Surface-specific

#### Search Input
**Role:** Blog and documentation search
**Pages observed:** About, Pricing
**Spec:** Background: `transparent` | Text: `#272d4e` | Border: `1px #272d4e` | Radius: `3px` | Padding: `0px 19px`
**States observed:** Default

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background: `#f1f2f3` | Text: `#3b506c` | Radius: `3px` | Padding: `20px` | Typography: `Poppins 400`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1140px (standard Elementor container) |
| Section Gap | 100px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Desktop | 1440px | Full horizontal navigation, multi-column grids |
| Mobile | 390px | Stacked feature cards, hamburger menu, reduced H1 size |

## Imagery & decoration
- **Product UI Mockups:** Uses high-fidelity screenshots of the Autoconf platform inside laptop frames.
- **Iconography:** Simple, thin-stroke white icons on blue backgrounds.
- **Photography:** Lifestyle imagery of car dealerships and professionals, often used as full-width hero backgrounds with dark overlays.

## Do's
- Use **Space Grotesk 700** for all primary section titles.
- Reserve **Amber (#fdb833)** exclusively for "Demonstração" or high-priority conversion CTAs.
- Maintain **100px vertical spacing** between major homepage sections.
- Apply an **8px radius** to all standard UI buttons.
- Use **Rubik** for long-form body text to ensure readability.

## Don'ts
- Do not use **Space Grotesk** for body copy; it is a display-only font.
- Do not use **Blue (#307fe2)** for the primary "Agendar demonstração" button; this must remain Amber.
- Avoid sharp corners on interactive elements; always use at least a **3px radius**.
- Do not use **Slate Blue (#3b506c)** as a button background; it is reserved for text and borders.

## Similar brands
- Salesforce (Blue/White functional hierarchy)
- AutoTrader (Automotive-focused UI patterns)
- Localiza (Brazilian automotive brand color usage)

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary-blue: #307fe2;
  --color-primary-amber: #fdb833;
  --color-slate-blue: #3b506c;
  --color-white: #ffffff;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Rubik', sans-serif;
  --radius-md: 8px;
  --space-section: 100px;
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Mobile-specific typography scale for mid-range headings (H3-H4) was not fully mapped.
- Specific shadow values for elevated cards were not present in the source (monochrome system type).

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://autoconf.com.br | Desktop 1440 | 2026-06-06 |
| Pricing | https://autoconf.com.br/pricing | Desktop 1440 | 2026-06-06 |
| About | https://autoconf.com.br/about | Desktop 1440 | 2026-06-06 |