# Cube Design System

> A high-contrast semantic interface defined by geometric sans-serif typography, deep indigo foundations, and vibrant periwinkle action states.

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

## TL;DR
Cube utilizes a "Deep Mode" foundation where primary content often sits on a pure white (#ffffff) canvas, while strategic brand moments and headers leverage a dense indigo (#0f0f23). The system's primary energy comes from a periwinkle-violet accent (#6f6dee) used exclusively for high-priority calls to action. Typography is anchored by CeraPro, a geometric sans-serif that provides a technical yet accessible feel across a wide scale from 10px captions to 42px display headers. Layouts are structured with generous 101px vertical rhythms and 8px/16px internal card spacing.

## Signature DNA
1. **Geometric Technicality** (CeraPro headers at 700 weight paired with JetBrainsMono for technical annotations creates a "developer-first" aesthetic; observed on `cube.dev` and `cube.dev/about`).
2. **The Indigo Anchor** (Use of #0f0f23 for both primary text and deep-surface backgrounds provides a unified chromatic weight that feels more sophisticated than pure black; observed across all pages).
3. **Softened Geometry** (A consistent 8px radius for controls and 16px for feature cards softens the high-contrast color palette; observed in pricing tiers and feature grids).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background and card surfaces | 254 | 0.8 | Computed Style |
| `{color.ink}` | `#0f0f23` | Primary text, deep surfaces, and dark borders | 249 | 1.0 | `--dark_a70` |
| `{color.slate}` | `#6a6a7c` | Secondary body text and footer links | 259 | 0.8 | Computed Style |
| `{color.muted}` | `#a9a9b7` | Tertiary text and deemphasized labels | 67 | 0.8 | Computed Style |
| `{color.border.light}` | `#e5e5ec` | Subtle dividers and surface outlines | 60 | 0.8 | Computed Style |
| `{color.surface.soft}` | `#f6f6f8` | Background for alternating sections and cards | 19 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#6f6dee` | Primary CTA background (Periwinkle) | 12 | 0.8 | Computed Style |
| `{color.success}` | `#1cba21` | Status indicators and success text | 17 | 0.8 | Computed Style |
| `{color.link}` | `#0000ee` | Inline text links (standard blue) | 14 | 0.8 | Computed Style |
| `{color.accent.purple}` | `#7a77ff` | Decorative text moments | 13 | 0.8 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| CeraPro | 300, 400, 500, 700 | Display, Heading, Body | Montserrat | Proprietary |
| Graphik Regular | 300, 400, 500 | Secondary Body | Inter | Proprietary |
| JetBrainsMono | 400 | Mono / Technical | JetBrains Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 42px | 54px | 0.07px | 700 | Hero Titles | `h1.About_About_CustomerReviews_Title__44NpV` |
| `{type.h2}` | 32px | 44px | 0.07px | 700 | Section Headers | `h2.FAQSection_title__IJSN3` |
| `{type.h3}` | 26px | 36px | 0.07px | 700 | Card Titles | `h3.PricingCardsNew_PricingCard__title__HFmTM` |
| `{type.h4}` | 20px | 32px | 0.1px | 700 | Sub-headings | `h4.Home_SectionHeader__subheadingtext__3NJge` |
| `{type.body.lg}` | 16px | 26px | 0.07px | 400 | Lead Paragraphs | `p.CTASection_CTASection__description__ECj__` |
| `{type.body}` | 14px | 20px | 0.07px | 400 | Default Body | `div#cube-ui-kit-root` |
| `{type.caption}` | 12px | 20px | 0.07px | 300 | Small Metadata | `div.gartner-pi-stats` |
| `{type.mono}` | 9px | 20px | normal | 400 | Technical Labels | `tspan` |

### Principles
1. **Bold Geometric Headers:** All major headings (H1-H4) use CeraPro at 700 weight.
2. **Tight Tracking on Display:** Letter spacing is kept minimal (0.07px to 0.1px) even at large sizes to maintain density.
3. **Mono for Precision:** JetBrainsMono is reserved for technical data points and chart labels.

## Spacing
**Base unit:** 8px (approximate)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xxs}` | 4px | 85 |
| `{space.xs}` | 8px | 157 |
| `{space.sm}` | 16px | 140 |
| `{space.md}` | 32px | 15 |
| `{space.lg}` | 48px | 9 |
| `{space.section}` | 101px | 57 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sm}` | 6px | Form Inputs | `8 occurrences` |
| `{radius.md}` | 8px | Primary Buttons / Small Cards | `68 occurrences` |
| `{radius.lg}` | 16px | Feature Cards / Pricing Tiers | `46 occurrences` |
| `{radius.xl}` | 24px | Large Panels | `6 occurrences` |
| `{radius.full}` | 999px | Pill Badges | `2 occurrences` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.inset}` | `rgb(15, 15, 36) 0px -1px 0px 0px inset` | Button bottom-edge definition | `30 occurrences` |
| `{shadow.card}` | `rgba(15, 15, 36, 0.08) 0px 32px 50px 0px` | Elevated feature cards | `2 occurrences` |
| `{shadow.border}` | `rgba(15, 15, 36, 0.12) 0px 0px 0px 1px inset` | Input field outlines | `3 occurrences` |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action
**Pages observed:** `cube.dev`, `cube.dev/pricing`, `cube.dev/about`
**Spec:** Background: `#6f6dee` | Text: `#ffffff` | Radius: `8px` | Padding: `7px 16px` | Typography: `16px/700`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Ghost Button
**Role:** Secondary navigation or low-priority actions
**Pages observed:** `cube.dev`, `cube.dev/pricing`, `cube.dev/about`
**Spec:** Background: `transparent` | Text: `#0f0f23` | Radius: `8px` | Padding: `7px 16px` | Typography: `16px/700`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns
#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** `cube.dev`, `cube.dev/pricing`
**Spec:** Background: `#ffffff` | Border: `1px #e5e5ec` | Radius: `8px` | Padding: `32px` | Typography: `14px/400`
**States observed:** Default

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** `cube.dev/pricing`
**Spec:** Background: `#0f0f23` | Text: `#ffffff` | Radius: `16px` | Padding: `0px` | Typography: `14px/400`
**States observed:** Default

### Tier 3: Surface-specific
#### Global Footer
**Role:** Site-wide navigation and legal
**Pages observed:** `cube.dev`, `cube.dev/pricing`, `cube.dev/about`
**Spec:** Background: `#ffffff` | Text: `#6a6a7c` | Padding: `80px 0px` | Typography: `14px/400`
**States observed:** Default

#### Section Header
**Role:** Introducing new content blocks
**Pages observed:** `cube.dev`, `cube.dev/about`
**Spec:** Background: `transparent` | Text: `#0f0f23` | Typography: `32px/700` (H2) | Margin-bottom: `48px`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (estimated) |
| Section Padding (Vertical) | 101px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; padding-inline reduced to 16px. |
| Desktop | 1440px | Multi-column grids (3-up or 4-up) for cards. |

## Imagery & decoration
Cube uses high-fidelity product screenshots with subtle drop shadows and simplified "abstracted" UI components to demonstrate the semantic layer. It avoids generic stock photography, opting for logos of "Trusted by" companies in grayscale (#a9a9b7) to maintain the technical aesthetic.

## Do's
- Use `#6f6dee` exclusively for the primary action on any given screen.
- Set all section headers in CeraPro 700 with `0.07px` letter spacing.
- Maintain a `101px` vertical gap between major content sections.
- Use `#0f0f23` for primary body text to ensure high contrast (18.9:1).
- Apply a `16px` border radius to large container cards.

## Don'ts
- Do not use `#6f6dee` for body text or non-interactive elements.
- Do not use pure black (#000000) for text; use the brand indigo `#0f0f23`.
- Do not mix multiple border radii in a single component group; stick to the `8px`/`16px` scale.
- **Wrong:** Using a sub-brand accent color (e.g., a hypothetical "Cube Cloud Orange") as the main site CTA.
- **Right:** Always use the parent periwinkle `#6f6dee` for global CTAs.
- **Reason:** The parent brand identity is anchored in the periwinkle/indigo relationship.

## Similar brands
- Vercel (monochrome technicality)
- Datadog (dense data-viz aesthetic)
- Stripe (geometric sans-serif and high-contrast surfaces)

## Quick start
```css
/* CSS Custom Properties */
:root {
  --cube-indigo: #0f0f23;
  --cube-periwinkle: #6f6dee;
  --cube-slate: #6a6a7c;
  --cube-canvas: #ffffff;
  --cube-border: #e5e5ec;
  --radius-md: 8px;
  --radius-lg: 16px;
}
```

## Agent prompt examples
- "Generate a hero section with a `#0f0f23` background, a `#ffffff` H1 using CeraPro 700, and a primary button with `#6f6dee` background and `8px` radius."
- "Create a 3-column feature grid using cards with `#ffffff` background, `1px` border in `#e5e5ec`, and `16px` border radius."
- "Style a footer with `#ffffff` background and text links in `#6a6a7c` at 14px size."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Warning and Info semantic colors were not present on the analyzed pages.
- Mobile-specific typography scale (fluid type) was not fully mapped.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://cube.dev | 1440x900 | 2026-06-06 |
| Pricing | https://cube.dev/pricing | 1440x900 | 2026-06-06 |
| About | https://cube.dev/about | 1440x900 | 2026-06-06 |