# Solides.com.br Design System

> Deep plum canvases anchored by high-contrast white typography and energetic amber accents, utilizing soft-radius cards to organize HR complexity.

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

## TL;DR
Solides employs a high-chroma "monochrome" system where a deep plum (#80297d) serves as the primary brand anchor, appearing in headers, buttons, and section backgrounds. This is contrasted against a clean white (#ffffff) foundation and a secondary "Novidade" amber (#ffba00) used for high-priority CTAs and badges. Typography is exclusively Poppins for both display and UI, leaning on semi-bold (600) and bold (700) weights to establish hierarchy. Component geometry is defined by a consistent 15px border radius for cards and 60px "pill" radius for primary buttons.

## Signature DNA
1. **The Plum Anchor** (#80297d): Used as the primary structural color for titles (`--tfms-color-title`) and main action buttons, creating a distinct HR-tech identity that avoids standard "SaaS blue."
2. **Soft-Pill Geometry** (15px Card / 60px Button): A specific rounding strategy where cards feel approachable but structured, while buttons use an exaggerated pill radius to signify interactivity.
3. **Amber Highlights** (#ffba00): Reserved for "Novidade" (New) features and secondary conversion points, providing a warm counterpoint to the cool plum palette.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.canvas}` | `#ffffff` | Page background and primary surface | 382 | 1 | `--tfms-color-bg` |
| `{colors.ink}` | `#333333` | Primary body text | 379 | 0.8 | Computed Style |
| `{colors.ink-dark}` | `#000000` | High-contrast text and input values | 45 | 1 | `--wp--preset--color--black` |
| `{colors.surface-soft}` | `#f0eaf1` | Subtle section backgrounds and card fills | 42 | 1 | Brand Page |
| `{colors.track}` | `#d9d9d9` | Progress bar tracks and disabled lines | 2 | 1 | `--hsf-default-progressbar-trackLine__background-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.primary}` | `#80297d` | Titles, primary buttons, and brand borders | 234 | 1 | `--tfms-color-title` |
| `{colors.accent-deep}` | `#3d194f` | Dark section backgrounds and emphasized text | 175 | 0.8 | Computed Style |
| `{colors.amber}` | `#ffba00` | "Novidade" badges and secondary CTAs | 22 | 1 | `--wp--preset--color--luminous-vivid-amber` |
| `{colors.plum-light}` | `#6b3077` | Decorative surface backgrounds | 2 | 1 | Decorative Only |

### Semantic
| Token | Hex | Role | Source |
|-------|-----|------|--------|
| `{colors.error}` | `#e94f37` | Validation errors and alerts | `--tfms-color-error` |
| `{colors.success}` | `#018184` | Progress indicators | `--hsf-default-progressbar-progressLine__background-color` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Poppins** | 400, 500, 600, 700 | Primary Display & UI | Poppins (Google Fonts) | OFL |
| **Roboto** | 400 | Secondary Body | Roboto (Google Fonts) | OFL |
| **Helvetica** | 400, 700 | Form labels & Fallback | System Default | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 40px | 40px | normal | 600 | Hero stats/numbers | `span.elementor-counter-number-prefix` |
| `{type.h2}` | 32px | 40px | normal | 600 | Section headers | `h2.elementor-heading-title` |
| `{type.h3}` | 28px | 33px | normal | 600 | Sub-section headers | `h3.elementor-heading-title` |
| `{type.h4}` | 25px | 28px | normal | 600 | Feature titles | `h3.elementor-heading-title` |
| `{type.body-lg}` | 18px | 24px | normal | 400 | Intro paragraphs | `p` |
| `{type.body}` | 16px | 24px | normal | 400 | Default body text | `div.elementor-element` |
| `{type.button}` | 15px | 13px | normal | 600 | CTA labels | `span.elementor-button-content-wrapper` |
| `{type.caption}` | 12px | 25px | normal | 400 | Legal/Small text | `p:nth-of-type(1)` |

### Principles
1. **Boldness for Hierarchy:** Headers never drop below 600 weight; primary body text stays at 400.
2. **Tight Display Leading:** Large display sizes (40px) use 1:1 line height (40px) for a compact, impactful look.
3. **Sans-Serif Exclusivity:** No serifs are used; authority is conveyed through Poppins' geometric clarity.

## Spacing
**Base unit:** 5px (derived from common multiples)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xxs}` | 5px | 100 |
| `{space.xs}` | 10px | 39 |
| `{space.sm}` | 15px | 20 |
| `{space.md}` | 20px | 41 |
| `{space.lg}` | 30px | 88 |
| `{space.xl}` | 80px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Default containers | 790 occurrences |
| `{radius.card}` | 15px | Feature cards and pricing tiers | 103 occurrences |
| `{radius.panel}` | 20px | Large section containers | 21 occurrences |
| `{radius.input}` | 24px | Form text fields | 8 occurrences |
| `{radius.pill}` | 60px | Primary and Secondary buttons | 14 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.flat}` | `none` | Standard cards and surfaces | 26 occurrences |
| `{shadow.raised}` | `rgba(0, 0, 0, 0.24) 0px 0px 10px 0px` | Featured cards on dark backgrounds | 12 occurrences |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary CTAs
**Pages observed:** Home, Pricing
**Spec:** 
- **Primary:** Background `{colors.primary}` (#80297d) / Text `{colors.canvas}` (#ffffff) / Radius `{radius.pill}` (60px) / Padding `10px 30px`
- **Secondary:** Background `transparent` / Text `{colors.primary}` (#80297d) / Border `1px solid #80297d` / Radius `{radius.pill}` (20px)
**States observed:** Default | Active: captured

#### Text Input
**Role:** Lead generation forms
**Pages observed:** Home, Pricing
**Spec:** Background `{colors.canvas}` (#ffffff) / Text `{colors.ink-dark}` (#000000) / Border `none` / Radius `{radius.input}` (24px) / Padding `5px 15px`

### Tier 2: Patterns
#### Feature Card
**Role:** Product feature highlights
**Pages observed:** Home, Pricing
**Spec:** Background `{colors.canvas}` (#ffffff) / Text `{colors.accent-deep}` (#3d194f) / Radius `{radius.card}` (15px) / Padding `30px 30px 20px`

#### Pricing Card
**Role:** Tiered pricing display
**Pages observed:** Pricing
**Spec:** Background `{colors.surface-soft}` (#f0eaf1) / Text `{colors.ink}` (#333333) / Radius `{radius.card}` (15px) / Padding `0px`

### Tier 3: Surface-specific
#### Featured Dark Card
**Role:** High-emphasis hero or promo blocks
**Pages observed:** Home
**Spec:** Background `{colors.accent-deep}` (#3d194f) / Text `{colors.canvas}` (#ffffff) / Border `2px solid #ffffff` / Radius `{radius.card}` (15px) / Shadow `{shadow.raised}`

#### Amber Badge
**Role:** "Novidade" (New) indicator
**Pages observed:** Home, Pricing
**Spec:** Background `{colors.amber}` (#ffba00) / Text `{colors.accent-deep}` (#3d194f) / Radius `{radius.pill}` (60px) / Padding `0px 25px`

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1140px |
| Section Vertical Gap | 80px |
| Card Grid Gap | 20px - 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked cards, 100% width buttons, reduced section padding (30px) |
| Desktop | 1440px | Multi-column grids (3-up or 4-up), side-by-side hero content |

## Imagery & decoration
Solides uses high-quality photography of people in professional environments, often overlaid with plum or dark purple gradients. Decorative elements include the "Novidade" amber badge and progress bars using teal (#018184). The brand avoids sharp 90-degree corners for interactive elements, preferring rounded geometry.

## Do's
- Use `#80297d` for all primary headings to maintain brand consistency.
- Apply `{radius.card}` (15px) to all white content containers.
- Use Poppins 600 for any text that functions as a label or title.
- Reserve `#ffba00` strictly for new features or high-priority conversion buttons.
- Ensure all form inputs use the `{radius.input}` (24px) for a soft, modern feel.

## Don'ts
- **Wrong:** Using `#ffba00` as a primary background for large sections. **Right:** Use `#80297d` or `#3d194f`. **Reason:** Amber is an accent, not a structural foundation.
- **Wrong:** Mixing serif fonts with Poppins. **Right:** Stick to the Poppins/Roboto/Helvetica stack. **Reason:** The brand identity is strictly geometric sans-serif.
- **Wrong:** Using sharp corners (0px) on buttons. **Right:** Use `{radius.pill}` (60px). **Reason:** Sharp buttons conflict with the "approachable" brand DNA.
- **Wrong:** Labeling sub-brand colors (like a potential future "Solides Academy" blue) as the parent primary. **Right:** Always use `#80297d` as the parent primary.

## Quick start

### CSS Custom Properties
```css
:root {
  --solides-primary: #80297d;
  --solides-accent-deep: #3d194f;
  --solides-amber: #ffba00;
  --solides-canvas: #ffffff;
  --solides-ink: #333333;
  --solides-radius-card: 15px;
  --solides-radius-pill: 60px;
  --solides-font-main: 'Poppins', sans-serif;
}
```

## Agent prompt examples
- "Create a pricing card using Solides brand tokens: white background, 15px border radius, Poppins 600 for the title in #80297d, and a pill-shaped button in #ffba00."
- "Design a hero section with a #3d194f background, white Poppins text at 32px, and a primary CTA button using the #80297d plum color."
- "Generate a form field with a 24px border radius, white background, and a Poppins 14px label in #333333."

## Known gaps
- Hover and focus states for buttons were not explicitly captured in the static CSS variable analysis.
- Specific mobile breakpoint transition values (e.g., 768px vs 1024px) were inferred from standard Elementor patterns rather than explicit tokens.

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