# Bamboobox Design System

> High-contrast monochrome foundation punctuated by a high-voltage digital violet.

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

## TL;DR
Bamboobox utilizes a "monochrome plus one" strategy, where a deep charcoal `#181d27` and pure white `#ffffff` provide the structural canvas, while a vibrant violet `#7a5af8` serves as the primary brand signal. Typography is dominated by **ClarikaProGeo**, used in heavy weights (600-700) for display and medium weights for UI, creating a dense, professional atmosphere. The system favors generous padding (40px-56px) and soft corner geometry (8px-16px) to balance the high-contrast color palette.

## Signature DNA
1. **The Violet Accent** (`#7a5af8`): Used exclusively for primary actions, text highlights, and brand-heavy surfaces (like the "Built Differently" section). It is the only non-achromatic color in the core system.
2. **Clarika Display Hierarchy**: Massive 80px display type with tight 1.1 line heights and subtle letter-spacing (0.01px) creates a high-authority "Operating System" aesthetic.
3. **Soft-Shell Containers**: Content is frequently housed in cards with 15px-16px radii and subtle 1px borders (`#d5d7da`), often floating on neutral `#ffffff` or light grey `#ecedf0` backgrounds.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#181d27` | Primary text, dark button backgrounds, hero gradients | 51 | 1 | `--primary-color` |
| `{color.white}` | `#ffffff` | Page background, button text, card surfaces | 57 | 1 | `--body-bg-color` |
| `{color.third}` | `#535862` | Secondary body text, card descriptions | 139 | 1 | `--third-color` |
| `{color.border}` | `#d5d7da` | Default 1px card and input borders | 18 | 0.8 | Computed style |
| `{color.surface-soft}` | `#ecedf0` | Subtle section backgrounds, secondary cards | 5 | 0.6 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.secondary}` | `#7a5af8` | Primary brand color, links, highlights, CTA backgrounds | 27 | 1 | `--secondary-color` |
| `{color.vivid-purple}` | `#9b51e0` | Decorative gradient stop | 1 | 0.4 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| ClarikaProGeo | 400, 500, 600, 700 | Display, Heading, UI | Montserrat | Licensed |
| ClarikaProGeo Bold | 500, 600, 700 | Display Highlights | Montserrat Bold | Licensed |
| Arial | 400, 500 | Form inputs, fallback body | Sans-serif | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 80px | 88px | 0.01px | 500 | Hero Display | `h3.pxl-heading__title` |
| `{type.display-lg}` | 64px | 64px | -4px | 700 | Primary Headers | `h1.pxl-heading__title` |
| `{type.display-md}` | 45px | 53.76px | -3.2px | 600 | Section Headers | `h2.pxl-heading__title` |
| `{type.heading-sm}` | 29px | 31.68px | 0.01px | 600 | Card Titles | `h3.pxl-heading__title` |
| `{type.button}` | 19px | 24px | -0.32px | 400 | Primary CTAs | `a.btn.btn-glossy` |
| `{type.body-lg}` | 18px | 24px | -0.32px | 400 | Nav links, body | `a` |
| `{type.body-md}` | 16px | 24px | -0.32px | 400 | Default body | `article` |
| `{type.label}` | 16px | 24px | -0.32px | 500 | Form labels | `label` |

### Principles
1. **Tight Display Tracking**: Large display sizes (64px+) use significant negative letter-spacing (-3.2px to -4px) to maintain visual density.
2. **Highlighting**: Brand violet `#7a5af8` is used within headlines to emphasize key terms (e.g., "ABM").
3. **Medium UI Weight**: Interactive elements and labels consistently use 500 weight for clarity against high-contrast backgrounds.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 13px | 18 |
| `{space.md}` | 16px | 45 |
| `{space.xl}` | 40px | 2 |
| `{space.xxl}` | 56px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.control}` | 8px | Buttons, Text Inputs | `radius: 8px` |
| `{radius.card}` | 15px | Feature Cards | `radius: 15px` |
| `{radius.card-lg}` | 16px | Container Cards | `radius: 16px` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.none}` | none | Standard cards and buttons | `shadow: none` |
| `{shadow.soft}` | `rgba(0, 0, 0, 0.15) 0px 0px 10px 0px` | Elevated About-page cards | `shadows` array |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site actions (e.g., "Book a meeting")
**Pages observed:** https://bamboobox.ai, https://bamboobox.ai/about
**Spec:** Background `{color.primary}` (#181d27) | Text `{color.white}` (#ffffff) | Radius `{radius.control}` (8px) | Padding 13px 16px | Type `{type.button}`
**States observed:** Default | Hover: Not captured

#### Text Input
**Role:** Lead generation forms
**Pages observed:** https://bamboobox.ai, https://bamboobox.ai/about
**Spec:** Background `{color.white}` (#ffffff) | Text `#454545` | Border 1px `{color.border}` (#d5d7da) | Radius `{radius.control}` (8px) | Padding 13px 16px
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific value propositions
**Pages observed:** https://bamboobox.ai, https://bamboobox.ai/about
**Spec:** Background `{color.secondary}` (#7a5af8) | Text `{color.third}` (#535862) | Radius `{radius.card-lg}` (16px) | Padding 40px
**States observed:** Default

### Tier 3: Surface-specific

#### About Surface Card
**Role:** Content grouping on the About page
**Pages observed:** https://bamboobox.ai/about
**Spec:** Background `{color.surface-soft}` (#ecedf0) | Border 1px `#c4b5ff` | Radius `{radius.card}` (15px) | Padding 56px 48px | Shadow `{shadow.soft}`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | ~1200px |
| Section Padding | 56px (vertical) |
| Card Gap | 24px |

## Imagery & decoration
- **Geometric Gradients**: Uses radial and linear gradients transitioning from `#181d27` to `#7a5af8`.
- **Isometric Illustrations**: 3D-style network diagrams using the brand violet and grey palette.
- **Logo Grid**: Grayscale treatment for partner logos to maintain monochrome discipline.

## Do's
- Use `#7a5af8` for primary CTA backgrounds.
- Apply negative letter-spacing to ClarikaProGeo at sizes above 45px.
- Use 16px padding for standard form-field internal spacing.
- Ensure all cards have a minimum radius of 15px.
- Maintain high contrast with `#181d27` text on `#ffffff` backgrounds.

## Don'ts
- Do not use `#7a5af8` for body text; reserve for highlights and links.
- Do not use sharp corners (0px) for interactive UI elements.
- Do not mix the brand violet with other high-saturation colors (e.g., vivid orange or red) in UI components.
- Do not use Arial for display headings.

## Similar brands
- Linear (monochrome + violet accent)
- Vercel (high-contrast monochrome)
- Klaviyo (structured B2B SaaS layout)

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #181d27;
  --color-secondary: #7a5af8;
  --color-third: #535862;
  --color-border: #d5d7da;
  --radius-control: 8px;
  --radius-card: 16px;
  --font-display: "ClarikaProGeo", sans-serif;
}
```

## Agent prompt examples
- "Generate a primary button using Bamboobox specs: background #181d27, text #ffffff, 8px border radius, and ClarikaProGeo 19px font."
- "Create a content card with a 16px border radius, #ffffff background, and a 1px border of #d5d7da, using #535862 for the body text."
- "Design a hero section with a headline in ClarikaProGeo Bold, 80px size, -4px letter spacing, featuring a text highlight in #7a5af8."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific typography scale for display sizes was not fully mapped.
- Error and Success semantic colors were not found in the analyzed page components.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://bamboobox.ai | 1440px | 2026-06-06 |
| About | https://bamboobox.ai/about | 1440px | 2026-06-06 |