# Rsvp Design System

> High-contrast enterprise blue anchored by deep navy foundations and generous white space.

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

## TL;DR
Rsvp utilizes a "monochrome plus one" system where a vibrant Royal Blue (#2e54eb) serves as the singular driver for all interactive and brand signals. The canvas is predominantly pure white (#ffffff), punctuated by a deep Navy (#001529) footer that provides a heavy structural anchor. Typography is strictly system-based (-apple-system), favoring legibility and speed over custom brand fonts. Geometry is defined by extreme pill-shaped rounding (25px to 50px) for buttons and feature cards, creating a soft, approachable layer over an otherwise rigid enterprise grid.

## Signature DNA
1. **The Royal Blue Pivot** (#2e54eb) acts as the exclusive signal for action, used for primary button backgrounds, text links, and the "wave" shadow tokens.
2. **Heavy Navy Anchoring** (#001529) is used for the global footer and high-contrast sections, creating a professional "Enterprise AI" weight that balances the bright primary blue.
3. **Pill-Radius Geometry** (25px/50px) is applied to all interactive elements and decorative containers, contrasting against the sharp 0px edges of the main layout sections.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background, primary surface | 52 | 1.0 | Computed Style |
| `{color.ink.primary}` | `#000000` | Primary body text, borders | 105 | 0.8 | Computed Style |
| `{color.ink.muted}` | `#999999` | Secondary text, descriptions | 60 | 0.8 | Computed Style |
| `{color.ink.disabled}` | `#cccccc` | Tertiary text, placeholders | 12 | 0.8 | Computed Style |
| `{color.surface.soft}` | `#eeeeee` | Section backgrounds, card fills | 15 | 1.0 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.brand.primary}` | `#2e54eb` | Primary CTA, active states, links | 18 | 1.0 | `--antd-wave-shadow-color` |
| `{color.brand.deep}` | `#001529` | Footer background, high-contrast surfaces | 3 | 0.6 | Computed Style |
| `{color.brand.tint}` | `#f3f6ff` | Subtle highlight surfaces | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| `-apple-system` | 300, 400, 500 | All roles (Display, Body, UI) | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display}` | 48px | 75.43px | normal | 400 | Hero title | `div.banner_home-title` |
| `{text.h2}` | 21px | 33.00px | normal | 500 | Logo/Section heads | `h2.logo` |
| `{text.h3}` | 20px | 29.00px | normal | 300 | Contact titles | `div.contact-wrapper-title` |
| `{text.body.lg}` | 18px | 28.28px | normal | 400 | Hero subtext | `div.banner_home-content` |
| `{text.body}` | 16px | 25.14px | normal | 400 | Primary buttons | `button.ant-btn-primary` |
| `{text.body.sm}` | 14px | 22.00px | normal | 400 | Menu items, footer | `li.ant-menu-item` |
| `{text.body.xs}` | 14px | 62.00px | normal | 400 | Nav links | `li.ant-menu-overflow-item` |
| `{text.caption}` | 12px | 18.85px | normal | 400 | Block titles | `div.fo-block-title` |

### Principles
1. **System-First Rendering:** No custom web fonts are loaded; the brand relies on the user's native system stack for maximum performance.
2. **Lightweight Headers:** Large display type (48px) uses a standard 400 weight rather than bold, maintaining a clean, technical feel.
3. **Vertical Rhythm:** Line heights are generous, often exceeding 1.5x the font size (e.g., 14px/22px) to ensure readability in dense technical descriptions.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 19 |
| `{space.sm}` | 8px | 15 |
| `{space.md}` | 12px | 20 |
| `{space.lg}` | 20px | 30 |
| `{space.xl}` | 24px | 23 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Main sections, layout containers | 192 occurrences |
| `{radius.sm}` | 4px | Form inputs, small cards | 6 occurrences |
| `{radius.pill}` | 25px | Primary Buttons | Rounded Button component |
| `{radius.max}` | 50px | Decorative feature cards | Card component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.3) 1px 0px 8px 3px` | Floating UI cards | Card component |
| `{shadow.button}` | `rgba(0, 0, 0, 0.043) 0px 2px 0px 0px` | Primary CTA depth | Rounded Button component |
| `{shadow.soft}` | `rgba(0, 0, 0, 0.03) 0px 5px 20px 0px` | Floating side nav | observed_once |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary actions
**Pages observed:** All
**Spec:** Background `#2e54eb` | Text `#ffffff` | Border `1px solid #2e54eb` | Radius `25px` | Padding `0px 24px` | Typography `14px/400`
**States observed:** Default | Active: captured

### Tier 2: Patterns
#### Feature Card
**Role:** Highlighting core platform advantages
**Pages observed:** All
**Spec:** Background `#eeeeee` | Text `#000000 (0.85 opacity)` | Border `0px` | Radius `50px` | Shadow `none`
**States observed:** Default: captured

#### Floating Contact Bar
**Role:** Persistent conversion utility
**Pages observed:** All
**Spec:** Background `#ffffff` | Radius `4px` | Shadow `rgba(0, 0, 0, 0.3) 1px 0px 8px 3px` | Padding `4px`
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Navy Footer
**Role:** Global navigation and legal
**Pages observed:** All
**Spec:** Background `#001529` | Text `#999999` | Typography `14px/400` | Radius `0px`
**States observed:** Default: captured

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

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Hero title scales to viewport; Floating bar remains fixed. |

## Do's
- Use `#2e54eb` for all primary user actions.
- Maintain a 50px radius on large feature cards to preserve brand softness.
- Use `#001529` for footer and high-contrast section backgrounds only.
- Keep display typography at weight 400.
- Ensure all body text uses the system font stack.

## Don'ts
- **Wrong:** Using a custom serif for headlines. **Right:** Use `-apple-system`. **Reason:** Brand identity is tied to technical speed and system-native rendering.
- **Wrong:** Applying 50px radius to small buttons. **Right:** Use 25px radius. **Reason:** Small components lose internal balance at extreme radii.
- **Wrong:** Using pure black `#000000` for footer backgrounds. **Right:** Use Navy `#001529`. **Reason:** Pure black breaks the brand's professional enterprise palette.

## Similar brands
- Ant Design (System foundation)
- Baidu Cloud
- Huawei Cloud
- Tencent Cloud

## Quick start

```css
/* CSS Variables */
:root {
  --rsvp-primary: #2e54eb;
  --rsvp-navy: #001529;
  --rsvp-white: #ffffff;
  --rsvp-gray-light: #eeeeee;
  --rsvp-text-main: #000000;
  --rsvp-radius-pill: 25px;
  --rsvp-radius-card: 50px;
}
```

## Known gaps
- Hover states for primary buttons were not explicitly captured in the token evidence.
- Specific mobile breakpoint values (e.g., 768px vs 1024px) were not in the provided CSS evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://rsvp.ai | 1440px | 2026-06-06 |
| Pricing | https://rsvp.ai/pricing | 1440px | 2026-06-06 |
| About | https://rsvp.ai/about | 1440px | 2026-06-06 |