# Bundlar Design System

> High-contrast industrial monochrome punctuated by a high-voltage safety orange.

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

## TL;DR
Bundlar utilizes a stark, high-contrast palette dominated by deep grays and blacks (#1c1c1c, #252525) against a clean white foundation (#ffffff). The system's primary energy comes from a singular accent color, Nectar Orange (#f35d05), which is used exclusively for critical actions and brand emphasis. Typography is anchored by Open Sans for all functional and heading roles, occasionally utilizing Georgia for large-scale display moments. The layout is structured around heavy vertical blocks and "jumbo" pill-shaped or slightly rounded components that emphasize a robust, technical utility.

## Signature DNA
1. **The Nectar Punch** (The use of #f35d05 as a high-contrast signal against dark backgrounds to drive user focus, seen on all primary CTAs across the homepage and pricing.)
2. **Industrial Block Pacing** (Alternating full-width sections of white #ffffff, light gray #f2f2f2, and deep charcoal #252525 to create a rhythmic, structured content flow.)
3. **Open Sans Utility** (A reliance on Open Sans across a wide weight range (400-700) to maintain a clean, legible, and "no-nonsense" technical aesthetic.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--nectar-bg-color` | `#ffffff` | Page foundation, primary surface | 144 | 1 | Computed Style |
| `--nectar-extra-color-2` | `#f2f2f2` | Secondary section backgrounds, borders | 9 | 1 | CSS Variable |
| `--nectar-extra-color-3` | `#333333` | Dark section backgrounds, footer accents | 6 | 1 | CSS Variable |
| `foundation-charcoal` | `#252525` | Deep section backgrounds | 3 | 0.6 | Computed Style |
| `foundation-ink` | `#4f4f4f` | Primary body text | 151 | 0.8 | Computed Style |
| `foundation-muted` | `#676767` | Secondary text, inactive button states | 143 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--nectar-accent-color` | `#f35d05` | Primary CTA background, brand highlights | 35 | 1 | CSS Variable |
| `accent-soft-orange` | `#e37c3b` | Decorative surface background | 2 | 0.6 | Computed Style |
| `accent-alert` | `#dd3333` | Pricing tier highlights (decorative_only) | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| Open Sans | 400, 600, 700 | Headings, UI, Body, Buttons | N/A (Google Font) | Apache 2.0 |
| Georgia | 400 | Large display icons/text | N/A | System Serif |
| icomoon | 400 | UI Icons | Material Icons | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|---|
| `{type.display-lg}` | 50px | 70px | normal | 400 | Hero display | `div.image-icon` |
| `{type.display-md}` | 48px | 48px | 1px | 600 | Input/Hero | `input` |
| `{type.h1}` | 35px | 41px | normal | 600 | Main page titles | `h1.vc_custom_heading` |
| `{type.h2}` | 26px | 32px | normal | 600 | Section headers | `h2.vc_custom_heading` |
| `{type.h3}` | 21px | 29px | normal | 600 | Sub-section titles | `h3.vc_custom_heading` |
| `{type.body-lg}` | 20px | 30px | normal | 400 | Lead paragraphs | `div.ocm-effect-wrap` |
| `{type.body}` | 18px | 27px | normal | 400 | Standard body | `p` |
| `{type.button}` | 14px | 20px | normal | 600 | Primary CTA text | `a.nectar-button.large` |
| `{type.caption}` | 12px | 13px | normal | 400 | Small labels, footer | `a` |

### Principles
1. **Heading Weight Consistency:** Headings almost exclusively use weight 600 to ensure authority without becoming overly heavy.
2. **Tight Display Tracking:** Larger display sizes (48px+) utilize 1px letter spacing to maintain readability at scale.
3. **Generous Body Leading:** Body text at 18px-20px uses a 1.5x line-height (30px) to ensure legibility against high-contrast backgrounds.

## Spacing
**Base unit:** 5px (derived from common multiples)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 12 |
| `{space.sm}` | 10px | 77 |
| `{space.md}` | 20px | 30 |
| `{space.lg}` | 30px | 24 |
| `{space.xl}` | 40px | 6 |
| `{space.section}` | 60px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers, standard inputs | 545 occurrences |
| `{radius.sm}` | 4px | Buttons, form fields | Rounded Button component |
| `{radius.full}` | 200px | Decorative cards, circular elements | Card component |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Primary site actions (Get Started, Connect)
**Pages observed:** All
**Spec:** Background: `#f35d05` | Text: `#ffffff` | Radius: `4px` | Padding: `15px 35px` | Typography: `14px/600`
**States observed:** Default | Hover: captured (darker orange shift) | Focus: not captured | Active: captured | Disabled: not captured

#### Surface (Dark)
**Role:** High-impact content sections
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#000000` | Text: `#676767` | Radius: `0px` | Padding: `0px`
**States observed:** Default

### Tier 2: Patterns

#### Pricing Card
**Role:** Tiered service selection
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` | Border: `1px solid #f2f2f2` | Radius: `0px` | Padding: `50px 0px`
**States observed:** Default

#### Rounded Button (Jumbo)
**Role:** Hero section primary actions
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#f35d05` | Text: `#ffffff` | Radius: `4px` | Padding: `23px 50px` | Typography: `18px/600`
**States observed:** Default

### Tier 3: Surface-specific

#### Ghost Button (Outline)
**Role:** Secondary actions on dark backgrounds
**Pages observed:** Pricing, Homepage
**Spec:** Background: `transparent` | Border: `2px solid #ffffff` | Text: `#ffffff` | Radius: `4px` | Padding: `7px 60px`
**States observed:** Default

#### Decorative Card
**Role:** Icon or image containment
**Pages observed:** Homepage, About
**Spec:** Background: `rgba(0, 0, 0, 0.25)` | Border: `none` | Radius: `200px` | Padding: `0px`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Vertical Padding | 60px - 80px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Buttons transition to full-width; padding reduces to 15px; font-size for H1 drops to 28px. |
| Desktop | 1440px | Standard 12-column grid; 60px section spacing. |

## Imagery & decoration
Bundlar uses realistic product photography and 3D hardware renders (laptops, tablets, AR glasses) to ground the software. Visuals are often placed within dark containers to make the UI "pop." The system avoids illustrative icons in favor of technical, line-based glyphs from the icomoon set.

## Do's
- Use `#f35d05` for the primary action on every page.
- Maintain a 0px border radius for all major section containers.
- Pair Open Sans 600 with `#ffffff` text on dark `#252525` backgrounds.
- Use 30px-40px vertical padding for internal component spacing.
- Ensure all primary buttons have a 4px border radius.

## Don'ts
- **Wrong:** Using `#ff1053` (Extra Color 1) for a primary CTA. **Right:** Use `#f35d05`. **Reason:** Extra Color 1 is decorative/secondary and lacks the brand authority of Nectar Orange.
- Do not use Georgia for body text; it is reserved for display icons and large quotes.
- Do not apply shadows to cards; use `#f2f2f2` borders for definition instead.
- Do not use `#f35d05` for body text; it is strictly for headings and interactive elements.

## Similar brands
- Autodesk
- Matterport
- Unity
- Trimble

## Quick start

```css
/* CSS Custom Properties */
:root {
  --nectar-accent-color: #f35d05;
  --nectar-bg-color: #ffffff;
  --nectar-extra-color-2: #f2f2f2;
  --nectar-extra-color-3: #333333;
  --foundation-charcoal: #252525;
  --foundation-ink: #4f4f4f;
}
```

## Agent prompt examples
- "Create a primary CTA button using Nectar Orange #f35d05, white text, 4px border radius, and 15px 35px padding."
- "Design a content section with a #252525 background, using Open Sans 600 for headings and #676767 for secondary text."
- "Generate a pricing card with a 1px #f2f2f2 border, white background, and no border radius."

## Known gaps
- Hover and active states for secondary buttons were not fully captured in the automated crawl.
- Specific mobile-only typography tokens for H2-H4 were not explicitly declared in the source CSS.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://bundlar.com | 1440x900 | 2026-06-06 |
| Pricing | https://bundlar.com/pricing | 1440x900 | 2026-06-06 |
| Mobile Home | https://bundlar.com | 390x844 | 2026-06-06 |