---
title: "Juicebox.ai design system"
variant: extended
source: https://juicebox.ai/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/juicebox-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Juicebox.ai · Design System

> Clean editorial structure, energized by vivid recruiting purple.

**Theme:** light · **Industry:** ai · **Source:** https://juicebox.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Juicebox presents its AI recruiting platform through a restrained white-and-ink interface punctuated by saturated purple product panels. Editorial typography, technical mono labels, and modular proof points make the long homepage feel organized and product-led.

## North star

Keep the interface editorial and mostly white, using purple only to frame product moments and guide attention.

## Overview

The page uses white as its dominant canvas, with near-black headings and muted gray copy creating a crisp, editorial reading experience. Purple is reserved for moments that need emphasis: the deep full-width product band, geometric product backdrops, small outlined announcement label, and soft violet textures near the hero edges. Rounded or softly colored surfaces stay limited, so the overall interface remains precise rather than playful. Roobert Medium gives large headings a compact, confident silhouette; Haas Grot Text carries readable body copy, while DM Mono supplies uppercase navigation and section labels with a technical recruiting-tool feel. The layout alternates centered introductions, broad visual demonstrations, split feature rows, and bordered logo or FAQ grids. Generous white intervals separate dense modules, while fine rules organize content without heavy card decoration. Interface imagery and geometric line work carry the visual story instead of lifestyle photography.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, hero background, and white areas around content and product demonstrations. |
| Muted Plum | `#574e57` | `--color-muted-plum` | neutral | Main muted text color for supporting copy and subdued interface details. |
| Mauve Rule | `#786c78` | `--color-mauve-rule` | neutral | Measured border color for fine separators and outlined interface elements. |
| Graphite Gray | `#3d3d3d` | `--color-graphite-gray` | neutral | Secondary gray text used for supporting copy and labels. |
| Ink Plum | `#1d161d` | `--color-ink-plum` | brand | Primary heading and text color against the bright page canvas. |
| Haze Gray | `#e7e4e7` | `--color-haze-gray` | semantic | Fine repeating-line texture and pale decorative section detail, not a core surface fill. |
| Juice Purple | `#61367d` | `--color-juice-purple` | brand | Prominent purple product panels and decorative geometric backdrops. |
| Linen Lilac | `#f8f6f8` | `--color-linen-lilac` | surface | Soft alternate section and card surface, visible in FAQ-style panels. |
| Violet Link | `#6a2f8d` | `--color-violet-link` | accent | Purple accent for links, labels, and selective section details. |
| Night Aubergine | `#3a194d` | `--color-night-aubergine` | brand | Upper stop of the deep purple gradient used in full-width dark product or closing bands. |
| Blackberry Dusk | `#261132` | `--color-blackberry-dusk` | brand | Lower stop of the deep purple gradient for saturated dark sections. |
| Ash Mauve | `#a89ea8` | `--color-ash-mauve` | neutral | Low-emphasis text and secondary decorative details. |
| Lilac Mist | `#e7deed` | `--color-lilac-mist` | semantic | Pale starting tone in a conic decorative gradient; not a primary interface surface. |
| Electric Violet | `#ad22ff` | `--color-electric-violet` | accent | Bright endpoint in a decorative gradient and occasional vivid illustration detail. |
| Button Charcoal | `#292329` | `--color-button-charcoal` | neutral | Near-black button and interface detail color, especially for compact primary actions. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f6f8` (Linen Lilac) · `--color-text` → `#1d161d` (Ink Plum) · `--color-text-muted` → `#574e57` (Muted Plum) · `--color-text-subtle` → `#3d3d3d` (Graphite Gray) · `--color-border` → `#786c78` (Mauve Rule) · `--color-accent` → `#61367d` (Juice Purple) · `--color-accent-2` → `#6a2f8d` (Violet Link) · `--color-accent-3` → `#ad22ff` (Electric Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d161d` | `#ffffff` | 17.73:1 | AAA |
| `#1d161d` | `#f8f6f8` | 16.48:1 | AAA |
| `#574e57` | `#ffffff` | 7.98:1 | AAA |
| `#574e57` | `#f8f6f8` | 7.42:1 | AAA |
| `#3d3d3d` | `#ffffff` | 10.86:1 | AAA |
| `#3d3d3d` | `#f8f6f8` | 10.1:1 | AAA |
| `#61367d` | `#ffffff` | 9:1 | AAA |
| `#61367d` | `#f8f6f8` | 8.37:1 | AAA |

### Gradients

- `repeating-linear-gradient(135deg, rgb(231, 228, 231), rgb(231, 228, 231) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 5px)`
- `linear-gradient(rgb(58, 25, 77) 0%, rgb(38, 17, 50) 100%)`
- `conic-gradient(rgb(231, 222, 237) 0deg, rgb(173, 34, 255) 360deg)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Haas Grot Text Web 55 Roman | `--font-body` | webfont | 400, 700 | Body copy, paragraphs, and readable interface text. | Inter |
| DM Mono | `--font-mono` | webfont | 500 | Navigation, eyebrow labels, captions, and technical microcopy. | DM Mono |
| Roobert Medium | `--font-display` | webfont | 500 | Display and section headings. | Manrope |
| Neue Haas Grotesk Text | `--font-neue-haas-grotesk-text` | system | 400 | Rare system-fallback text and supporting interface copy. | Inter |
| Haas Grot Text Web 65 Medium | `--font-haas-grot-text-web-65-medium` | webfont | 500 | Occasional medium-emphasis text. | Inter |

- **Haas Grot Text Web 55 Roman:** Regular-weight sans; compact tracking and clear, workmanlike body rhythm.
- **DM Mono:** Medium weight; uppercase labels with visibly expanded tracking.
- **Roobert Medium:** Medium weight, tight negative tracking, and compact line height for confident headlines.
- **Neue Haas Grotesk Text:** Regular sans fallback; keep sizing and tone aligned with the main body face.
- **Haas Grot Text Web 65 Medium:** Use sparingly for emphasis within an otherwise regular-weight sans system.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1 | -0.04em | — | Roobert Medium | Large lead display treatment for high-impact page messaging. |
| h1 | 48px | 500 | 1 | -0.02em | — | Roobert Medium | Primary hero headline and major section titles. |
| h2 | 40px | 500 | 1.15 | -0.02em | — | Roobert Medium | Feature section and prominent content headings. |
| h3 | 28px | 500 | 1.25 | -0.02em | — | Roobert Medium | Subsection headings in feature and proof modules. |
| h4 | 20px | 400 | 1.25 | -0.01em | — | Haas Grot Text Web 55 Roman | Compact card and FAQ question headings. |
| body | 16px | 400 | 1.25 | -0.01em | — | Haas Grot Text Web 55 Roman | Paragraphs, feature descriptions, and general interface copy. |
| caption | 14px | 500 | 1.14 | 0.02em | uppercase | DM Mono | Uppercase mono labels and small supporting captions. |
| eyebrow | 13px | 500 | 1 | 0.077em | uppercase | DM Mono | Compact uppercase section markers above headings. |
| code | 14px | 500 | 1.14 | 0.02em | uppercase | DM Mono | Technical-style uppercase labels and interface microcopy. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 13, 14, 16, 24, 32, 64 px.
- Section rhythm 32px · element gap 10px · card padding 32px · max content width 1408px.

A wide, centered page with a measured maximum width of 1408px and a compact base spacing system. The homepage moves between centered hero content, full-bleed purple product demonstrations, split feature rows, and fine-rule grids for logos, integrations, and FAQs. The hero centers its headline and actions; feature content alternates text and interface imagery. Generous blank intervals punctuate the long page, while compact labels and closely grouped buttons keep individual modules efficient.

## Shape & elevation

- Radius: button `4px` · card `2px` · media `50%` · link `4px` · xs `2px` · sm `3px` · md `4px` · lg `5px` · xl `16px` · pill `9999px`
- Shadow `inset` (button): `rgba(0, 0, 0, 0.5) 0px 0px 12px 0px inset`
- Shadow `sm` (card): `rgba(0, 0, 0, 0.05) 0px 4px 4px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.05) 0px 2px 4px 0px, rgba(76, 76, 76, 0.2) 0px 0px 10px 0px`
- Shadow `sm-2` (other): `rgba(0, 0, 0, 0.1) 0px 1px 2px -1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0.1) -9.5px 0px 19px 0px`

The page is mostly flat and organized by thin borders and tonal shifts, not floating cards. Use subtle card shadows only where interface mockups need separation. Small-radius buttons and restrained card corners keep the product interface crisp; purple bands provide depth and contrast through color rather than shadow.

## Imagery

Visuals are predominantly product-interface mockups, candidate and recruiting workflow screens, logos, and geometric line-pattern backdrops rather than lifestyle photography. Product panels sit on white or saturated purple fields, often framed by thin, precise outlines. The hero uses a restrained dotted violet texture toward its edges; later product imagery is presented as broad demonstrations with supporting text. Logo marks and customer evidence appear in orderly bands and grids.

## Components

### Primary action button

Compact dark CTA with a small corner radius, uppercase mono-style label, and restrained inset shadow.

### Secondary action button

White, lightly outlined companion action, commonly paired beside a dark CTA.

### Technical eyebrow

Small uppercase DM Mono label with expanded tracking, used above section and feature headings.

### Product demonstration band

Broad purple section with geometric line work and a centered recruiting interface mockup.

### Logo proof strip

Three-column customer proof band with fine vertical rules, mono captions, and clipped horizontal logo rows.

### Feature split row

Product imagery and explanatory text arranged side by side, separated by fine rules and ample white space.

### FAQ accordion

Question rows grouped in bordered pale surfaces, with concise answers and small expand controls.

### Measured component styles

- **Primary button** (“TRY FOR FREE”): background #2a232a · text #0000ee · radius 4px · padding 13px 14px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.5) 0px 0px 12px 0px inset
- **Secondary button** (“BOOK A DEMO”): background #ffffff · text #000000 · radius 4px · padding 13px 14px · 400 12px sans-serif
- **Link** (“FEATURES”): transparent background · text #000000 · radius 0px · padding 4px 12px · 400 12px sans-serif
- **Input**: transparent background · text #574e57 · radius 0px · padding 0px · 400 14px Haas Grot Text Web 55 Roman
- **Card** (“Can I try Juicebox for free? Yes. To get”): background #f8f6f8 · text #000000 · radius 0px · padding 32px · 400 12px sans-serif

## Do

- Keep the primary canvas white and uncluttered.
- Use Ink Plum for important headings and text.
- Reserve saturated purple for product emphasis and section bands.
- Set section labels in uppercase, expanded-tracking mono.
- Organize long content with fine rules and clear modules.
- Pair dark primary actions with quiet white secondary actions.

## Don't

- Do not make every section purple.
- Do not add decorative shadows to every card.
- Do not use lifestyle photography as the main visual language.
- Do not replace the crisp rules with heavy borders.
- Do not turn technical labels into oversized headings.
- Do not crowd the space between major page modules.

## Agent prompt

Build a new recruiting SaaS page in Juicebox's editorial product style. Use Gallery White (#ffffff) as the dominant canvas, Ink Plum (#1d161d) for headings, and muted gray-violet copy such as Muted Plum (#574e57). Bring in Juice Purple (#61367d) for one or two product-focused bands, with Night Aubergine (#3a194d) and Blackberry Dusk (#261132) reserved for deep gradient moments. Use Roobert-like compact display headings, readable neutral sans body copy, and uppercase DM Mono-style labels. Structure content in centered introductions, split feature demonstrations, and fine-rule grids. Keep CTAs compact, dark, and paired with quiet outlined alternatives. Favor product mockups and geometric line textures over photography; avoid excess shadows and decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long-form, full-width homepage with centered hero, product bands, split features, proof grids, FAQ, and closing CTA. | Top navigation with sign-in and paired CTAs, Customer proof and integration credibility, FAQ accordion | White editorial canvas, Purple product demonstration bands, Fine-rule modular grids, Mono uppercase labels |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(226,226,226,0);
--osano-button-border-color: #FFFFFF;
--osano-button-background-color: #838383;
--osano-button-foreground-color: #FFFFFF;
--osano-dialog-background-color: #e2e2e2;
--osano-dialog-foreground-color: #333333;
--osano-info-dialog-overlay-color: rgba(255,255,255,0.45);
--osano-link-color: #6b2f8d;
--osano-toggle-off-track-color: #090909;
--osano-toggle-off-thumb-color: #FFFFFF;
--osano-toggle-on-track-color: #6b2f8d;
--osano-toggle-on-thumb-color: #FFFFFF;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-pill-background-color: #EBE0FE;
--osano-pill-foreground-color: #3E1A7F;
--osano-button-close-color: #333333;
--osano-button-accept-background-color: #838383;
--osano-button-accept-border-color: #FFFFFF;
--osano-button-accept-foreground-color: #FFFFFF;
--osano-button-deny-background-color: #838383;
--osano-button-deny-border-color: #FFFFFF;
--osano-button-deny-foreground-color: #FFFFFF;
--osano-button-reject-all-background-color: #838383;
--osano-button-reject-all-background-color-hover: #6f6f6f;
--osano-button-reject-all-border-color: #FFFFFF;
--osano-button-reject-all-foreground-color: #FFFFFF;
--osano-button-manage-background-color: #838383;
--osano-button-manage-border-color: #FFFFFF;
--osano-button-manage-foreground-color: #FFFFFF;
--osano-info-dialog-link-color: #6b2f8d;
--osano-info-dialog-button-close-color: #000000;
--osano-info-dialog-toggle-off-track-color: #090909;
--osano-info-dialog-toggle-off-thumb-color: #FFFFFF;
--osano-info-dialog-toggle-on-track-color: #6b2f8d;
--osano-info-dialog-toggle-on-thumb-color: #FFFFFF;
--osano-info-dialog-button-background-color: #838383;
--osano-info-dialog-button-border-color: #FFFFFF;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/juicebox-ai