# Modaxo Design System

> A structured corporate architecture defined by deep purple foundations, high-energy orange actions, and expansive white space.

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

## TL;DR
Modaxo utilizes a high-contrast palette where deep purple (#592c82) serves as the primary brand anchor, contrasted against a vibrant orange (#ff5100) used for high-priority calls to action. The system is built on a clean white foundation (#ffffff) with a strong emphasis on Open Sans typography across all hierarchy levels. Layouts are characterized by generous section padding and a mix of sharp and rounded geometries, specifically 10px and 20px radii for content containers. Elevation is handled through subtle, large-spread shadows (0px 10px 10px) rather than heavy borders, maintaining a modern, professional software-group aesthetic.

## Signature DNA
1. **The Action Orange Pivot** (The use of #ff5100 for primary "Vision" and "Brand" CTAs creates a high-visibility strike zone against the more conservative purple and white background.)
2. **Geometric Watermarking** (Large, low-opacity "X" and "O" letterform graphics used as background decorative elements behind content sections.)
3. **Open Sans Uniformity** (A strict adherence to Open Sans across display, body, and UI labels, relying on weight shifts (400 to 700) and scale (14px to 48px) to create hierarchy.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| Not captured in source | — | — | — | — |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--bs-white` | `#ffffff` | Page background, card surfaces, button text | 32 | 1 | `css_variable` |
| `--bs-black` | `#000000` | Emphasis text, box shadows | 12 | 1 | `css_variable` |
| `text-foundation` | `#49464f` | Primary body text, secondary button text | 59 | 0.8 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--bs-purple` | `#592c82` | Primary brand color, footer background, secondary CTAs | 21 | 1 | `css_variable` |
| `--bs-orange` | `#ff5100` | Primary CTA background, active indicators | 20 | 1 | `css_variable` |
| `--bs-primary` | `#0d6efd` | Links, focus rings, interactive text | 24 | 1 | `css_variable` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--bs-success-bg-subtle` | `#d1e7dd` | Success states |
| `--bs-danger-bg-subtle` | `#f8d7da` | Error/Danger states |
| `--bs-warning-bg-subtle` | `#fff8cc` | Warning states |
| `--bs-info-bg-subtle` | `#cff4fc` | Information states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Open Sans | 400, 700 | All (Display, Body, UI) | N/A (Google Font) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-lg` | 48px | 64px | normal | 400 | Section Headlines | `h2` |
| `display-md` | 40px | 40px | normal | 700 | Stat Counters | `span.timer` |
| `heading-sm` | 24px | 38px | normal | 400 | Intro Paragraphs | `p:nth-of-type(1)` |
| `heading-sm-bold`| 24px | 38px | normal | 700 | Strong Emphasis | `strong` |
| `ui-label-lg` | 20px | 20px | 0.5px | 700 | Orange CTA Buttons | `a.btn.btn-orange` |
| `body-lg` | 18px | 28px | normal | 400 | Default Body Text | `section.masthead` |
| `ui-label-md` | 16px | 20px | 0.5px | 700 | Secondary Buttons | `a.btn` |
| `body-sm` | 14px | 26px | normal | 700 | Inline Links | `a` |

### Principles
1. **Tight Display Tracking:** Larger display sizes (48px) maintain "normal" tracking but utilize significant line-height (1.33x) for readability.
2. **Button Letter Spacing:** All interactive button labels (16px and 20px) utilize a 0.5px tracking to increase UI clarity.
3. **Weight-Based Hierarchy:** The system avoids medium weights, opting for a sharp contrast between 400 (Regular) and 700 (Bold).

## Spacing
**Base unit:** 4px (inferred from 8px, 16px, 24px, 36px clusters)
| Token | Value | Occurrences |
|---|---|---|
| `spacing-xs` | 8px | 7 |
| `spacing-sm` | 16px | 7 |
| `spacing-md` | 24px | 8 |
| `spacing-lg` | 36px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-sharp` | 0px | Section containers, footer | 106 occurrences |
| `radius-sm` | 5px | Input fields, small buttons | 6 occurrences |
| `radius-md` | 10px | Content cards, secondary cards | 16 occurrences |
| `radius-lg` | 20px | Large feature cards | 3 occurrences |
| `radius-pill` | 50px | Decorative circular elements | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `shadow-soft` | `rgba(0, 0, 0, 0.1) 0px 10px 10px 0px` | Feature cards, Insight cards | 6 occurrences |
| `shadow-deep` | `rgba(0, 0, 0, 0.2) 0px 7px 11px 0px` | Hover states / Floating cards | 3 occurrences |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary actions
**Pages observed:** https://modaxo.com
**Spec:** Background `#592c82` / Text `#ffffff` / Border `#592c82` / Radius `5px` / Padding `8.64px 18px` / Typography `16px Bold`
**States observed:** Default | Hover: captured | Focus: not captured | Active: captured | Disabled: not captured

### Tier 2: Patterns
#### Content Card
**Role:** Feature display and acquisition criteria
**Pages observed:** https://modaxo.com
**Spec:** Background `#ffffff` / Text `#000000` / Border `0px` / Radius `10px` / Padding `27px` / Shadow `rgba(0, 0, 0, 0.1) 0px 10px 10px 0px`
**States observed:** Default | Hover: captured

#### Insight Card
**Role:** Blog and news previews
**Pages observed:** https://modaxo.com
**Spec:** Background `#ffffff` / Text `#49464f` / Border `0px` / Radius `10px` / Padding `24px` / Shadow `shadow-soft`
**States observed:** Default | Hover: captured

### Tier 3: Surface-specific
#### Masthead Surface
**Role:** Hero section background
**Pages observed:** https://modaxo.com
**Spec:** Background `#360f59` (Deep Purple) / Text `#ffffff` / Radius `0px` / Padding `0px`
**States observed:** Default

#### Footer Surface
**Role:** Global site footer
**Pages observed:** https://modaxo.com
**Spec:** Background `#592c82` / Text `#ffffff` / Radius `0px` / Padding `0px`
**States observed:** Default

#### Orange CTA Button
**Role:** High-priority "Vision" and "Brand" links
**Pages observed:** https://modaxo.com
**Spec:** Background `#ff5100` / Text `#ffffff` / Radius `5px` / Padding `10px 20px` / Typography `20px Bold`
**States observed:** Default | Hover: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1320px (standard Bootstrap container) |
| Section Padding | 80px - 100px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; 3-column grids stack to 1-column. |
| Desktop | 1440px | Full horizontal navigation; multi-column grids (3-up or 4-up). |

## Imagery & decoration
Modaxo uses high-resolution photography of transit environments (trains, buses, urban infrastructure). Decoration is strictly geometric, utilizing large, semi-transparent "X" and "O" shapes from the logo as background watermarks.

## Do's
- Use `#ff5100` (Orange) for the most critical conversion points on the page.
- Apply `radius-md` (10px) to all standard content cards.
- Ensure all body text uses Open Sans at `#49464f` for optimal readability.
- Use generous section spacing (minimum 80px) to maintain the "Global Collective" feel.
- Use `#592c82` (Purple) for large surface areas like footers and hero overlays.

## Don'ts
- **Wrong:** Using `#ff5100` for secondary or tertiary buttons. **Right:** Use `#592c82` for secondary actions. **Reason:** Orange is reserved for high-level brand vision and primary navigation CTAs.
- **Wrong:** Applying borders to cards. **Right:** Use `shadow-soft` for card definition. **Reason:** The system relies on elevation rather than strokes for depth.
- **Wrong:** Mixing serif fonts into the UI. **Right:** Stick exclusively to Open Sans. **Reason:** Brand consistency is tied to the clean sans-serif aesthetic.
- **Wrong:** Using sub-brand colors (like a specific product blue) as the main site background. **Right:** Use `#ffffff` or `#592c82`. **Reason:** The parent brand must remain monochrome/purple to maintain its position as the "Permanent Home."

## Similar brands
- Constellation Software
- Veralon
- Roper Technologies

## Quick start

### CSS Custom Properties
```css
:root {
  --modaxo-purple: #592c82;
  --modaxo-orange: #ff5100;
  --modaxo-white: #ffffff;
  --modaxo-text: #49464f;
  --modaxo-radius-md: 10px;
  --modaxo-shadow-soft: 0px 10px 10px 0px rgba(0, 0, 0, 0.1);
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #592c82;
  --color-accent: #ff5100;
  --font-sans: "Open Sans", sans-serif;
  --radius-md: 10px;
  --shadow-soft: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
}
```

## Agent prompt examples
- "Create a feature card using Modaxo's 10px border radius, a white background, and the soft 10px spread shadow."
- "Generate a primary CTA button with the Modaxo orange (#ff5100), 20px bold Open Sans text, and 5px border radius."
- "Design a section header using Open Sans at 48px with a line height of 64px, following the Modaxo layout spacing."

## Known gaps
- Hover state hex codes for buttons were not explicitly captured in the token set, though visual changes were observed.
- Specific mobile-only spacing tokens were not isolated from the desktop scale.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://modaxo.com | 1440px | 2026-06-06 |
| Homepage Mobile | https://modaxo.com | 390px | 2026-06-06 |