# Readyset Design System

> High-contrast technical canvas where deep obsidian surfaces meet vibrant ultraviolet accents and geometric precision.

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

## TL;DR
Readyset utilizes a "Dark Mode by Default" aesthetic, anchoring its identity on a near-black foundation (#0a0a0a) and a warm off-white canvas (#ededec). The system is defined by a high-voltage ultraviolet accent (#bf7af0) used for critical text and interactive highlights. Typography relies on the geometric personality of **Lufga** for headings and the technical rigor of **IBM Plex Mono** for data-heavy annotations. Components feature generous 20px corner radii on cards and sharp 0px or 8px radii on functional controls, creating a balance between approachable modernism and industrial reliability.

## Signature DNA
1. **Ultraviolet Technicality:** The use of #bf7af0 (Ultraviolet) against dark backgrounds to signal performance and "caching" states (observed on Homepage and Pricing).
2. **Geometric Card Containers:** Large 20px rounded cards (`{radii.card}`) that often feature subtle 1px borders (#161615) to define structure without heavy shadows.
3. **Mono-Annotated UI:** Frequent use of IBM Plex Mono at 14px for technical labels and code-like snippets, reinforcing the developer-tool pedigree.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.canvas}` | `#ededec` | Primary light surface / Page text | 155 | 1 | `css_variable:--hXzpnn` |
| `{colors.obsidian}` | `#0a0a0a` | Primary dark surface | 51 | 1 | `css_variable:--iMwVcB` |
| `{colors.ink}` | `#000000` | Absolute black text | 161 | 1 | `css_variable:--jgwOEb` |
| `{colors.border}` | `#161615` | Default card/button border | 68 | 1 | `css_variable:--gFnHnn` |
| `{colors.muted}` | `#7f7e77` | Secondary body text | 50 | 1 | `css_variable:--dPmzLY` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.primary}` | `#bf7af0` | Ultraviolet accent text / highlights | 21 | 1 | `css_variable:--cRxJLP` |
| `{colors.primary-bold}` | `#b52afb` | Surface background accent | 9 | 1 | `css_variable:--erlado` |
| `{colors.primary-deep}` | `#8e4ec6` | Button / Surface background | 3 | 1 | `css_variable:--dgTJHj` |
| `{colors.orange}` | `#ff8b3e` | Decorative accent text | 10 | 1 | `css_variable:--hbQCnM` |
| `{colors.blue}` | `#3e63dd` | Decorative surface (decorative_only) | 2 | 1 | `css_variable:--gQuXRv` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|---------|
| Lufga | 400, 500 | Display, Headings, UI | Montserrat | Licensed |
| IBM Plex Mono | 400 | Technical annotations, Code | IBM Plex Mono | OFL |
| ui-sans-serif | 400 | System fallback body | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 48px | 57.6px | normal | 500 | Hero H1 | `h1.ypMFF.ceHGqA` |
| `{type.display-lg}` | 40px | 48px | normal | 500 | Section Headings | `p.ypMFF.oWIXe` |
| `{type.heading-sm}` | 20px | 28px | normal | 500 | Card Titles | `p.ypMFF.bsSBze` |
| `{type.mono-sm}` | 20px | 20px | -0.5px | 400 | Technical Headings | `p.ypMFF.kcJLgB` |
| `{type.subheading}` | 18px | 24px | normal | 500 | Subsection heads | `h2.ypMFF.jfdGQN` |
| `{type.body}` | 17px | 24px | normal | 500 | Lead paragraphs | `p.ypMFF.fcclvA` |
| `{type.body-base}` | 16px | 24px | normal | 400 | Default running text | `section.fzoqjw.cxIcSm` |
| `{type.body-sm}` | 15px | 24px | normal | 400 | Footer / Small text | `p.ypMFF.fkrgYi` |
| `{type.button}` | 14px | 24px | -0.21px | 500 | Button labels | `button.fPSBzf.bYPznK` |
| `{type.mono-xs}` | 14px | 20px | -0.35px | 400 | Code snippets | `span.token.keyword` |

### Principles
1. **Heading Geometry:** Lufga is used for all brand-facing copy, favoring a weight of 500 for clarity.
2. **Technical Contrast:** IBM Plex Mono is never used for prose; it is strictly reserved for data, code, or technical metrics.
3. **Tight Button Tracking:** Buttons use a negative letter-spacing (-0.21px) to maintain a compact, "tool-like" feel.

## Spacing
**Base unit:** 8px
Table: | Token | Value | Occurrences |
|---|---|---|
| `{space.xxs}` | 2px | 4 |
| `{space.sm}` | 12px | 18 |
| `{space.md}` | 16px | 30 |
| `{space.lg}` | 24px | 7 |
| `{space.section}` | 80px | 9 |
| `{space.hero}` | 160px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|------|----------|
| `{radii.sharp}` | 0px | Section containers | 308 occurrences |
| `{radii.control}` | 8px | Buttons, inputs | 32 occurrences |
| `{radii.card}` | 20px | Feature cards, pricing tiers | 45 occurrences |
| `{radii.pill}` | 9999px | Badges, tags | 30 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|------|----------|
| `{shadow.deep}` | `0 48px 80px rgba(0,0,0,0.05)` | Floating product cards | Homepage feature section |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call to action
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `{colors.border}` (#161615) / Text `{colors.canvas}` (#ededec) / Radius `{radii.control}` (8px) / Typography `{type.button}` (14px)
**States observed:** Default | Hover: captured

#### Rounded Button (Secondary)
**Role:** Secondary actions / Ghost buttons
**Pages observed:** Homepage, Pricing
**Spec:** Background `#f3f3f2` / Text `#1b1b18` / Radius `{radii.control}` (8px) / Typography `{type.button}` (14px)
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Pill Badge
**Role:** Status indicators and category tags
**Pages observed:** Homepage, Pricing
**Spec:** Background `transparent` / Text `{colors.ink}` (#000000) / Border 1px `{colors.ink}` / Radius `{radii.pill}` (9999px)
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Feature Card (Dark)
**Role:** Primary content container on dark sections
**Pages observed:** Homepage, Pricing
**Spec:** Background `rgba(10, 10, 10, 0.9)` / Border 1px `{colors.border}` (#161615) / Radius `{radii.card}` (20px) / Padding 24px
**States observed:** Default: captured

#### Pricing Card (Accent)
**Role:** Highlighted pricing tier
**Pages observed:** Pricing
**Spec:** Background `{colors.blue}` (#3e63dd) / Text `{colors.ink}` (#000000) / Radius `{radii.control}` (8px)
**States observed:** Default: captured

#### Code Block
**Role:** Technical implementation examples
**Pages observed:** Homepage
**Spec:** Background `{colors.obsidian}` (#0a0a0a) / Text `{colors.canvas}` (#ededec) / Font `IBM Plex Mono` / Radius `{radii.card}` (20px)
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding | 80px |
| Hero Padding | 160px |
| Grid Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked cards, 160px hero padding reduced to 80px |
| Desktop | 1440px | Multi-column grids (3-up for features) |

## Imagery & decoration
Readyset uses abstract technical diagrams (circuitry-inspired lines) and high-contrast photography. It avoids soft gradients, opting instead for solid blocks of ultraviolet (#bf7af0) or orange (#ff8b3e) to highlight data points.

## Do's
- Use `#bf7af0` for text that represents "cached" or "accelerated" states.
- Apply `{radii.card}` (20px) to all main content containers.
- Pair Lufga headings with IBM Plex Mono for technical sub-labels.
- Maintain high contrast by placing `#ededec` text on `#0a0a0a` backgrounds.
- Use 80px vertical spacing between major homepage sections.

## Don'ts
- **Wrong:** Using `#3e63dd` (Blue) as a primary action color.
- **Right:** Use `#161615` (Dark Border) for primary buttons.
- **Reason:** Blue is a decorative/secondary accent in the Readyset system, not a brand primary.
- Do not use serif fonts; the brand is strictly geometric sans and mono.
- Do not use soft shadows on cards; use 1px borders (#161615) for definition.

## Similar brands
- Vercel (Dark mode, mono accents)
- Railway (Technical, high-contrast)
- Supabase (Developer-first, structured cards)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-canvas: #ededec;
  --color-obsidian: #0a0a0a;
  --color-primary: #bf7af0;
  --color-border: #161615;
  --font-main: 'Lufga', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --radius-card: 20px;
  --radius-control: 8px;
}
```

## Agent prompt examples
- "Create a feature card using a #0a0a0a background, a 1px #161615 border, and 20px corner radius. Use Lufga 500 for the title."
- "Generate a primary button with an 8px radius, #161615 background, and #ededec text using 14px Lufga with -0.21px letter spacing."
- "Design a technical stat block using IBM Plex Mono for the value in #bf7af0 and Lufga for the label in #7f7e77."

## Known gaps
- Hover and Active states for the ultraviolet surface background (#b52afb) were not explicitly captured in the CSS variables.
- Mobile-specific font scaling for display sizes was inferred from viewport renders but not found in explicit tokens.

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