# Axilion Design System

> High-contrast utilitarianism anchored by Segoe UI and a strict achromatic palette.

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

## TL;DR
Axilion employs a "monochrome parent" system type, utilizing a stark white background (#ffffff) contrasted against deep charcoal (#202124) and slate gray (#5f6368) text. The typography is exclusively Segoe UI, ranging from 12px captions to 24px headings, with a notable reliance on weight 500 for semantic emphasis. Layouts are defined by sharp 0px borders and a consistent 4px-based spacing rhythm. The interface avoids saturated accents, relying on high-contrast ratios (16.1:1) to drive hierarchy and legibility.

## Signature DNA
1. **Achromatic Hierarchy** (The system uses #202124 for primary headers and #5f6368 for secondary body text across all analyzed pages, ensuring a purely grayscale visual language.)
2. **Sharp Geometry** (A universal border-radius of 0px is applied to all captured containers and elements, creating a rigid, technical aesthetic.)
3. **Segoe UI Utility** (The brand relies on system-native Segoe UI for both display and functional roles, prioritizing cross-platform consistency over custom brand fonts.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background | 3 | 1.0 | dominant_bg |
| `{color.ink.primary}` | `#202124` | Primary headings and high-emphasis text | 6 | 0.6 | computed_style |
| `{color.ink.secondary}` | `#5f6368` | Default body text and descriptions | 9 | 0.6 | computed_style |

### Accent
*Not captured in source. System is currently strictly monochrome.*

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.error}` | `#202124` | Error code text (observed in `div.error-code`) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Segoe UI | 400, 500, 700 | Universal (Heading, Body, Caption) | Arimo | System Native |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.h1}` | 24px | 30px | normal | 400 | Primary Page Header | `h1` |
| `{text.heading-md}` | 24px | 30px | normal | 500 | Section Emphasis | `span` |
| `{text.body.strong}` | 15px | 24px | normal | 700 | Bold Body Text | `strong` |
| `{text.body}` | 15px | 24px | normal | 400 | Standard Paragraph | `p` |
| `{text.caption}` | 12px | 24px | normal | 400 | Error Codes / Metadata | `div.error-code` |

### Principles
1. **Line-height Consistency:** Standard body and caption text maintain a 24px line-height regardless of font size (12px or 15px).
2. **Medium Weight Emphasis:** Weight 500 is used for structural headings rather than standard 700 bold.
3. **Zero Tracking:** All typography uses `normal` letter spacing; no custom kerning is applied to display text.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.3}` | 12px | 3 |
| `{space.3.75}` | 15px | 3 |
| `{space.4}` | 16px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | All containers, buttons, and inputs | universal (15 occurrences) |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elevation.flat}` | none | All surfaces sit flush on canvas | universal |

## Components
### Tier 1: Foundational
#### Text Container
**Role:** Standard content wrapper for prose.
**Pages observed:** 3
**Spec:** Background: transparent / Text: #5f6368 / Typography: {text.body}
**States observed:** Default

### Tier 2: Patterns
#### Error Display
**Role:** Technical feedback for failed states.
**Pages observed:** 3
**Spec:** Background: #ffffff / Text: #202124 / Typography: {text.caption} / Radius: 0px
**States observed:** Default

### Tier 3: Surface-specific
*Not captured in source.*

## Layout
| Property | Value |
|---|---|
| Max-width | Not captured |
| Grid | Single column (observed in error states) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Content centers vertically; font sizes remain constant at 15px/24px. |

## Imagery & decoration
The brand uses minimal decoration. The only observed graphic is a stylized document icon with a "sad face" motif used for error states, rendered in #202124.

## Do's
- Use #202124 for all primary headings to ensure 16.1:1 contrast.
- Maintain 0px border radius on all UI elements.
- Set body text to 15px with a 24px line-height.
- Use Segoe UI weight 500 for sub-headers.
- Keep the background pure #ffffff.

## Don'ts
- **Wrong:** Using a sub-brand blue for a primary button. **Right:** Use #202124. **Reason:** The parent brand is strictly monochrome; color is reserved for sub-brand layers.
- **Wrong:** Applying rounded corners (e.g., 4px) to inputs. **Right:** Use 0px. **Reason:** Sharp corners are a signature DNA move.
- **Wrong:** Using weight 300 for display text. **Right:** Use 400 or 500. **Reason:** Light weights are not supported in the captured typography scale.

## Similar brands
- Google (System pages)
- Microsoft (Support documentation)
- MDN Web Docs

## Quick start

```css
:root {
  --ax-color-canvas: #ffffff;
  --ax-color-ink-primary: #202124;
  --ax-color-ink-secondary: #5f6368;
  --ax-font-main: "Segoe UI", system-ui, sans-serif;
  --ax-radius-none: 0px;
  --ax-space-base: 4px;
}
```

## Agent prompt examples
- "Generate a technical error message component using Axilion's #202124 text color, Segoe UI 12px/24px typography, and a 0px border radius."
- "Create a content section with a 24px Segoe UI heading (weight 400) and 15px body text in #5f6368."
- "Design a data table for Axilion using strictly #ffffff backgrounds and 1px #202124 borders with no rounded corners."

## Known gaps
- Navigation and Footer components were not captured due to site connectivity issues during the crawl.
- Primary CTA button states (hover/active) are missing from the evidence.
- Saturated accent colors were not observed on the parent domain.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://axilion.com | 1440x900 | 2026-06-06 |
| Pricing | https://axilion.com/pricing | 1440x900 | 2026-06-06 |
| Mobile | https://axilion.com | 390x844 | 2026-06-06 |