# Rbux Design System

> A utilitarian gray canvas punctuated by high-voltage red-orange actions and heavy display typography.

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

## TL;DR
Rbux utilizes a "monochrome-plus-one" strategy where a neutral foundation of grays (#7e8286, #777777) and light surfaces (#f8f8f8) is disrupted by a single, high-contrast primary red (#de3618). The system relies on SF Pro Display for its typographic heavy lifting, specifically utilizing a signature weight of 300 for massive 128px display moments while shifting to 600 and 800 for structural emphasis. Component geometry is strictly functional, favoring 4px radii for interactive elements and sharp 0px edges for layout containers.

## Signature DNA
1. **The 128px Display Anchor** (SF Pro Display at weight 300 or 800, used at 128px for hero/error states across rbux.com and rbux.com/about).
2. **High-Voltage Red-Orange CTAs** (#de3618 used exclusively for primary buttons and critical borders to pull focus from the gray canvas).
3. **Achromatic Foundation** (The use of #7e8286 and #777777 for nearly all non-interactive text, creating a low-contrast environment that makes primary actions pop).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#f8f8f8` | Surface background | 3 | 0.6 | computed_style |
| `{color.text.muted}` | `#7e8286` | Primary body text | 21 | 0.8 | computed_style |
| `{color.text.secondary}` | `#777777` | Secondary body text | 18 | 0.8 | computed_style |
| `{color.border.default}` | `#dddddd` | Standard dividers/borders | 3 | 0.6 | computed_style |
| `{color.white}` | `#ffffff` | Button text, high-contrast text | 6 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#de3618` | Primary button BG, brand borders | 6 | 0.6 | computed_style |
| `{color.accent.slate}` | `#3e4e57` | Decorative text | 6 | 0.6 | computed_style |
| `{color.accent.red}` | `#ff4338` | Decorative text (decorative_only) | 3 | 0.6 | computed_style |
| `{color.accent.orange}` | `#ff8700` | Decorative text (decorative_only) | 3 | 0.6 | computed_style |
| `{color.accent.blue}` | `#1e88e5` | Decorative text (decorative_only) | 3 | 0.6 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| SF Pro Display | 300, 400, 600, 800 | Heading, Display, UI | Inter | Proprietary |
| rBUXLogo | 300 | Brand Display | N/A | Custom |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 128px | 128px | -1.92px | 300 | Error titles | `h1.error-title` |
| `{type.display.logo}` | 128px | 128px | -1.92px | 300 | Brand logo font | `span.rBUXLogoFont` |
| `{type.display.heavy}` | 128px | 128px | -1.92px | 800 | Emphasis display | `span:nth-of-type(2)` |
| `{type.h5}` | 16px | 24px | -0.24px | 600 | Subheadings | `h5` |
| `{type.button}` | 14px | 20px | normal | 400 | Primary CTAs | `a.btn.btn-danger` |
| `{type.body.sm}` | 14px | 20px | normal | 400 | Small body text | `a.btn.btn-danger` |
| `{type.nav.link}` | 14px | 20px | normal | 400 | Footer links | `footer a` |
| `{type.caption}` | 12px | 18px | normal | 400 | Legal/Copyright | `footer .copyright` |

### Principles
1. **Display weight contrast:** Large display text (128px) alternates between ultra-light (300) and ultra-heavy (800).
2. **Negative tracking on display:** All text above 32px uses -1.5% to -2% letter spacing.
3. **Functional UI weight:** Interactive elements (buttons) maintain a standard 400 weight for legibility at small sizes.

## Spacing
**Base unit:** Custom
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 6px | 3 |
| `{space.sm}` | 10px | 3 |
| `{space.md}` | 12px | 3 |
| `{space.base}` | 15px | 15 |
| `{space.lg}` | 20px | 12 |
| `{space.xl}` | 40px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Layout containers, surfaces | 57 occurrences |
| `{radius.sm}` | 4px | Buttons, inputs | 3 occurrences |

## Elevation
Not captured in source (System uses flat design with 1px borders).

## Components
### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site actions and navigation
**Pages observed:** rbux.com, rbux.com/pricing, rbux.com/about
**Spec:** Background `#de3618` | Text `#ffffff` | Border `1px solid #de3618` | Radius `4px` | Padding `6px 12px` | Typography `14px/400`
**States observed:** Default: captured | Hover: not captured | Active: not captured

#### Surface
**Role:** Content grouping and sectioning
**Pages observed:** rbux.com, rbux.com/pricing, rbux.com/about
**Spec:** Background `#f8f8f8` | Text `#7e8286` | Border `1px solid #dddddd` | Radius `0px` | Padding `0px 20px`
**States observed:** Default: captured

### Tier 2: Patterns
Not captured in source.

### Tier 3: Surface-specific
Not captured in source.

## Layout
| Property | Value |
|----------|-------|
| Page Max-Width | 1140px (estimated from container) |
| Section Padding | 40px |
| Element Gap | 15px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Display font size remains 128px (overflow handled by wrapping) |

## Imagery & decoration
The brand uses 3D-effect typography for its primary logo ("rBAD!"), featuring heavy drop shadows and inner bevels. UI elements are strictly flat.

## Do's
1. Use `#de3618` for all primary user actions.
2. Set display headings at 128px with `{type.display.mega}`.
3. Use `#7e8286` for standard body copy to maintain the brand's gray canvas.
4. Apply `{radius.sm}` (4px) to all interactive elements.
5. Maintain a 15px base unit for internal component spacing.

## Don'ts
1. Do not use `#3e4e57` for primary buttons; this is a decorative accent only.
2. Do not round layout containers; keep surfaces at `{radius.none}`.
3. Do not use bold weights for 128px headings unless specifically emphasizing a single word.
4. Do not use pure black (#000000) for text; use `#7e8286`.
5. Do not mix sub-brand colors (if they existed) with the parent primary `#de3618`.

## Similar brands
- Craigslist (utilitarian layout)
- GitHub (monochrome foundation with primary accents)
- Wikipedia (type-first, gray-heavy interface)

## Quick start

```css
:root {
  --rbux-primary: #de3618;
  --rbux-canvas: #f8f8f8;
  --rbux-text-main: #7e8286;
  --rbux-text-secondary: #777777;
  --rbux-border: #dddddd;
  --rbux-radius-interactive: 4px;
  --rbux-font-display: "SF Pro Display", sans-serif;
}
```

## Agent prompt examples
- "Create a primary button using #de3618 background, white text, and a 4px border radius."
- "Design a hero section with a 128px heading in SF Pro Display weight 300 and a gray #f8f8f8 background."
- "Generate a content card with a 1px #dddddd border and 0px border radius."

## Known gaps
- Hover and active states for buttons were not captured in the static analysis.
- Mobile-specific typography scaling for the 128px display size was not observed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Home | https://rbux.com | 1440x900 | 2026-06-06 |
| Pricing | https://rbux.com/pricing | 1440x900 | 2026-06-06 |
| About | https://rbux.com/about | 390x844 | 2026-06-06 |