# Bound360 Design System

> Airy, geometric precision anchored by lightweight Montserrat display type and a high-contrast monochromatic foundation.

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

## TL;DR
Bound360 utilizes a "monochrome-plus-one" system where a stark white canvas (#ffffff) and deep charcoal text (#111827, #000000) are punctuated by a singular Sky Blue accent (#269ae7). The typography is defined by **Montserrat** at an ultra-light weight (300) for massive display headers (72px), creating a technical yet breathable aesthetic. Components favor soft geometry with a 6px to 8px corner radius, while primary actions are often housed in high-contrast pill-shaped containers. The layout relies on a strict 8px base unit, frequently deploying large 48px to 64px gaps to maintain a spacious, professional SaaS atmosphere.

## Signature DNA
1. **Ultra-Light Display Typography** (Montserrat at weight 300 used for 72px and 48px display roles across the homepage and about pages to create a "technical-editorial" feel).
2. **Sky Blue Punctuation** (The use of #269ae7 specifically for focus rings, interactive accents, and primary brand signals against a strictly achromatic background).
3. **Layered Elevation** (Frequent use of 1px borders in #d1d5db combined with subtle multi-stop shadows to define cards and input fields).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
| :--- | :--- | :--- | :--- | :--- |
| Bound360 (Parent) | #269ae7 | Geometric grids | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.canvas}` | #ffffff | Page background, primary surface | 116 | 1.0 | Computed Style |
| `{color.ink.primary}` | #000000 | Primary text, button labels | 202 | 0.8 | Computed Style |
| `{color.ink.heading}` | #111827 | High-contrast surface text | 4 | 0.6 | Computed Style |
| `{color.border.muted}` | #d1d5db | Default card and input borders | 42 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.accent.sky}` | #269ae7 | Focus rings, brand signals | 2 | 1.0 | `--tw-ring-color` |
| `{color.accent.slate}` | #4b5563 | Secondary text, icons | 26 | 0.8 | Computed Style |
| `{color.accent.navy}` | #114169 | Primary button text | 10 | 0.6 | Computed Style |
| `{color.accent.mint}` | #34b180 | Success indicators (decorative) | 6 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| `{color.success}` | #34b180 | Observed in advisory section status indicators |
| `{color.error}` | Not captured | Not captured in source |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Montserrat | 100, 200, 300, 400, 500, 700 | Display, Headings | Montserrat (Google Fonts) | OFL |
| Inter | 300, 400, 500, 600 | Body, UI Labels | Inter (Google Fonts) | OFL |
| monospace | 400 | Technical snippets | JetBrains Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.mega}` | 72px | 79.2px | -1.8px | 300 | Hero Headlines | `div.relative.inline-block` |
| `{type.display.lg}` | 48px | 56px | normal | 300 | Section Headers | `p.text-blue-500` |
| `{type.h1}` | 32px | 40px | normal | 200 | Sub-section titles | `p.mx-auto.px-2` |
| `{type.h2}` | 32px | 40px | normal | 500 | Feature titles | `p.w-full.text-center` |
| `{type.body.lg}` | 20px | 32px | normal | 300 | Intro paragraphs | `p.text-center.text-lg` |
| `{type.body.md}` | 18px | 22.5px | -0.45px | 500 | Medium emphasis body | `p.text-lg.font-medium` |
| `{type.body.base}` | 16px | 24px | normal | 400 | Standard body copy | `section#intelligence` |
| `{type.ui.label}` | 14px | 17.5px | normal | 400 | Form labels, small UI | `p.text-sm.leading-tight` |
| `{type.caption}` | 12px | 16px | normal | 700 | Badges, small caps | `span.font-display.text-xs` |

### Principles
1. **Display weight never exceeds 300.** Montserrat is used at its lightest weights (100-300) for all text above 32px.
2. **Negative tracking on large type.** Display-mega (72px) requires -1.8px letter spacing to maintain geometric cohesion.
3. **Inter for utility.** All interactive elements (buttons, inputs, navigation) switch to Inter for maximum legibility.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 54 |
| `{space.sm}` | 16px | 36 |
| `{space.md}` | 32px | 4 |
| `{space.lg}` | 48px | 30 |
| `{space.xl}` | 64px | 24 |
| `{space.section}` | 96px | 8 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Sharp containers | 140 occurrences |
| `{radius.sm}` | 4px | Small cards, badges | `Card` component |
| `{radius.md}` | 6px | Buttons, Inputs | `Rounded Button` |
| `{radius.lg}` | 8px | Standard cards | `Text Input` |
| `{radius.pill}` | 9999px | CTA buttons, Avatars | `Card (pill variant)` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.card}` | `rgba(17, 24, 39, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | Feature cards | 24 occurrences |
| `{shadow.focus}` | `rgb(131, 199, 246) 0px 0px 0px 2px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px` | Active buttons | 8 occurrences |
| `{shadow.input}` | `rgb(209, 213, 219) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px` | Form fields | 10 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and secondary actions
**Pages observed:** https://bound360.com, https://bound360.com/about
**Spec:** Background #ffffff / Text #114169 / Border #e5e7eb / Radius 6px / Padding 8px 16px / Typography Inter 14px (600) / Shadow {shadow.focus}
**States observed:** Default | Hover: captured | Focus: captured | Active: captured | Disabled: not captured

#### Text Input
**Role:** Form data entry
**Pages observed:** https://bound360.com, https://bound360.com/about
**Spec:** Background #ffffff / Text #1f2937 / Border #d1d5db / Radius 6px / Padding 8px 16px / Typography Inter 16px (400)
**States observed:** Default | Focus: captured | Disabled: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** https://bound360.com, https://bound360.com/about
**Spec:** Background #f9fafb / Text #000000 / Border #e5e7eb / Radius 6px / Padding 48px 64px / Shadow {shadow.card}
**States observed:** Default | Hover: not captured

#### Pill Badge
**Role:** Status or category label
**Pages observed:** https://bound360.com, https://bound360.com/about
**Spec:** Background #ffffff / Text #000000 / Border none / Radius 9999px / Padding 12px / Shadow {shadow.focus} (Sky Blue ring)

### Tier 3: Surface-specific

#### Intelligence Panel
**Role:** Dark-themed data visualization container
**Pages observed:** https://bound360.com
**Spec:** Background #1f2937 / Text #ffffff / Border none / Radius 8px / Padding 0px / Shadow {shadow.focus}

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1280px |
| Section padding | 96px (vertical) |
| Grid gutter | 32px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Stacked feature cards, 16px horizontal margin |
| Desktop | 1440px | Multi-column grids, 96px section spacing |

## Imagery & decoration
Bound360 uses **geometric grid overlays** and **thin-stroke iconography**. It avoids heavy gradients or photographic backgrounds, preferring clean white space or solid dark charcoal (#1f2937) bands to separate content.

## Do's
- Use **Montserrat 300** for all headlines above 32px.
- Apply **Sky Blue (#269ae7)** focus rings to all interactive elements.
- Maintain a minimum of **48px (space.lg)** between feature blocks.
- Use **Inter 400** for all long-form body copy.
- Ensure cards have a **6px to 8px** radius for a modern SaaS look.

## Don'ts
- **Wrong:** Using Montserrat Bold (700) for display headers. **Right:** Use weight 300. **Reason:** The brand identity relies on the "lightness" of the display type.
- **Wrong:** Using #269ae7 as a solid background for large sections. **Right:** Use it for focus rings and small accents. **Reason:** It is a decorative accent, not a foundation color.
- **Wrong:** Mislabeling sub-brand colors (e.g., a future purple sub-brand) as the parent Sky Blue. **Right:** Keep #269ae7 as the global parent primary.

## Similar brands
- Linear
- Vercel
- Framer
- Resend

## Quick start

### CSS Custom Properties
```css
:root {
  --bound-sky: #269ae7;
  --bound-ink: #000000;
  --bound-canvas: #ffffff;
  --bound-border: #d1d5db;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-md: 6px;
  --shadow-card: rgba(17, 24, 39, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
```

### Tailwind v4 @theme
```css
@theme {
  --color-primary: #269ae7;
  --color-neutral-900: #111827;
  --font-montserrat: "Montserrat";
  --font-inter: "Inter";
  --spacing-section: 96px;
  --radius-control: 6px;
}
```

## Agent prompt examples
- "Create a feature card using Bound360's #f9fafb background, a 6px border radius, and the {shadow.card} token. Use Montserrat 300 for the 32px heading."
- "Generate a primary button with a 6px radius, #ffffff background, and a 2px Sky Blue (#269ae7) focus ring."
- "Build a hero section with a 72px Montserrat 300 headline, -1.8px letter spacing, and 96px of vertical padding."

## Known gaps
- **Error States:** No specific hex code for error/validation was captured in the analyzed pages.
- **Dark Mode:** While dark sections exist (#1f2937), a full system-wide dark mode toggle was not observed.
- **Hover States:** Specific hover hex values for primary buttons were not explicitly captured in the computed style logs.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://bound360.com | 1440px | 2026-06-06 |
| About | https://bound360.com/about | 1440px | 2026-06-06 |
| Pricing | https://bound360.com/pricing | 1440px | 2026-06-06 |