# Aprova.com.br Design System

> High-contrast monochrome utility meeting technical precision, anchored by Space Grotesk headlines and a clinical cyan-tinted canvas.

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

## TL;DR
Aprova.com.br utilizes a monochrome foundation where absolute black `#000000` text and surfaces provide maximum contrast against a cool, cyan-tinted off-white canvas `#f6fbfb`. The typography system is dual-natured: **Space Grotesk** provides a geometric, technical feel for display and headings (reaching 88px for hero moments), while **Inter** handles high-density UI and body content. Brand "voltage" is concentrated in a single high-saturation cyan accent `#00dae7`, used exclusively for primary action buttons and iconography. The layout is structured around sharp geometry, with a preference for `0px` or large `100px` pill radii, avoiding intermediate softness.

## Signature DNA
1. **Technical Geometry** (Space Grotesk headlines at weight 700 paired with sharp `0px` card corners create a "gov-tech" blueprint aesthetic. Observed on main landing hero and service grids.)
2. **The Cyan Pulse** (A single, high-confidence accent `#00dae7` is the only chromatic break in a strictly black/white environment, reserved for the "Agendar agora" primary CTA.)
3. **Cyan-Tinted Canvas** (The background is not pure white but a clinical `#f6fbfb`, which prevents the high-contrast black type from feeling "vibrating" or harsh while maintaining a 20.1:1 contrast ratio.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#f6fbfb` | Primary page background and surface base | 88 | 0.8 | computed_style |
| `{color.ink}` | `#000000` | Primary text, dark section backgrounds | 70 | 0.8 | computed_style |
| `{color.border}` | `#c7caca` | Default divider and secondary text | 62 | 0.8 | computed_style |
| `{color.surface-dark}` | `#020a0f` | Deep navy-black for footer or dark hero bands | 6 | 0.6 | computed_style |
| `{color.white}` | `#ffffff` | Pure white for card interiors or high-contrast text | 4 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#00dae7` | Primary CTA background, active UI signals | 8 | 0.6 | computed_style |
| `{color.link}` | `#0000ee` | Standard browser-style text links | 38 | 0.8 | computed_style |
| `{color.sky}` | `#38bdf8` | Decorative text / secondary accent | 5 | 0.6 | decorative_only |
| `{color.peach}` | `#fbe8d7` | Decorative text / secondary accent | 4 | 0.6 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| **Space Grotesk** | 700 | Display and primary headings | Space Grotesk (Google Fonts) | OFL |
| **Space Grotesk Variable** | 400 | Secondary display and sub-headings | Space Grotesk (Google Fonts) | OFL |
| **Inter** | 400, 500, 600, 700 | Body, UI labels, navigation | Inter (Google Fonts) | OFL |
| **Raleway** | 400, 500, 700 | Secondary body / captions | Raleway (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-mega}` | 88px | 96.8px | normal | 700 | Hero H1 | `span.framer-text` |
| `{type.display-lg}` | 49px | 56.35px | normal | 400 | Section H2 | `h2.framer-styles-preset-ilq1a2` |
| `{type.heading-md}` | 39px | 46.8px | normal | 400 | Sub-section H3 | `h3.framer-styles-preset-10anux8` |
| `{type.heading-sm}` | 30px | 33px | normal | 700 | Card titles | `span.framer-text` |
| `{type.body-lg}` | 18px | 28.8px | normal | 400 | Intro paragraphs | `p.framer-styles-preset-1l10st3` |
| `{type.body-md}` | 16px | 25.6px | normal | 400 | Default body | `p.framer-styles-preset-1my8mjl` |
| `{type.body-sm}` | 14px | 15.4px | normal | 400 | UI labels / Footer | `p.framer-text` |
| `{type.caption}` | 12px | normal | normal | 400 | Small annotations | `div.framer-uma8t` |

### Principles
1. **Geometric Display:** Headlines must use Space Grotesk. The high x-height and technical terminals are the brand's primary identifier.
2. **Achromatic Hierarchy:** Use `#000000` for all primary headings and `#c7caca` for secondary metadata.
3. **Tight Display Leading:** Display sizes (88px) use a 1.1x line-height ratio to maintain visual density in hero sections.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 4 |
| `{space.sm}` | 12px | 9 |
| `{space.md}` | 20px | 5 |
| `{space.lg}` | 24px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Default for cards and service blocks | 260 occurrences |
| `{radius.card}` | 16px | Floating UI elements / Chat bubbles | 5 occurrences |
| `{radius.pill}` | 100px | Primary CTA buttons, badges | 14 occurrences |

## Components
### Tier 1: Foundational
#### Button Primary
**Role:** Main site conversion (Agendar agora)
**Pages observed:** https://aprova.com.br
**Spec:** Background `{color.primary}` (#00dae7) / Text `{color.ink}` (#000000) / Radius `{radius.pill}` (100px) / Padding 12px 24px / Font `{type.body-sm}` (14px)
**States observed:** Default | Hover: not captured

#### Nav Link
**Role:** Top-level navigation
**Pages observed:** https://aprova.com.br
**Spec:** Background transparent / Text `{color.ink}` (#000000) / Font `{type.body-sm}` (14px) / Weight 400
**States observed:** Default | Hover: not captured

### Tier 2: Patterns
#### Service Card
**Role:** Grid items for platform features
**Pages observed:** https://aprova.com.br
**Spec:** Background `{color.white}` (#ffffff) / Border 1px `{color.border}` (#c7caca) / Radius `{radius.sharp}` (0px) / Padding 24px
**States observed:** Default | Hover: not captured

### Tier 3: Surface-specific
#### FAQ Accordion
**Role:** Disclosure pattern for technical questions
**Pages observed:** https://aprova.com.br
**Spec:** Background transparent / Text `{color.ink}` (#000000) / Border-bottom 1px `{color.border}` (#c7caca) / Font `{type.body-md}` (16px)
**States observed:** Default | Active: captured (shows expanded text)

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding | 80px - 120px vertical |
| Grid | 12-column desktop |

## Do's
- Use Space Grotesk for any text larger than 24px.
- Maintain the `#f6fbfb` canvas color to ensure the "Aprova" clinical feel.
- Reserve `#00dae7` (Cyan) strictly for primary action buttons.
- Use `0px` radius for structural cards to maintain the technical blueprint aesthetic.
- Ensure 20:1 contrast for all primary body text.

## Don'ts
- **Wrong:** Using `#00dae7` for body text. **Right:** Use `#000000`. **Reason:** Cyan is an action signal, not a reading color; it fails legibility at small sizes.
- **Wrong:** Applying `16px` radius to all cards. **Right:** Use `0px` for main service grids. **Reason:** The brand identity is built on sharp, technical geometry.
- **Wrong:** Using pure white `#ffffff` as the global page background. **Right:** Use `{color.canvas}` (#f6fbfb). **Reason:** The cyan-tinted canvas is a core brand foundation.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-canvas: #f6fbfb;
  --color-ink: #000000;
  --color-primary: #00dae7;
  --color-border: #c7caca;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-pill: 100px;
  --radius-sharp: 0px;
}
```

## Known gaps
- Hover states for primary buttons were not captured in the static trace.
- Mobile-specific navigation menu (hamburger) transition was not sampled.
- Shadow tokens are absent from the evidence, suggesting a flat design system.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main Landing | https://aprova.com.br | 1440px | 2026-06-06 |
| Mobile Landing | https://aprova.com.br | 390px | 2026-06-06 |