# Bizdata360 Design System

> High-contrast enterprise utility defined by a primary yellow signal, deep obsidian foundations, and a multi-chromatic product categorization system.

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

## TL;DR
Bizdata360 utilizes a "monochrome plus signal" strategy, where a vibrant primary yellow (`#f2c300`) anchors the brand against a stark black (`#000000`) and white (`#ffffff`) canvas. The system is architected for high-density information display, using a tight 4px-based spacing logic and a sophisticated typography scale centered on Inter. While the core brand is yellow, the system employs a functional palette of secondary colors (pink, blue, purple, green) to differentiate product features and pricing tiers. UI elements favor sharp or slightly softened geometry (4px to 8px radii), with high-impact "pill" buttons reserved for global navigation actions.

## Signature DNA
1. **The Yellow Signal** (`#f2c300`): Used exclusively for primary conversion points and "Watch Demo" triggers, creating a singular path for user attention across all pages.
2. **Obsidian Block Foundations**: Large sections of the site (footers, primary CTAs, and feature cards) use pure black (`#000000`) to create a heavy, authoritative enterprise aesthetic.
3. **Functional Chromaticism**: The use of distinct hues like Pink (`#ff7ad5`) and Blue (`#038ff7`) as background "plates" for specific product categories (e.g., eZintegrations vs Goldfinch AI) to provide immediate visual orientation.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, button backgrounds, footer canvas | 320 | 1 | Computed |
| `{color.white}` | `#ffffff` | Page background, primary surface, inverted text | 114 | 1 | Computed |
| `{color.gray.border}` | `#e7e8ec` | Default dividers and card outlines | 64 | 1 | CSS Variable |
| `{color.gray.text}` | `#8b8b8e` | Secondary body text and metadata | 104 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#f2c300` | Primary CTA background, "Watch Demo" button | 11 | 1 | Brand Page |
| `{color.primary.alt}` | `#ffdd22` | Alternate primary used in "About" sections | 15 | 0.8 | Computed |
| `{color.gray.600}` | `#717989` | Secondary borders and button outlines | 6 | 1 | CSS Variable |
| `{color.pink.400}` | `#ff7ad5` | Decorative product category plate | 2 | 1 | Decorative only |
| `{color.blue.500}` | `#038ff7` | Decorative product category plate | 2 | 1 | Decorative only |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `{color.error}` | `#f55050` | Form validation errors |
| `{color.success}` | `#7ad03a` | Success indicators (inherited from WC) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Inter | 200, 300, 400, 500, 600, 700 | Primary UI, Headings, Buttons | Inter (Google Fonts) | SIL OFL |
| Roboto | 400, 500 | Display Hero Headings | Roboto (Google Fonts) | Apache 2.0 |
| Segoe UI | 300, 500, 600, 700 | System fallback / Utility text | N/A | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display}` | 43px | 43px | -0.86px | 400 | Main Hero H1 | `h1.elementor-heading-title` |
| `{text.h1}` | 35px | 38.5px | -1.4px | 600 | Section Headers | `h2.h1.banner-new-heading` |
| `{text.h2}` | 25px | 32.5px | -0.75px | 600 | Sub-section Headers | `h3.h4` |
| `{text.body.lg}` | 18px | 28.8px | normal | 400 | Lead paragraphs | `p` |
| `{text.body}` | 16px | 24px | -0.15px | 500 | Default text / Buttons | `a.main-btn.cc-black` |
| `{text.body.sm}` | 14px | 21px | -0.15px | 400 | Footer links / Metadata | `li#menu-item-69` |
| `{text.caption}` | 12px | 18px | -0.15px | 600 | Floating labels / Tags | `div#bdsp_floating_text` |
| `{text.tiny}` | 10px | 15px | -0.15px | 500 | Utility nav / Overlines | `header#site-header` |

### Principles
1. **Tight Tracking on Display**: Large headings (35px+) use negative letter spacing (-0.75px to -1.4px) to maintain visual density.
2. **Semibold UI**: Interactive elements and subheadings consistently use weight 600 (Inter) to distinguish from weight 400 body prose.
3. **Line Height Utility**: Body text maintains a 1.5x ratio (24px height on 16px text) for readability in dense data contexts.

## Spacing
**Base unit:** 4px
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.1}` | 4px | 16 |
| `{space.2}` | 8px | 9 |
| `{space.3}` | 12px | 4 |
| `{space.5}` | 20px | 32 |
| `{space.section}` | 50px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Primary layout containers | 673 occurrences |
| `{radius.sm}` | 4px | Input fields, standard cards | `radius: 4px` (Card component) |
| `{radius.md}` | 8px | Feature cards, pricing tiers | `radius: 8px` (Card component) |
| `{radius.lg}` | 20px | High-elevation cards | 81 occurrences |
| `{radius.pill}` | 999px | Global navigation CTAs | `radius: 999px` (Card component) |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.flat}` | none | Standard UI cards | Observed on 21 card instances |
| `{shadow.raised}` | `rgba(0, 0, 0, 0.15) 0px 4px 12px 0px` | Hover states / Pricing focus | Pricing page evidence |
| `{shadow.overlay}` | `rgba(0, 0, 0, 0.2) 0px 0px 25px 0px` | Modals / Navigation dropdowns | 3 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main conversion action (Watch Demo, Try for Free)
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `{color.primary}` (#f2c300) / Text `{color.black}` (#000000) / Radius 6px / Padding 10px 15px / Typography `{text.body.sm}` (12px)
**States observed:** Default: Captured | Hover: Not captured

#### Ghost Button
**Role:** Secondary actions
**Pages observed:** Homepage, Pricing
**Spec:** Background transparent / Text `{color.pink.400}` (#cd2653) / Border 1px `{color.gray.600}` (#717989) / Radius 4px / Padding 6px
**States observed:** Default: Captured | Active: Not captured

### Tier 2: Patterns

#### Standard Card
**Role:** Feature display, customer testimonials
**Pages observed:** Homepage, Pricing
**Spec:** Background `{color.white}` (#ffffff) / Border 1px `{color.gray.border}` (#e7e8ec) / Radius 4px / Padding 10px
**States observed:** Default: Captured

#### Product Category Plate
**Role:** Visual grouping for specific platforms (eZintegrations)
**Pages observed:** Homepage, Pricing
**Spec:** Background `{color.pink.400}` (#ff7ad5) or `{color.blue.500}` (#038ff7) / Border 1px `{color.gray.border}` / Radius 8px / Padding 5px
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Global Navigation
**Role:** Site-wide header
**Pages observed:** Homepage, Pricing
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.black}` (#000000) / Height 60px / Shadow none
**States observed:** Default: Captured

#### Dark Footer
**Role:** Site-wide footer
**Pages observed:** Homepage, Pricing
**Spec:** Background `{color.black}` (#000000) / Text rgba(231, 232, 236, 0.6) / Padding 50px 0px
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px (approx) |
| Grid | 12-column desktop |
| Section Gap | 84px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; 1-column stack |
| Desktop | 1440px | Full horizontal navigation; multi-column grids |

## Imagery & decoration
- **Partner Logos**: Displayed in grayscale or low-opacity grids to maintain brand neutrality.
- **Iconography**: Uses a mix of brand-specific colored icons and standard functional glyphs.
- **Avoids**: Heavy gradients or photographic backgrounds behind text.

## Do's
- Use `#f2c300` exclusively for the most important action on the page.
- Maintain a 1px border of `#e7e8ec` on all white cards.
- Apply negative letter spacing to any Inter text larger than 32px.
- Use pure black `#000000` for footer backgrounds to anchor the page.
- Ensure all body text has at least 24px of line height for readability.

## Don'ts
- **Wrong:** Using `#ffdd22` for primary conversion buttons.
  **Right:** Use `#f2c300`.
  **Reason:** `#ffdd22` is an "About" section variant and lacks the brand authority of the primary yellow.
- **Wrong:** Applying rounded corners greater than 8px to standard content cards.
  **Right:** Use 4px or 8px.
  **Reason:** Large radii are reserved for specific decorative plates and pill-style navigation.
- **Wrong:** Placing colored text on the primary yellow background.
  **Right:** Always use pure black `#000000` text on yellow.
  **Reason:** Contrast ratios are already low; black is required for legibility.

## Similar brands
- Salesforce (Enterprise density)
- SAP (Utility-first navigation)
- ServiceNow (High-contrast professional aesthetic)

## Quick start

### CSS Custom Properties
```css
:root {
  --biz-color-primary: #f2c300;
  --biz-color-black: #000000;
  --biz-color-white: #ffffff;
  --biz-color-gray-border: #e7e8ec;
  --biz-font-main: 'Inter', sans-serif;
  --biz-radius-sm: 4px;
  --biz-radius-md: 8px;
}
```

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