# Redbird Design System

> High-contrast enterprise automation anchored by deep navy foundations and a high-voltage red primary action.

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

## TL;DR
Redbird utilizes a high-contrast "Dark Mode" aesthetic for its primary marketing surfaces, transitioning to a warm sand-toned foundation for secondary content and footers. The system is defined by a heavy reliance on **Inter** at weight 800 for display typography, creating a dense, authoritative hierarchy. The primary brand color is a vivid red `#e02f4a` (tokenized as `--red`), used exclusively for high-priority CTAs and status indicators. Surfaces are layered with subtle 1px borders and 8px to 16px corner radii, maintaining a structured, technical feel.

## Signature DNA
1. **The Crimson Glow** (The primary button `#e02f4a` utilizes a specific drop shadow `rgba(224, 47, 74, 0.35) 0px 4px 24px 0px` to create a "glow" effect against dark navy backgrounds, observed on the homepage and about pages.)
2. **Dense Display Inter** (Headlines are consistently set at weights 800-900 with tight negative letter spacing, such as `-2.016px` at 67px, creating a blocky, impactful visual rhythm.)
3. **Navy to Sand Transition** (The brand shifts from deep navy `#0c0c0e` hero sections to a warm neutral `#ede8e0` for customer stories and footers, preventing the "all-dark" fatigue common in SaaS.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--navy` | `#0c0c0e` | Primary surface background, text | 174 | 1 | `brand_page` |
| `--white-pure` | `#ffffff` | Text on dark, card backgrounds | 110 | 1 | `css_variable` |
| `--white` | `#f4f6fb` | Off-white text, secondary labels | 86 | 1 | `css_variable` |
| `--navy-2` | `#ede8e0` | Warm neutral section backgrounds, footer | 9 | 1 | `computed_style` |
| `--navy-4` | `#222b42` | Elevated card surfaces on dark | 11 | 1 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--red` | `#e02f4a` | Primary CTA background, "Press" label | 25 | 1 | `brand_page` |
| `--slate-light` | `#b0bad0` | Secondary button text, borders | 27 | 1 | `css_variable` |
| `--slate` | `#8a94ad` | Muted body text | 13 | 1 | `css_variable` |
| `accent-orange` | `#ff6600` | Feature highlights, badges | 8 | 0.6 | `computed_style` |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `--red` | `#e02f4a` | Error / High Alert (Press) |
| `success` | `#0070f3` | Information / Link (Pricing page) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Inter | 400, 500, 600, 700, 800, 900 | Heading, UI, Display | Inter (Google Fonts) | SIL OFL |
| sf pro text | 400, 700 | Body copy | Inter | Proprietary |
| Menlo | 400 | Code snippets | JetBrains Mono | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-mega` | 67px | 73.92px | -2.016px | 800 | Hero H1 | `h1` |
| `display-xl` | 45px | 51.52px | -1.344px | 800 | Section Titles | `h2.section-title` |
| `heading-md` | 35px | 40.48px | -0.88px | 800 | Sub-sections | `h2.section-title` |
| `subheading` | 18px | normal | -0.176px | 700 | Feature heads | `h3` |
| `body-lg` | 17px | 28.56px | normal | 400 | Intro paragraphs | `p.section-sub` |
| `body-md` | 16px | 26.4px | normal | 400 | Default body | `nav`, `p` |
| `button-text` | 15.2px | normal | normal | 600 | Primary CTA | `a.btn-primary` |
| `caption-bold` | 12px | normal | 1.2px | 700 | Section labels | `div.section-label` |

### Principles
1. **Display weight is 800.** Headlines never drop below 800 weight unless they are sub-headers.
2. **Negative tracking on display.** As font size increases, letter spacing tightens (from -0.88px to -2.016px).
3. **Monospace for technical context.** Menlo is used exclusively for `code` tags and developer-facing metadata.

## Spacing
**Base unit:** 4px (Inferred from common multiples)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `space-xs` | 4px | 10 |
| `space-sm` | 8px | 93 |
| `space-md` | 16px | 10 |
| `space-lg` | 32px | 9 |
| `space-xl` | 71px | 17 |
| `section-gap` | 100px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-sm` | 6px | Form inputs, small surfaces | `Surface` component |
| `radius-md` | 8px | Standard cards, secondary buttons | `Card` component |
| `radius-lg` | 10px | Primary buttons | `Rounded Button` component |
| `radius-xl` | 16px | Feature cards | `Surface` (observed once) |
| `radius-full` | 50px | Pill shapes / Panels | `panel` role |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `glow` | `rgba(224, 47, 74, 0.35) 0px 4px 24px 0px` | Primary CTA emphasis | `Rounded Button` |
| `flat` | `none` | Standard cards and navigation | `Navigation`, `Surface` |

## Components
### Tier 1: Foundational
#### Navigation
**Role:** Global site header
**Pages observed:** Homepage, About
**Spec:** Background `rgba(12, 12, 14, 0.92)` / Text `#f4f6fb` / Radius `0px` / Padding `0px 40px` / Font `16px`
**States observed:** Default | Hover: captured | Active: captured

#### Rounded Button (Primary)
**Role:** Main call to action
**Pages observed:** Homepage, About
**Spec:** Background `#e02f4a` / Text `#ffffff` / Radius `10px` / Padding `14px 28px` / Shadow `rgba(224, 47, 74, 0.35) 0px 4px 24px 0px`
**States observed:** Default | Active: captured

### Tier 2: Patterns
#### Card (Feature)
**Role:** Highlighting product capabilities
**Pages observed:** Homepage, About
**Spec:** Background `rgba(255, 102, 0, 0.08)` / Border `1px solid rgba(255, 102, 0, 0.22)` / Radius `8px` / Padding `7px 11px`
**States observed:** Default

#### Surface (Interactive)
**Role:** Tooltips or small interactive containers
**Pages observed:** Homepage, About
**Spec:** Background `transparent` / Text `#1a2035` / Radius `6px` / Padding `5px 8px` / Font `13.2px`
**States observed:** Default

### Tier 3: Surface-specific
#### Footer
**Role:** Site-wide navigation and credits
**Pages observed:** Homepage, About
**Spec:** Background `#ede8e0` / Text `#0c0c0e` / Border `1px solid rgba(255, 255, 255, 0.07)` / Padding `72px 71px 40px`
**States observed:** Default

#### Chip / Badge
**Role:** Small status or category indicator
**Pages observed:** Homepage, About
**Spec:** Background `transparent` / Text `#b0bad0` / Radius `7px` / Padding `6px 14px` / Font `14px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | ~1440px (viewport sampled) |
| Section Padding | 100px (vertical) |
| Grid Gutter | 24px - 32px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; H1 scales to 61px; padding reduces to ~20px. |
| Desktop | 1440px | Full horizontal navigation; 100px section spacing. |

## Imagery & decoration
Redbird uses dark-themed product screenshots with glowing UI elements that mirror the `--red` brand color. Backgrounds often feature subtle gradients or "glows" behind text to maintain legibility on dark surfaces.

## Do's
- Use `#e02f4a` for the primary "Get Started" or "Start Building" actions.
- Set all H1 and H2 titles to `Inter` weight 800.
- Apply the `glow` shadow to primary red buttons on dark backgrounds.
- Use `#ede8e0` for large content-heavy sections like testimonials to provide visual relief.
- Maintain a 1px border on cards using `#b0bad0` or low-opacity white.

## Don'ts
- **Wrong:** Using `#ff6600` (Accent Orange) as a primary button background.
  **Right:** Use `#e02f4a`.
  **Reason:** Orange is reserved for secondary feature badges and highlights.
- **Wrong:** Setting display text with positive letter spacing.
  **Right:** Use negative tracking (e.g., -1.344px) for sizes above 32px.
- **Wrong:** Using pure black `#000000` for the main background.
  **Right:** Use the navy foundation `#0c0c0e`.

## Similar brands
- Vercel (High-contrast, monochrome with red accents)
- Linear (Dark mode enterprise, structured cards)
- Railway (Technical aesthetic, high-density type)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --red: #e02f4a;
  --navy: #0c0c0e;
  --navy-2: #ede8e0;
  --slate-light: #b0bad0;
  --white-pure: #ffffff;
  --glow-shadow: 0px 4px 24px 0px rgba(224, 47, 74, 0.35);
  --font-main: 'Inter', sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using Redbird's brand red #e02f4a, 10px border radius, and the signature 24px red glow shadow."
- "Generate a hero section with a #0c0c0e background and an H1 headline in Inter 800 with -2px letter spacing."
- "Design a feature card with a 1px border in #b0bad0 and a corner radius of 16px."

## Known gaps
- Hover and active states for secondary buttons were not fully captured in the automated crawl.
- Specific mobile-only typography tokens (e.g., H3 scaling) were inferred from rendered styles rather than explicit tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://redbird.io | 1440px | 2026-06-06 |
| About | https://redbird.io/about | 1440px | 2026-06-06 |
| Mobile Home | https://redbird.io | 390px | 2026-06-06 |