# Burstiq Design System

> Technical precision meets organic trust through a teal-and-amber palette anchored by a blueprint-inspired grid.

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

## TL;DR
Burstiq utilizes a "monochrome-plus" strategy where a stark white canvas (`#ffffff`) and slate-gray typography (`#47515a`) are energized by a primary teal (`#53c2bf`) and secondary amber (`#ffc467`). The visual language is deeply rooted in "data architecture" motifs, specifically using a light gray dot-grid background and thin black hairlines (`#000000`) for component borders. Buttons are strictly rectangular with 0px radius, relying on high-contrast fills and 1px solid borders to denote interactivity. The system balances heavy technical display type with a clean, high-legibility sans-serif for functional UI and body prose.

## Signature DNA
1. **Blueprint Grid Background** (A subtle repeating dot-grid pattern serves as the base layer for all white sections, reinforcing the "data foundation" metaphor. Observed on homepage and about page.)
2. **Hard-Edge Geometry** (A total absence of border-radius on primary CTAs and content blocks. Every button and card uses a strict 0px corner, creating a precise, engineered feel. Observed across all analyzed pages.)
3. **The Teal-Amber Contrast** (Primary actions use teal `#53c2bf`, while secondary or "alternative" actions use amber `#ffc467`. These two colors never mix within a single component but define the rhythm of the page sections.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--content_bg_color` | `#ffffff` | Primary page canvas and card background | High | 100% | Declared |
| `--h1_typography-color` | `#47515a` | Primary heading and display text color | High | 100% | Declared |
| `--body_typography-color` | `#113f4d` | Body text and form labels (dark teal-tinted gray) | High | 100% | Declared |
| `--sep_color` | `#e7ecee` | Subtle dividers and section borders | Medium | 90% | Declared |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--primary_color` | `#53c2bf` | Primary brand teal; used for hero backgrounds and primary CTAs | High | 100% | Declared |
| `--button_gradient_top_color_hover` | `#ffc467` | Secondary brand amber; used for secondary CTAs and highlights | High | 100% | Declared |
| `--awb-custom_color_4` | `#285c6c` | Deep teal; used for footer backgrounds and dark-mode text | Medium | 90% | Declared |
| `--awb-custom_color_2` | `#f58838` | Tertiary orange; decorative icons and specific highlights | Low | 70% | Declared |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `--success_bg_color` | `#dff0d8` | Success message backgrounds |
| `--danger_bg_color` | `#f2dede` | Error/Danger message backgrounds |
| `--warning_bg_color` | `#fcf8e3` | Warning message backgrounds |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Not captured | 700, 800 | Display Headlines (LifeGraph, Burstiq) | Montserrat | Proprietary |
| Not captured | 400, 500 | Body, Nav, UI Labels | Inter | Open Source |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{typography.h1}` | 48px | 1.1 | -0.02em | 800 | Page Hero Headlines | `--h1_typography-color` |
| `{typography.h2}` | 36px | 1.2 | normal | 700 | Section Headers | `--h2_typography-color` |
| `{typography.h3}` | 28px | 1.3 | normal | 700 | Sub-section titles | `--h3_typography-color` |
| `{typography.body-lg}` | 18px | 1.6 | normal | 400 | Lead paragraphs | `--body_typography-color` |
| `{typography.body}` | 16px | 1.5 | normal | 400 | Standard running text | `--body_typography-color` |
| `{typography.nav}` | 15px | 1.0 | 0.05em | 500 | Main navigation links | `--nav_typography-color` |
| `{typography.button}` | 14px | 1.0 | 0.1em | 700 | CTA Labels (All Caps) | `--button_accent_color` |
| `{typography.caption}` | 12px | 1.4 | normal | 400 | Footer and legal text | `--footer_text_color` |

### Principles
1. **All-Caps Display**: Primary headings and CTA labels frequently use uppercase to emphasize authority.
2. **High Contrast**: Text is strictly dark (`#47515a` or `#113f4d`) on light backgrounds, ensuring WCAG AA compliance.
3. **Tight Heading Leading**: Large display type uses a 1.1 line-height to maintain a "blocky" architectural feel.

## Spacing
**Base unit:** 4px
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{spacing.xs}` | 8px | Button internal padding (vertical) |
| `{spacing.md}` | 16px | Card internal padding |
| `{spacing.lg}` | 32px | Element grouping |
| `{spacing.xl}` | 64px | Section vertical padding |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | All buttons, cards, and input fields | Primary CTA, Feature Cards |
| `{radius.full}` | 9999px | Social icons and specific decorative avatars | Footer social links |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | 0px | Default state for all cards and buttons | Section containers |
| Border | 1px solid `#000000` | Definition for interactive elements | Primary CTA border |

## Components

### Tier 1: Foundational

#### Primary CTA Button
**Role:** Main site actions (Explore, Schedule Demo)
**Pages observed:** Homepage, About
**Spec:** Background: `#53c2bf` | Text: `#000000` | Border: 1px solid `#000000` | Radius: 0px | Typography: 14px Bold Caps
**States observed:** Default | Hover: Background `#ffc467` | Focus: Not captured

#### Secondary CTA Button
**Role:** Alternative actions (Plans & Pricing, Learn More)
**Pages observed:** Homepage, About
**Spec:** Background: `#ffc467` | Text: `#000000` | Border: 1px solid `#000000` | Radius: 0px
**States observed:** Default | Hover: Background `#53c2bf`

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying services or "Trust" pillars
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` | Border: 1px solid `#e7ecee` | Radius: 0px | Padding: 24px
**States observed:** Default

#### Trust Matrix Grid
**Role:** Comparison of Data Proof vs Agentic Proof
**Pages observed:** Homepage
**Spec:** Background: Alternating `#53c2bf` (headers) and `#ffffff` (cells) | Border: 1px solid `#e7ecee`
**States observed:** Default

### Tier 3: Surface-specific

#### Global Header
**Role:** Site navigation
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` | Height: 80px | Bottom Border: 1px solid `#e7ecee`
**States observed:** Default

#### Footer
**Role:** Sitemap and legal
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` | Text: `#47515a` | Top Border: 4px solid `#e7ecee`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Gutter | 24px |
| Column Count | 12 |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero text aligns center; 1-column grid |
| Desktop | 1440px | Full horizontal menu; Multi-column feature grids |

## Imagery & decoration
- **Dot-Grid Background**: A 20px x 20px light gray dot grid used as a watermark behind main content.
- **Line Art Icons**: Technical icons use `#113f4d` strokes with teal/amber fills.
- **Avoidance**: No drop shadows, no gradients on UI elements, no rounded corners.

## Do's
- Use `#53c2bf` for the most important action on any given screen.
- Maintain a strict 0px border radius for all interactive components.
- Ensure all text sits on a white or very light gray background for legibility.
- Use the dot-grid pattern to break up long vertical white sections.
- Keep button labels in All-Caps with 0.1em letter spacing.

## Don'ts
- **Wrong:** Using a 4px border radius on a button. **Right:** 0px. **Reason:** The brand identity is built on architectural precision.
- **Wrong:** Using `#53c2bf` and `#ffc467` as a gradient. **Right:** Solid fills only. **Reason:** The system is strictly flat.
- **Wrong:** Labeling `#f58838` (Orange) as the primary brand color. **Right:** Teal is primary. **Reason:** Orange is a tertiary decorative accent only.
- Do not use drop shadows to create depth; use borders and background color shifts instead.
- Do not center-align body text paragraphs longer than 3 lines.

## Similar brands
- Palantir (Technical, data-heavy, structured)
- Scale AI (Clean, grid-based, high-contrast)
- Snowflake (Corporate blue/teal palette, architectural motifs)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #53c2bf;
  --color-secondary: #ffc467;
  --color-text-main: #47515a;
  --color-text-body: #113f4d;
  --color-bg-canvas: #ffffff;
  --color-border-subtle: #e7ecee;
  --radius-none: 0px;
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-teal-brand: #53c2bf;
  --color-amber-brand: #ffc467;
  --color-slate-brand: #47515a;
  --border-radius-none: 0;
  --font-display: "Montserrat", sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using #53c2bf background, 1px solid black border, 0px radius, and all-caps bold text."
- "Design a feature card with a white background, 1px #e7ecee border, and no rounded corners, sitting on a light gray dot-grid background."
- "Generate a section header using #47515a text color, 36px font size, and 1.1 line height."

## Known gaps
- Specific font family names were not declared in the token set; identified by visual weight and common SaaS pairings.
- Hover states for tertiary links were not captured in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://burstiq.com | Desktop 1440px | 2026-06-06 |
| About Page | https://burstiq.com/about | Desktop 1440px | 2026-06-06 |
| Mobile Home | https://burstiq.com | Mobile 390px | 2026-06-06 |