# Carat Design System

> High-contrast monochrome architecture punctuated by a single high-voltage electric blue.

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

## TL;DR
Carat employs a stark, high-contrast aesthetic that balances a pure white canvas `#ffffff` with deep obsidian `#000000` and a signature electric blue `#3068ff`. The typographic system is built on the **Red Hat** family, using the Display variant for aggressive, tight-tracked headlines (up to 100px) and the Text variant for functional body copy. Layouts are characterized by generous vertical spacing (up to 190px) and a mix of sharp 0px corners and soft 28px pill-shaped interactive elements. The brand uses a "highlighter" logic where color is reserved for primary actions and specific graphic motifs, maintaining a professional yet modern media-agency atmosphere.

## Signature DNA
1. **The Electric Blue Punctuation** (`#3068ff`): Used as the sole chromatic signal for primary buttons, active states, and brand accents against a strictly black-and-white foundation.
2. **Red Hat Display Oversizing**: Headlines are frequently scaled to extreme sizes (80px-100px) with negative letter-spacing (-0.8px to -1.3px), creating a bold, "Designing for People" editorial impact.
3. **Pill-to-Sharp Contrast**: The system mixes perfectly sharp 0px containers with 28px "Rounded Button" pills, creating a visual rhythm between structural rigidity and interactive softness.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-white` | `#ffffff` | Page background, primary surface, button text | 221 | 1 | CSS Variable |
| `--color-black` | `#000000` | Primary text, footer background, secondary buttons | 120 | 1 | CSS Variable |
| `foundation-gray` | `#808080` | Muted secondary text, de-emphasized labels | 30 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-blue` | `#3068ff` | Primary CTA background, active borders, brand accent | 19 | 1 | CSS Variable |
| `--color-blue-light` | `#eaefff` | Subtle text accents, decorative hover states | 6 | 1 | CSS Variable |
| `--color-highliter` | `#e0f900` | Decorative accent (not captured in primary UI) | <5 | 1 | CSS Variable |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--color-error` | `#ff3030` | Validation errors and destructive states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Red Hat Display | 400, 450, 500, 640, 800 | Headlines, Display, Navigation | Red Hat Display (Google Fonts) | OFL |
| Red Hat Text | 400, 460, 600 | Body copy, UI labels, Buttons | Red Hat Text (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-mega` | 100px | 110px | -1.3px | 800 | Hero Display | `h3` |
| `display-xl` | 80px | 92px | -0.8px | 640 | Main Page Headers | `h1.RevealText` |
| `display-lg` | 68px | 78.2px | -0.68px | 640 | Section Titles | `h2.RevealText` |
| `heading-md` | 36px | 39.6px | -0.36px | 640 | Sub-section Heads | `h3` |
| `heading-sm` | 24px | 33.6px | normal | 600 | Feature Paragraphs | `p` |
| `body-lg` | 20px | 32px | normal | 500 | Large Body/Intro | `span` |
| `body-md` | 18px | 30px | 0.18px | 500 | Default Navigation | `span.NavigationDesktop` |
| `body-sm` | 16px | 26.24px | 0.16px | 400 | Standard Body | `button.Button-module` |
| `caption` | 12px | 24px | normal | 500 | Small Metadata | `span` |

### Principles
1. **Negative Tracking on Display**: As font size increases, letter-spacing tightens significantly (-0.68px to -1.3px).
2. **Weight Pairing**: Headlines utilize 640-800 weights for impact, while body text stays within 400-500 for legibility.
3. **Optical Sizing**: The system strictly switches from "Display" to "Text" variants at the 24px threshold.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `space-xs` | 4px | 33 |
| `space-sm` | 8px | 8 |
| `space-md` | 16px | 13 |
| `space-lg` | 32px | 3 |
| `space-section` | 80px | 3 |
| `space-hero` | 190px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-sharp` | 0px | Section containers, primary layout blocks | 305 occurrences |
| `radius-sm` | 5px | Input fields, small UI surfaces | 41 occurrences |
| `radius-lg` | 20px | Content cards, secondary surfaces | 3 occurrences |
| `radius-pill` | 28px | Primary buttons, "Connect with us" CTAs | 8 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|---|---|---|---|---|
| `flat` | none | All observed components use borders or solid fills | 0 shadows captured |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary site-wide CTA (e.g., "Connect with us", "Get in touch")
**Pages observed:** All
**Spec:** Background `#ffffff` / Text `#000000` / Border `none` / Radius `28px` / Padding `16px 30px` / Typography `16px Red Hat Text`
**States observed:** Default | Hover: Not captured

#### Standard Button
**Role:** High-impact section actions
**Pages observed:** All
**Spec:** Background `#3068ff` / Text `#ffffff` / Border `none` / Radius `0px` / Padding `137px 190px` / Typography `16px Red Hat Text`
**States observed:** Default | Active: Captured

### Tier 2: Patterns
#### Navigation Link
**Role:** Top-level header navigation
**Pages observed:** All
**Spec:** Background `transparent` / Text `#000000` / Typography `18px Red Hat Display (500)` / Letter-spacing `0.18px`
**States observed:** Default | Hover: Not captured

#### Language Selector
**Role:** Utility navigation for region switching
**Pages observed:** All
**Spec:** Background `transparent` / Text `#000000` / Border `1px #000000` / Radius `5px` / Padding `4px 0px` / Typography `14px Red Hat Display`
**States observed:** Default

### Tier 3: Surface-specific
#### Project Card
**Role:** Displaying work or case studies
**Pages observed:** `https://carat.com`
**Spec:** Background `#3068ff` / Text `#ffffff` / Radius `100px` / Padding `6.75px 14px`
**States observed:** Default

#### Footer
**Role:** Global site closure
**Pages observed:** All
**Spec:** Background `#000000` / Text `#ffffff` / Radius `0px` / Typography `16px Red Hat Text`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max-width | Not captured (Fluid) |
| Section Padding | 80px to 190px (Vertical) |
| Grid | 12-column observed in Work sections |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to "Menu" trigger; Hero text scales down; Padding reduces to 20px sides |

## Imagery & decoration
Carat uses large-scale photography with a blue-tinted or high-contrast overlay. A recurring graphic motif is the "concentric circle" or "radar" lines used in hero backgrounds to signify "Designing for People" and connectivity.

## Do's
- Use `#3068ff` exclusively for primary interactive triggers.
- Apply negative letter-spacing to any Red Hat Display text above 32px.
- Maintain a minimum of 80px vertical padding between content sections.
- Use `28px` radius for buttons intended to feel approachable.
- Ensure text on `#3068ff` is always `#ffffff` for 4.6:1 contrast.

## Don'ts
- **Wrong:** Using `#3068ff` for body text. **Right:** Use `#000000`. **Reason:** Blue is reserved for actions and brand accents.
- **Wrong:** Applying `28px` radius to section containers. **Right:** Use `0px`. **Reason:** Structural containers remain sharp.
- **Wrong:** Using Red Hat Text for headlines. **Right:** Use Red Hat Display. **Reason:** The Display variant is optimized for tight tracking and large scales.

## Similar brands
- Huge Inc
- R/GA
- Publicis Sapient

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-blue: #3068ff;
  --color-blue-light: #eaefff;
  --color-black: #000000;
  --color-white: #ffffff;
  --font-display: 'Red Hat Display', sans-serif;
  --font-text: 'Red Hat Text', sans-serif;
  --radius-pill: 28px;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Carat style: white background, black Red Hat Text at 16px, 28px border radius, and 16px 30px padding."
- "Generate a hero section with a `#000000` background, a 100px Red Hat Display headline with -1.3px letter spacing, and a `#3068ff` accent border."
- "Design a content card with a 20px border radius and 18px Red Hat Display subheadings."

## Known gaps
- Hover and Focus states for navigation items were not explicitly captured in the computed style data.
- Shadow tokens were not present in the source CSS, suggesting a flat design preference.
- Exact grid gutter widths were not captured.

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