# Rapidclaims Design System

> High-contrast medical intelligence anchored by deep obsidian canvases, Montserrat display typography, and a dual-accent system of surgical orange and clinical purple.

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

## TL;DR
Rapidclaims utilizes a high-density, dark-mode aesthetic to signal technical authority in healthcare AI. The system is built on a foundation of pure black (#000000) and deep navy (#050d22) surfaces, contrasted against white (#ffffff) and light gray (#f4f4f4) typography. Brand "voltage" is delivered through two distinct primary accents: a high-visibility orange (#f33728) used for urgent CTAs and a deep purple (#7828c8) used for product-specific actions and secondary highlights. Typography is strictly sans-serif, pairing Montserrat for massive display headers (up to 100px) with Inter for functional UI and body text.

## Signature DNA
1. **The Deep Canvas** (The use of #050d22 and #000000 as primary section backgrounds creates a "command center" atmosphere, observed on the main hero and feature sections of rapidclaims.ai)
2. **Dual-Accent CTAs** (The system alternates between Orange #f33728 and Purple #7828c8 to differentiate between global "Request a Demo" actions and specific product features like RapidCode™)
3. **Oversized Montserrat Display** (Headlines are frequently pushed to 80px and 100px with tight -0.6px letter spacing, creating a bold, "billboard" hierarchy on desktop viewports)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas.dark}` | `#000000` | Primary page background / Hero surface | 52 | 0.8 | Computed Style |
| `{color.canvas.navy}` | `#050d22` | Secondary dark surface / Card backgrounds | 8 | 0.6 | Computed Style |
| `{color.text.primary}` | `#ffffff` | Primary text on dark surfaces | 119 | 1.0 | `--white` |
| `{color.text.muted}` | `#333333` | Secondary text on light surfaces | 65 | 0.8 | Computed Style |
| `{color.border.light}` | `#ebebeb` | Subtle dividers and surface outlines | 8 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.orange}` | `#f33728` | Primary CTA background / Urgent highlights | 8 | 1.0 | `--rc_orange` |
| `{color.accent.purple}` | `#7828c8` | Secondary CTA background / Product branding | 10 | 0.6 | Computed Style |
| `{color.accent.blue}` | `#adcffd` | Decorative text / Sub-labels (decorative_only) | 5 | 0.6 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 400, 500, 600, 700 | Display & Headlines | Montserrat (Google Fonts) | OFL |
| Inter | 400, 500, 600, 700 | Body, UI, Navigation | Inter (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.mega}` | 100px | 100px | -0.6px | 600 | Hero Display | `h3.h3_100px` |
| `{type.display.xl}` | 80px | 80px | -0.6px | 500 | Section Headers | `h2.h2_80px` |
| `{type.heading.lg}` | 38px | 49.4px | normal | 700 | Standard Heading | `h2.h2` |
| `{type.heading.md}` | 36px | 46.8px | -0.6px | 500 | Sub-section Head | `h3.h3_36px` |
| `{type.body.lg}` | 18px | 23.4px | -0.6px | 400 | Lead Paragraphs | `p.para_18px` |
| `{type.body.md}` | 16px | 22.4px | normal | 400 | Default Body | `p.para_16px` |
| `{type.ui.label}` | 14px | 14px | -0.6px | 700 | Button Labels | `a.demo_button` |
| `{type.caption}` | 12px | 12px | -0.6px | 700 | Dropdown/Small UI | `div#w-dropdown-toggle-0` |

### Principles
1. **Tight Display Tracking:** All Montserrat display sizes (20px to 100px) utilize a consistent -0.6px letter spacing to maintain a compact, modern feel.
2. **High Contrast Ratios:** Text is almost exclusively pure white (#ffffff) on dark backgrounds or dark gray (#333333) on white backgrounds.
3. **Weight-Based Hierarchy:** Headlines use 500-700 weights to anchor the page, while body text stays at 400 for legibility.

## Spacing
**Base unit:** 4px (inferred)
Table: | Token | Value | Occurrences |
|---|---|---|---|
| `{space.xs}` | 10px | 19 |
| `{space.sm}` | 16px | 17 |
| `{space.md}` | 20px | 33 |
| `{space.lg}` | 32px | 8 |
| `{space.section}` | 80px | 7 |
| `{space.hero}` | 120px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default containers / sections | 246 occurrences |
| `{radius.sm}` | 4px | Small cards / inputs | `radius: 4px` |
| `{radius.md}` | 8px | Primary Buttons | `radius: 8px` |
| `{radius.lg}` | 10px | Feature Cards | `radius: 10px` |

## Elevation
Table: | Level | Value | Use | Evidence |
|---|---|---|---|---|
| Flat | none | All observed components | Component evidence |

## Components
### Tier 1: Foundational
#### Rounded Button (Primary)
**Role:** Global primary action (Request a Demo)
**Pages observed:** https://rapidclaims.ai
**Spec:** Background `{color.accent.orange}` (#f33728) / Text #ffffff / Radius 8px / Padding 12px 20px / Typography Inter 14px Bold.
**States observed:** Default | Hover: Not captured.

#### Rounded Button (Product)
**Role:** Product-specific CTAs (Learn More)
**Pages observed:** https://rapidclaims.ai
**Spec:** Background `{color.accent.purple}` (#7828c8) / Text #ffffff / Radius 8px / Padding 14px 20px / Typography Inter 14px Bold.
**States observed:** Default | Hover: Not captured.

### Tier 2: Patterns
#### Feature Card (Dark)
**Role:** Highlighting specific platform benefits
**Pages observed:** https://rapidclaims.ai
**Spec:** Background #050d22 / Border none / Radius 10px / Padding 24px / Text #ffffff.
**States observed:** Default | Hover: Not captured.

#### Bordered Card (Light)
**Role:** Secondary content grouping
**Pages observed:** https://rapidclaims.ai
**Spec:** Background #ffffff / Border 1px #e6e6e6 / Radius 0px / Padding 20px.
**States observed:** Default | Hover: Not captured.

### Tier 3: Surface-specific
#### Navigation Banner
**Role:** Top-level global navigation
**Pages observed:** https://rapidclaims.ai
**Spec:** Background transparent / Text #ffffff / Typography Inter 14px / Padding 12px 16px.
**States observed:** Default | Hover: Not captured.

#### ROI Card
**Role:** Quantitative result display
**Pages observed:** https://rapidclaims.ai
**Spec:** Background #000e1e / Border 1px #4e4b4b / Radius 10px / Padding 20px 10px 0px 15px.

## Layout
Table: | Property | Value |
|---|---|---|
| Max Width | 1200px (approx) |
| Section Gap | 80px - 120px |
| Card Padding | 20px - 24px |

## Responsive
Table: | Breakpoint | Width | Key changes |
|---|---|---|---|
| Mobile | 390px | Stacked layouts, reduced display type sizes, full-width buttons |
| Desktop | 1440px | Multi-column grids, 100px display typography |

## Imagery & decoration
The brand uses abstract technical patterns (geometric line grids, connected node circles) and high-quality medical/office photography. It avoids illustrative or "cartoonish" elements, favoring a serious, data-driven aesthetic.

## Do's
- Use #f33728 for the primary "Request a Demo" action.
- Set Montserrat headlines with -0.6px letter spacing.
- Anchor large content blocks on #050d22 backgrounds.
- Use 8px border radius for all interactive button elements.
- Maintain white text (#ffffff) on all dark canvas sections.

## Don'ts
- **Wrong:** Using #7f56d9 (sub-brand purple) as the primary global CTA color. **Right:** Use #f33728 for global actions. **Reason:** Orange is the designated high-priority signal.
- Do not use Montserrat for long-form body text; use Inter.
- Avoid using shadows on cards; the system relies on flat colors and 1px borders.
- Do not use pure white backgrounds for hero sections; stick to the dark-mode foundation.

## Similar brands
- Scale AI
- Forward Health
- Palantir
- Cloudflare

## Quick start
```css
/* CSS Variables */
:root {
  --rc-orange: #f33728;
  --rc-purple: #7828c8;
  --rc-navy: #050d22;
  --rc-black: #000000;
  --rc-white: #ffffff;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
}
```

## Agent prompt examples
- "Generate a hero section with a #000000 background, a 100px Montserrat headline in white, and a primary button using #f33728 with an 8px radius."
- "Create a 3-column feature grid using #050d22 cards, 10px corner radius, and Inter 16px body text."
- "Design a navigation bar with a transparent background, white Inter 14px links, and an orange #f33728 'Request a Demo' button."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed styles.
- Shadow tokens were not detected in the analyzed pages.
- Mobile-specific typography scaling for the 100px display size was not fully mapped.

## Provenance
Table: | Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://rapidclaims.ai | Desktop 1440px | 2026-06-06 |
| Homepage Mobile | https://rapidclaims.ai | Mobile 390px | 2026-06-06 |