# Agilox Design System

> High-contrast industrial precision defined by acid-green accents against a deep charcoal and white architectural grid.

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

## TL;DR
Agilox utilizes a high-voltage monochrome base punctuated by a single, high-visibility primary color: Agilox Green (#99cc33). The system is built on a rigid architectural grid with generous vertical spacing (100px section padding) and sharp geometry (0px default radius). Typography relies exclusively on Open Sans, using the Bold weight (700-900) for heavy industrial headlines and the Regular weight (400) for technical body copy. Interactive elements are strictly defined as either solid green blocks or outlined "contra" buttons, maintaining a utilitarian, engineering-first aesthetic.

## Signature DNA
1. **Agilox Green Punctuation** (#99cc33 used for primary CTAs, key headings, and borders against dark backgrounds to create maximum functional focus. Seen on Homepage and About pages.)
2. **Industrial Sharpness** (A near-universal 0px border radius for sections and primary containers, reinforcing a robotic/mechanical identity. Seen across all analyzed pages.)
3. **Heavyweight Display** (Open Sans Bold at 700-900 weight for large-scale headlines up to 65px, creating a high-authority "headline" voice. Seen on Homepage hero and section headers.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text, surface background | 54 | 1.0 | `--wp--preset--color--white` |
| `{color.black}` | `#000000` | Primary text, footer background, borders | 31 | 1.0 | `--wp--preset--color--black` |
| `{color.charcoal}` | `#1b2227` | Primary body text | 12 | 0.8 | Computed Style |
| `{color.slate}` | `#393e42` | Dark section backgrounds | 5 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#99cc33` | Primary CTAs, active borders, heading accents | 61 | 0.8 | Resolved Primary |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| Open Sans Bold | 700, 900 | Display, Headings | Open Sans Bold | Google Fonts |
| Open Sans | 400, 700 | Body, UI, Buttons | Open Sans | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display.xl}` | 65px | 65px | normal | 700 | Hero Headline | `h1.headline` |
| `{text.display.lg}` | 60px | 60px | normal | 700 | Section Headline | `div.headline` |
| `{text.display.md}` | 40px | 48px | normal | 700 | Secondary Headline | `h2` |
| `{text.display.heavy}` | 40px | 48px | normal | 900 | Emphasis | `strong` |
| `{text.heading.md}` | 32px | 38.4px | normal | 700 | Section Header | `h2` |
| `{text.heading.sm}` | 30px | 36px | normal | 700 | Sub-section Head | `h3.headline` |
| `{text.subline}` | 25px | 25px | normal | 700 | Sub-headings | `div.subline` |
| `{text.button}` | 18px | 19.8px | normal | 700 | Primary CTA | `a.btn-primary` |
| `{text.body}` | 16px | 24px | normal | 400 | Default Body | `div.dark-bg` |

### Principles
- **Headlines are always Bold.** Never use Regular weight for display or heading roles.
- **Tight Line Heights on Display.** Large headlines use 1.0x line-height (e.g., 65px/65px) to maintain industrial density.
- **Color as Emphasis.** Use `{color.primary}` for specific keywords within headlines to draw focus.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 5px | 5 |
| `{space.sm}` | 10px | 4 |
| `{space.md}` | 20px | 52 |
| `{space.lg}` | 30px | 27 |
| `{space.section}` | 100px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Sections, Cards, Primary Buttons | 105 occurrences |
| `{radius.input}` | 3px | Form inputs, Rounded Buttons | 16 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All surfaces | No shadows observed in primary UI components |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary Action (Softened)
**Pages observed:** Homepage, Pricing, About
**Spec:** Background: `#99cc33` / Text: `#ffffff` / Border: 2px `#99cc33` / Radius: `3px` / Padding: `20px 30px` / Typography: `18px Bold`
**States observed:** Default | Hover: Not captured

#### Button Contra
**Role:** Secondary Action on Dark Surfaces
**Pages observed:** Homepage, About
**Spec:** Background: `transparent` / Text: `#ffffff` / Border: 2px `#99cc33` / Radius: `3px` / Padding: `20px 30px` / Typography: `18px Bold`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns
#### Section Surface
**Role:** Dark container for content blocks
**Pages observed:** Homepage, About
**Spec:** Background: `#393e42` / Text: `#ffffff` / Radius: `0px` / Padding: `100px 0px`
**States observed:** Default

### Tier 3: Surface-specific
#### Video Play Card
**Role:** Media trigger
**Pages observed:** Homepage
**Spec:** Background: `#99cc33` / Border: 1px `#99cc33` / Radius: `50%` (Icon) / Padding: `0px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1200px (approx) |
| Section Padding | 100px vertical |
| Content Gap | 20px - 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked grid, reduced headline sizes, full-width buttons |

## Imagery & decoration
- **Technical Iconography:** Uses thin-stroke white icons on dark backgrounds.
- **Industrial Photography:** High-contrast, desaturated imagery of robots in warehouse environments.
- **Avoids:** Soft shadows, gradients, and rounded corners on structural elements.

## Do's
- Use `#99cc33` for all primary calls to action.
- Maintain `0px` border radius for all major section containers.
- Pair Open Sans Bold (700) with Regular (400) for clear hierarchy.
- Use `100px` vertical padding between major content sections.
- Ensure text on dark backgrounds uses `#ffffff` for legibility.

## Don'ts
- **Wrong:** Using `#0693e3` (Vivid Cyan Blue) for a primary button.
- **Right:** Use `#99cc33`.
- **Reason:** Cyan blue is a legacy WordPress token; Agilox Green is the validated brand primary.
- Do not use drop shadows on cards or buttons.
- Do not use serif fonts; the brand is strictly sans-serif.
- Do not use rounded corners ( > 3px) on industrial UI components.

## Similar brands
- Kuka Robotics
- Fanuc
- ABB Robotics
- Boston Dynamics

## Quick start

### CSS Variables
```css
:root {
  --agilox-green: #99cc33;
  --agilox-black: #000000;
  --agilox-charcoal: #1b2227;
  --agilox-slate: #393e42;
  --agilox-white: #ffffff;
  --radius-sharp: 0px;
  --radius-ui: 3px;
  --space-section: 100px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #99cc33;
  --color-surface-dark: #393e42;
  --font-display: "Open Sans Bold", sans-serif;
  --font-body: "Open Sans", sans-serif;
  --spacing-section: 100px;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Create a hero section with a `#1b2227` background, a `65px` Open Sans Bold headline in white, and a primary button using `#99cc33` with `0px` border radius."
- "Design a 3-column feature grid where each card has a `1px` border of `#99cc33` and `0px` corners."
- "Generate a footer using `#000000` background with Open Sans 16px text in `#ffffff`."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Mobile-specific typography scale tokens were not fully extracted.
- Semantic colors (Success/Error) were not present on the analyzed marketing pages.

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