# Agentbox.com.au Design System

> A corporate-technical interface balancing high-contrast slate foundations with a vibrant periwinkle primary action.

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

## TL;DR
Agentbox utilizes a professional "monochrome-plus" system where a deep charcoal foundation `#222b33` and neutral slate `#506478` anchor the layout. The primary brand energy is concentrated in a high-saturation periwinkle `#4e56ea`, used exclusively for primary CTAs and key interactive surfaces. Typography is structured around the geometric **Kumbh Sans** for authoritative display and **Inter** for high-legibility body content. Layouts are characterized by sharp-edged surfaces (0px radius) contrasted against specific 6px rounded interactive elements.

## Signature DNA
1. **The Periwinkle Pivot** (Primary CTA color `#4e56ea` used against neutral foundations to drive conversion focus, observed on homepage and about pages).
2. **Geometric Contrast** (Strict 0px sharp corners for structural containers and cards, with a specific 6px radius exception for buttons and inputs, creating a "soft-action, hard-frame" hierarchy).
3. **Slate-Teal Foundation** (Extensive use of `#506478` and teal-tinted neutrals like `#e0eded` to provide a technical, real-estate-CRM atmosphere).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.neutral.800}` | `#222b33` | Primary text, dark surface background | 105 | 1 | Computed style |
| `{color.white}` | `#ffffff` | Page background, button text | 70 | 1 | Brand page |
| `{color.teal.300}` | `#e0eded` | Secondary section background | 14 | 1 | `--teal-300` |
| `{color.teal.100}` | `#f5f9f9` | Subtle alternating section background | 9 | 1 | `--teal-100` |
| `{color.neutral.900}` | `#000000` | Secondary text emphasis | 26 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.accent.primary}` | `#4e56ea` | Primary CTA background, active text | 63 | 1 | `--accent--primary-1` |
| `{color.neutral.600}` | `#506478` | Secondary text, borders, icons | 253 | 1 | `--neutral--600` |
| `{color.secondary.1}` | `#08415c` | Deep navy border, button shadows | 48 | 1 | `--secondary--color-1` |
| `{color.teal.800}` | `#98c1c2` | Muted teal borders/text | 14 | 1 | `--teal-800` |
| `{color.orange.800}` | `#f99b1c` | Warning/Highlight text | 12 | 1 | `--seconday--orange-800` |
| `{color.secondary.5}` | `#9db4be` | Decorative borders | 2 | 1 | decorative_only |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `{color.success}` | `#05c168` | Confirmation states (`--system--green-300`) |
| `{color.error}` | `#dc2b2b` | Error/Validation (`--system--red-400`) |
| `{color.warning}` | `#ff9e2c` | Warning states (`--system--orange-300`) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| **Kumbh Sans** | 400, 600, 700 | Heading & Display | Kumbh Sans (Google Fonts) | OFL |
| **Inter** | 400, 500, 600, 700 | Body & UI Labels | Inter (Google Fonts) | OFL |
| **Line Rounded Icons** | 400, 700 | Interface Icons | Feather Icons (approx) | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 81px | 81px | normal | 600 | Number showcase | `div.number-showcase` |
| `{type.display.xl}` | 72px | 81px | normal | 700 | Hero headlines | `h2.display-1` |
| `{type.display.lg}` | 56px | 68px | normal | 700 | Section headers | `h2.display-2` |
| `{type.display.md}` | 42px | 54px | normal | 600 | Sub-section headers | `div.text-xl-semibold` |
| `{type.heading.sm}` | 20px | 26px | normal | 700 | Card titles | `div.title-experts` |
| `{type.body.lg}` | 18px | 30px | normal | 400 | Primary body copy | `div.container-large-2` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Footer links, excerpt | `a.footer-link` |
| `{type.body.sm}` | 14px | 16px | normal | 400 | Contact bar labels | `a.link-contact-bar` |

### Principles
1. **Heading Geometry:** Headlines always use Kumbh Sans with a minimum weight of 600 to maintain brand authority.
2. **Body Legibility:** Inter is used for all running text with a generous 1.6x line-height (30px on 18px text) to ensure readability in data-heavy contexts.
3. **Icon Alignment:** UI icons (Line Rounded) are sized to match the adjacent text height (typically 16px or 18px).

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 38 |
| `{space.sm}` | 16px | 47 |
| `{space.md}` | 32px | 45 |
| `{space.lg}` | 40px | 31 |
| `{space.xl}` | 64px | 12 |
| `{space.section}` | 160px | 14 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Structural cards, section containers | 486 occurrences |
| `{radius.interactive}` | 6px | Buttons, primary inputs | `a.btn-secondary`, `input` |
| `{radius.input.lg}` | 12px | Search/Large text inputs | `input#email-3` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | None | Default card state | `radius: 0px` surfaces |
| Button Shadow | `#08415c` (inset/drop) | Primary CTA depth | `--button-shadow--color-01` |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (e.g., "Book a demo")
**Pages observed:** Homepage, About
**Spec:** Background `{color.accent.primary}` (#4e56ea) / Text `{color.white}` (#ffffff) / Radius `{radius.interactive}` (6px) / Padding 20px 40px / Typography `{type.body.lg}` (18px, 500)
**States observed:** Default | Hover: Not captured | Active: Captured

#### Secondary Button
**Role:** Ghost/Outline actions
**Pages observed:** Homepage, About
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.neutral.800}` (#222b33) / Border 1px `{color.neutral.800}` / Radius 6px / Padding 20px 40px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns
#### Data Card (Sharp)
**Role:** Displaying metrics or features
**Pages observed:** Homepage, About
**Spec:** Background `{color.white}` (#ffffff) / Border 1px `{color.neutral.600}` (#506478) / Radius 0px / Padding 16px
**States observed:** Default

#### Section Surface (Teal)
**Role:** Alternating content bands
**Pages observed:** Homepage, About
**Spec:** Background `{color.teal.300}` (#e0eded) / Radius 0px / Padding 100px 0px 150px
**States observed:** Default

### Tier 3: Surface-specific
#### Search Input
**Role:** Lead capture or search
**Pages observed:** Homepage
**Spec:** Background `{color.white}` (#ffffff) / Border 1px `{color.secondary.5}` (#9db4be) / Radius 12px / Padding 8px 40px 8px 20px / Text `{color.accent.secondary}` (#537a8d)
**States observed:** Default

#### Footer Container
**Role:** Global site navigation footer
**Pages observed:** Homepage, About
**Spec:** Background `{color.neutral.800}` (#222b33) / Text `{color.neutral.600}` (#506478) / Radius 0px / Padding 0px 32px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (approx) |
| Section Padding (Vertical) | 160px |
| Column Gap | 32px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Desktop | 1440px | Full 12-column grid, 160px section spacing |
| Mobile | 390px | Single column stack, 64px section spacing, reduced display type |

## Imagery & decoration
Agentbox uses technical line-art and isometric 3D illustrations of buildings/blocks to reinforce the real estate context. It avoids soft photography, preferring high-contrast graphics that utilize the teal and slate palette.

## Do's
- Use `#4e56ea` exclusively for the primary path to conversion.
- Maintain 0px radius for all informational cards and containers.
- Pair Kumbh Sans (headings) with Inter (body) for all new layouts.
- Use `{space.section}` (160px) for vertical breathing room between major content blocks.
- Apply `#506478` for secondary text to maintain contrast while softening the UI.

## Don'ts
- **Wrong:** Using `#f99b1c` (Orange) for a primary button. **Right:** Use `#4e56ea`. **Reason:** Orange is a secondary accent for highlights, not a primary action.
- **Wrong:** Applying rounded corners (e.g., 8px) to feature cards. **Right:** Use 0px. **Reason:** Sharp corners are a core brand structural rule.
- **Wrong:** Using Kumbh Sans for long-form body paragraphs. **Right:** Use Inter. **Reason:** Kumbh Sans is optimized for display, not legibility at small sizes.

## Quick start

```css
:root {
  --color-primary: #4e56ea;
  --color-neutral-dark: #222b33;
  --color-neutral-slate: #506478;
  --color-surface-teal: #e0eded;
  --font-heading: 'Kumbh Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-interactive: 6px;
  --radius-structural: 0px;
}
```

## Known gaps
- Hover and Focus states for primary buttons were not fully captured in the static evidence.
- Mobile-specific navigation menu transitions were not analyzed.
- Shadow values for elevated cards (if any) were not present in the CSS variable evidence.