# Binadox Design System

> Corporate blue precision meets high-contrast functionalism, anchored by a signature coral-red primary action.

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

## TL;DR
Binadox utilizes a professional "Enterprise Blue" palette dominated by deep navy (#002959) and mid-tone royal blue (#104a8f) against a clean white (#ffffff) canvas. The system breaks from standard SaaS monochrome through a high-voltage coral-red (#ee4638) used exclusively for high-conversion CTAs. Typography is strictly sans-serif, pairing the geometric Maax for headings with the highly legible Inter for body and UI. Layouts are structured with generous vertical spacing (up to 140px) and a consistent 4px/8px border radius system that maintains a modern, software-as-a-service aesthetic.

## Signature DNA
1. **The Coral Trigger** (#ee4638 is reserved for the most critical conversion points—"Get started now" and "Try for Free"—creating a singular focal point against the otherwise blue-heavy interface.)
2. **Blue-on-Blue Layering** (Deep navy text #002959 sits on light blue #ebf5fc or royal blue #1153a2 backgrounds to create information hierarchy without losing brand color density.)
3. **Maax-Bold Display** (The use of Maax-Bold at 90px for hero sections establishes a heavy, authoritative presence that balances the lighter Inter body text.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.canvas}` | `#ffffff` | Page background, card surface | 69 | 1 | Computed style |
| `{color.ink}` | `#000000` | Primary text, header labels | 252 | 1 | `--wp--preset--color--black` |
| `{color.ink.muted}` | `#666666` | Secondary body, search text | 218 | 1 | `--header-search-color` |
| `{color.surface.soft}` | `#f9f9f9` | Hover states, alternating bands | 8 | 1 | `--header-bg-2-color` |
| `{color.border.light}` | `#e0e0e0` | Default card and table borders | 28 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.brand.navy}` | `#002959` | Display titles, search titles | 23 | 1 | `--header-search-title-color` |
| `{color.brand.royal}` | `#104a8f` | Primary buttons, active borders | 23 | 0.8 | Computed style |
| `{color.brand.coral}` | `#ee4638` | High-priority conversion CTAs | 4 | 0.6 | Computed style |
| `{color.brand.sky}` | `#9bc1ec` | Decorative text, subheadings | 12 | 0.8 | Computed style |
| `{color.surface.tint}` | `#ebf5fc` | Feature card backgrounds | 12 | 0.8 | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Maax | 400, 500, 700 | Headings, Display | Montserrat | Commercial |
| Inter | 400, 500, 600 | Body, UI, Navigation | Inter (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.mega}` | 90px | 108px | normal | 700 | Hero title | `div.bd-get-started-section__title` |
| `{type.display.lg}` | 40px | 48px | normal | 500 | Section title | `h1.bd-main-section-title` |
| `{type.heading.md}` | 26px | 36.4px | normal | 400 | Feature title | `h3.bd-feature-card__title` |
| `{type.heading.sm}` | 24px | 28.8px | normal | 500 | Solution title | `h3.bd-solution-block__title` |
| `{type.body.lg}` | 18px | 25.2px | normal | 400 | Intro text | `header.bd-header` |
| `{type.body.md}` | 16px | 25.2px | normal | 500 | Nav, Buttons | `li.bd-nav-list-item` |
| `{type.body.sm}` | 15px | 25.2px | normal | 400 | Sub-header | `div.bd-sub-header__elems` |
| `{type.caption}` | 14px | 21px | normal | 400 | Tags | `a.bd-feature-card-tag` |

### Principles
1. **Heading weight contrast:** Display titles use 700 weight (Maax-Bold), while sub-headings drop to 400/500 to ensure clear semantic hierarchy.
2. **Tight display leading:** Large display type (90px) uses a 1.2 line-height ratio, while body text (16px) uses a more breathable 1.57 ratio.
3. **Sans-serif exclusivity:** No serif fonts are permitted in the UI; technical and marketing copy both rely on the Maax/Inter pairing.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 16 |
| `{space.md}` | 20px | 52 |
| `{space.lg}` | 32px | 39 |
| `{space.xl}` | 48px | 9 |
| `{space.section}` | 80px | 6 |
| `{space.hero}` | 140px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Section containers | 482 occurrences |
| `{radius.sm}` | 4px | Buttons, Inputs, Cards | `Rounded Button` component |
| `{radius.md}` | 8px | Badges, Pricing cards | `Card` (observed once) |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.flat}` | none | Default state | 144 occurrences |
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 2px 2px 6px 0px` | Feature cards | 17 occurrences |

## Components
### Tier 1: Foundational
#### Rounded Button (Primary)
**Role:** Main user actions (Get Started, Try for Free)
**Pages observed:** https://binadox.com, https://binadox.com/pricing
**Spec:** Background: `#104a8f` / Text: `#ffffff` / Radius: `4px` / Padding: `0px 22px` / Font: `Inter-Medium 16px`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Rounded Button (Conversion)
**Role:** High-priority CTA
**Pages observed:** https://binadox.com, https://binadox.com/pricing
**Spec:** Background: `#ee4638` / Text: `#ffffff` / Radius: `4px` / Padding: `0px 22px` / Font: `Inter-Medium 16px`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns
#### Navigation
**Role:** Global site header
**Pages observed:** https://binadox.com, https://binadox.com/pricing
**Spec:** Background: `#ffffff` / Text: `#000000` / Border-bottom: `1px #f0f0f0` / Font: `Inter-Medium 16px`
**States observed:** Default | Hover: `#f9f9f9` background

#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** https://binadox.com
**Spec:** Background: `#ffffff` / Border: `1px #e0e0e0` / Radius: `4px` / Shadow: `2px 2px 6px rgba(0,0,0,0.1)`
**States observed:** Default

### Tier 3: Surface-specific
#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** https://binadox.com/pricing
**Spec:** Background: `#ffffff` / Border: `1px #e0e0e0` / Radius: `4px` / Padding: `32px 40px`
**States observed:** Default

#### Blue Surface Band
**Role:** Section differentiation
**Pages observed:** https://binadox.com, https://binadox.com/pricing
**Spec:** Background: `#1153a2` / Text: `#ffffff` / Padding: `140px 0px`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max Container Width | 1200px |
| Section Vertical Padding | 80px - 140px |
| Column Gap | 24px |

## Imagery & decoration
- **Iconography:** Outlined, single-color icons using `{color.brand.royal}` (#104a8f).
- **Photography:** High-quality office/collaborative settings with a natural, slightly cool color grade.
- **Decorative Elements:** Solid blue squares/rectangles used as offset background accents for images.

## Do's
- Use `#ee4638` (Coral) exclusively for the primary conversion path.
- Pair Maax-Bold headings with Inter-Regular body text for maximum readability.
- Apply `{radius.sm}` (4px) to all interactive elements including buttons and form fields.
- Use `{color.surface.tint}` (#ebf5fc) for large background areas to reduce eye strain compared to pure white.
- Maintain a minimum of 80px vertical padding between major content sections.

## Don'ts
- **Wrong:** Using `#ee4638` for secondary buttons or navigation links. **Right:** Use `#104a8f` or transparent outlines. **Reason:** Coral is the high-priority conversion signal.
- **Wrong:** Applying shadows to every card. **Right:** Use 1px `#e0e0e0` borders for standard cards. **Reason:** Shadows are reserved for specific feature emphasis.
- **Wrong:** Mixing serif fonts into the typography scale. **Reason:** The brand identity is strictly geometric sans-serif.

## Similar brands
- Microsoft Azure (Blue-centric enterprise SaaS)
- Apptio (Cloud cost management space)
- Flexera (IT asset management aesthetic)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-brand-navy: #002959;
  --color-brand-royal: #104a8f;
  --color-brand-coral: #ee4638;
  --color-canvas: #ffffff;
  --color-surface-soft: #f9f9f9;
  --color-border: #e0e0e0;
  --font-display: 'Maax', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-sm: 4px;
  --shadow-subtle: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the token evidence.
- Mobile-specific typography scale for display sizes (90px) was not fully sampled.
- Error and Success semantic colors were not present on analyzed pages.

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