# Juicebox Design System

> A high-contrast recruitment canvas pairing deep royal purple accents with geometric grid patterns and sharp, functional typography.

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

## TL;DR
Juicebox utilizes a monochrome foundation of pure whites (#ffffff) and deep charcoals (#1d161d) punctuated by a singular, high-voltage primary purple (#6a2f8d). The visual language is defined by technical precision, using geometric diamond-grid overlays and monospace annotations to signal its AI-driven nature. Typography is anchored by Roobert Medium for display, providing a friendly but professional geometric serif feel, while Haas Grot Text handles the heavy lifting of UI and body content. Components are characterized by sharp 0px or tight 4px radii, maintaining a "pro-tool" aesthetic that avoids the soft pill-shapes of consumer social apps.

## Signature DNA
1. **The Diamond Grid Overlay** (A recurring geometric pattern used as a background texture in hero sections and feature blocks to visualize the "AI search" network, seen on homepage and pricing).
2. **Monospace Metadata** (The use of DM Mono at 13px-15px for section labels like `[01] FEATURES` and technical tags, grounding the brand in a data-centric aesthetic).
3. **Primary Purple Accents** (The specific use of #6a2f8d for primary CTAs and active states against a stark white or light gray #f8f6f8 background).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background and card surface | 161 | 1 | Computed style |
| `{color.ink.primary}` | `#1d161d` | Main headings and primary body text | 176 | 0.8 | Computed style |
| `{color.ink.secondary}` | `#574e57` | Secondary body and descriptive text | 108 | 0.8 | Computed style |
| `{color.surface.soft}` | `#f8f6f8` | Alternating section backgrounds and toggle states | 42 | 1 | Computed style |
| `{color.surface.muted}` | `#eeecee` | UI element backgrounds and hover states | 90 | 1 | Computed style |
| `{color.border.default}` | `#786c78` | Form borders and subtle dividers | 8 | 0.6 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.brand.primary}` | `#6a2f8d` | Primary CTA background, links, and active UI tracks | 18 | 1 | `--osano-link-color` |
| `{color.brand.secondary}` | `#9b51e0` | Secondary accent for badges and illustrative surfaces | 6 | 0.6 | Computed style |
| `{color.accent.green}` | `#2f8d6e` | Success indicators and "AI" highlighted text | 11 | 0.8 | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Roobert Medium | 500 | Display / Headlines | Outfit | Proprietary |
| Haas Grot Text Web | 400, 700 | UI / Body / Subheads | Inter | Proprietary |
| DM Mono | 500 | Metadata / Labels | JetBrains Mono | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xl}` | 64px | 64px | -2.56px | 500 | Main Hero H1 | `h1.framer-text` |
| `{type.display.lg}` | 48px | 48px | -0.96px | 500 | Section Headlines | `h2.framer-text` |
| `{type.display.md}` | 40px | 46px | -0.8px | 500 | Sub-section Heroes | `h3.framer-text` |
| `{type.heading.md}` | 28px | 35px | -0.56px | 500 | Feature Titles | `h3.framer-text` |
| `{type.body.lg}` | 20px | 25px | -0.2px | 400 | Intro Paragraphs | `p.framer-text` |
| `{type.body.md}` | 16px | 20px | -0.16px | 400 | Default Body | `p.framer-styles-preset-w3ho57` |
| `{type.mono.label}` | 15px | 15px | 0.3px | 500 | Technical Annotations | `p.framer-text` |
| `{type.body.sm}` | 14px | 18px | -0.14px | 400 | Small UI Text | `p.framer-styles-preset-5qgv6i` |

### Principles
1. **Tight Display Tracking:** Display sizes (40px+) use aggressive negative letter-spacing (-0.8px to -2.56px) for a compact, editorial look.
2. **Monospace Bracketing:** Section labels are always prefixed with numbers and wrapped in technical styling (e.g., `[01] FEATURES`).
3. **High Contrast Hierarchy:** Headlines are almost always pure black (#000000) or deep charcoal (#1d161d) on white for maximum legibility.

## Spacing
**Base unit:** 4px
Table: | Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 40 |
| `{space.sm}` | 12px | 18 |
| `{space.md}` | 16px | 26 |
| `{space.lg}` | 24px | 3 |
| `{space.xl}` | 32px | 14 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, primary buttons | 685 occurrences |
| `{radius.sm}` | 2px | Pricing cards, input fields | 140 occurrences |
| `{radius.md}` | 4px | Feature cards, secondary buttons | 40 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | None | Default page sections | Canvas |
| Inset | `rgba(0, 0, 0, 0.5) 0px 0px 12px 0px inset` | Dark feature cards | Pricing page cards |
| Floating | `rgba(79, 57, 34, 0.12) 0px 2px 4px 0px...` | Pricing tier cards | Pricing page |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Try for Free")
**Pages observed:** Homepage, Pricing
**Spec:** Background: `{color.brand.primary}` (#6a2f8d) | Text: `{color.canvas}` (#ffffff) | Radius: 0px | Padding: 12px 24px
**States observed:** Default | Hover: `{color.brand.primary}` (darkened) | Focus: Captured | Active: Captured

#### Secondary Button (Outline)
**Role:** Alternative actions (e.g., "Book a Demo")
**Pages observed:** Homepage, Pricing
**Spec:** Background: Transparent | Text: `{color.ink.primary}` (#1d161d) | Border: 1px solid `{color.ink.primary}` | Radius: 0px
**States observed:** Default | Hover: Captured | Active: Captured

### Tier 2: Patterns

#### Feature Card (Dark)
**Role:** Highlighting specific AI capabilities
**Pages observed:** Homepage
**Spec:** Background: `#2a232a` | Radius: 4px | Padding: 13px 14px | Shadow: Inset `#000000` (0.5 opacity)
**States observed:** Default

#### Pricing Tier Card
**Role:** Subscription plan display
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` | Radius: 2px | Border: 1px solid `{color.surface.muted}` | Shadow: `rgba(79, 57, 34, 0.12) 0px 2px 4px`
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Section Label (Mono)
**Role:** Structural navigation within the page
**Pages observed:** Homepage
**Spec:** Typography: `{type.mono.label}` (15px) | Text: `{color.brand.primary}` (#6a2f8d) | Case: Uppercase
**States observed:** Default

#### Integration Tile
**Role:** Displaying partner logos (Bullhorn, Gmail, etc.)
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` | Border: 1px solid `#eeecee` | Radius: 0px | Aspect Ratio: 1:1
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding (Vertical) | 80px - 120px |
| Grid Gutter | 24px |

## Imagery & decoration
- **Geometric Patterns:** Uses diamond and isometric grids in purple and gray to represent data structures.
- **Logos:** Grayscale partner logos (Patreon, Linear) to maintain brand neutrality.
- **Avoidance:** Avoids rounded "blob" shapes, organic illustrations, or warm-toned photography.

## Do's
- Use `#6a2f8d` for all primary interactive elements.
- Apply negative letter-spacing to all headlines above 32px.
- Use `DM Mono` for all technical metadata and section numbering.
- Maintain sharp 0px corners on primary CTAs.
- Use `#f8f6f8` for large alternating background bands to reduce starkness.

## Don'ts
- **Wrong:** Using a pill-shaped (9999px) radius for buttons. **Right:** Use 0px or 4px. **Reason:** Brand identity is geometric and technical, not soft.
- **Wrong:** Labeling sub-brand colors as the parent primary. **Right:** Only `#6a2f8d` is the parent primary.
- **Wrong:** Using Roobert for long-form body text. **Right:** Use Haas Grot Text. **Reason:** Legibility at small scales.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --juicebox-purple: #6a2f8d;
  --juicebox-black: #1d161d;
  --juicebox-white: #ffffff;
  --juicebox-gray-soft: #f8f6f8;
  --font-display: "Roobert Medium", sans-serif;
  --font-mono: "DM Mono", monospace;
}
```

## Agent prompt examples
- "Create a hero section with a #6a2f8d primary button (0px radius) and a background diamond grid pattern using #eeecee lines."
- "Design a feature card using a #2a232a background, 4px border radius, and 15px DM Mono labels for metadata."
- "Generate a pricing table with 2px rounded corners and a subtle drop shadow: rgba(79, 57, 34, 0.12) 0px 2px 4px."

## Known gaps
- Hover states for secondary navigation items were not explicitly captured in the token evidence.
- Mobile-specific breakpoint transitions for the diamond grid density were not fully documented.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://juicebox.ai | 1440px | 2026-06-06 |
| Pricing | https://juicebox.ai/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://juicebox.ai | 390px | 2026-06-06 |