# Woxacorp Design System

> Deep navy foundations anchored by high-contrast electric blue accents and heavy-weight Inter headlines.

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

## TL;DR
Woxacorp utilizes a "Midnight Professional" aesthetic, characterized by deep navy surfaces (`#041632`, `#26262b`) and a vibrant primary blue accent (`#1363df`, `#89b7ff`). The system relies heavily on the **Inter** typeface, specifically at an 800 weight for display and section headings to convey industrial stability. Layouts alternate between clean white canvases and dense, dark-themed feature blocks. High-density UI elements like accordions and platform feature lists use a muted slate palette (`#48576f`) with generous 20px corner radii for interactive components.

## Signature DNA
1. **The Heavy Header** (Inter at 800 weight, 36px-48px, used for all major value propositions on woxacorp.com and woxacorp.com/about).
2. **Midnight Layering** (The use of `#041632` as a primary section background to house complex UI screenshots and data visualizations).
3. **Softened Utility** (A consistent 20px border radius on primary buttons and 50px on large panels, contrasting with the sharp 0px edges of standard layout sections).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary text on dark | 63 | 1.0 | Computed Style |
| `{color.charcoal}` | `#333333` | Primary body text on light | 105 | 0.8 | Computed Style |
| `{color.midnight}` | `#041632` | Deep section background | 12 | 0.8 | Computed Style |
| `{color.onyx}` | `#26262b` | Dark card/surface background | 6 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#1363df` | Primary button background, active text | 10 | 0.6 | Computed Style |
| `{color.sky}` | `#89b7ff` | Emphasis text, secondary accent | 15 | 0.8 | Computed Style |
| `{color.slate}` | `#48576f` | Secondary button bg, feature borders | 21 | 0.8 | Computed Style |
| `{color.berry}` | `#cc3366` | Decorative text accent | 4 | 0.6 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Inter | 200, 300, 400, 500, 800 | Headings, UI, Body | Inter (Google Fonts) | SIL Open Font |
| -apple-system | 400, 700 | System fallback, icons | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display.lg}` | 48px | 56px | normal | 800 | Hero headlines | `p` |
| `{text.display.md}` | 36px | 43px | normal | 800 | Section titles | `h2.elementor-heading-title` |
| `{text.heading.sm}` | 24px | 28.8px | normal | 800 | Feature titles | `h3.elementor-image-box-title` |
| `{text.heading.xs}` | 20px | 24px | normal | 500 | Card titles | `h3.elementor-icon-box-title` |
| `{text.body.lg}` | 16px | 24px | normal | 400 | Standard prose | `p` |
| `{text.body.bold}` | 16px | 16px | normal | 700 | Tab labels | `div#elementor-tab-title` |
| `{text.body.sm}` | 15px | 15px | normal | 400 | Button labels | `a.elementor-button` |
| `{text.caption}` | 16px | 21px | normal | 200 | Muted descriptors | `p.elementor-heading-title` |

### Principles
1. **Weight as Hierarchy:** Use 800 weight for all structural headings; 400 weight is reserved strictly for descriptive blocks.
2. **Tight Display Leading:** Large display type (48px) uses a tight 1.15x line height (56px) to maintain visual density.
3. **No Letter Spacing:** All typography tokens are set to `normal` tracking; the brand relies on Inter's native kerning.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 8 |
| `{space.sm}` | 16px | 8 |
| `{space.md}` | 20px | 10 |
| `{space.xl}` | 50px | 12 |
| `{space.section}` | 120px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 210 occurrences |
| `{radius.sm}` | 5px | Form inputs | 13 occurrences |
| `{radius.md}` | 20px | Primary buttons | Rounded Button component |
| `{radius.full}` | 50px | Large feature panels | 12 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All observed components | Component audit |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary Call to Action
**Pages observed:** woxacorp.com, woxacorp.com/about
**Spec:** Background `#1363df` / Text `#ffffff` / Border `#ffffff` (0px) / Radius `20px` / Padding `12px 24px` / Typography `15px Inter`
**States observed:** Default: captured | Hover: not captured

#### Feature Surface
**Role:** Dark section containers
**Pages observed:** woxacorp.com, woxacorp.com/about
**Spec:** Background `#041632` / Text `#ffffff` / Border `none` / Radius `0px` / Padding `50px 0px`
**States observed:** Default: captured

### Tier 2: Patterns
#### Feature Card
**Role:** Icon-based benefit display
**Pages observed:** woxacorp.com, woxacorp.com/about
**Spec:** Background `#26262b` / Text `#69727d` / Radius `50%` (icon plate) / Typography `20px Inter`
**States observed:** Default: captured

#### Feature List Item
**Role:** Horizontal platform capability list
**Pages observed:** woxacorp.com
**Spec:** Background `#48576f` / Text `#ffffff` / Radius `0px` / Padding `15px` / Typography `16px Inter`
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Contact Button
**Role:** Nav-specific CTA
**Pages observed:** woxacorp.com
**Spec:** Background `#1363df` / Text `#ffffff` / Radius `20px` / Padding `12px 24px`
**States observed:** Default: captured

#### Social Icon
**Role:** Footer social links
**Pages observed:** woxacorp.com, woxacorp.com/about
**Spec:** Background `transparent` / Text `#ffffff` / Typography `20px -apple-system`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1140px (inferred from standard Elementor) |
| Section Padding | 50px (vertical) |
| Column Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Desktop | 1440px | Multi-column feature grids |
| Mobile | 390px | Single column stacking, 50px padding preserved |

## Imagery & decoration
Woxacorp uses high-fidelity device mockups (iPhone, iMac) to showcase software. Decorative elements include subtle blue gradients behind hardware and the use of the electric blue logo mark as a repeating visual anchor.

## Do's
- Use Inter 800 for all headlines above 24px.
- Anchor dark sections with `#041632` background.
- Apply `20px` border radius to all primary blue buttons.
- Use `#89b7ff` for text-based emphasis within paragraphs.
- Maintain `50px` vertical padding on dark feature blocks.

## Don'ts
- **Wrong:** Using `#89b7ff` as a primary button background. **Right:** Use `#1363df`. **Reason:** Accessibility and brand hierarchy; the lighter blue is an accent, not a primary action color.
- **Wrong:** Applying shadows to cards. **Right:** Use flat backgrounds (`#26262b`). **Reason:** The system is strictly flat-design based on evidence.
- **Wrong:** Using serif fonts for body copy. **Right:** Use Inter or system sans-serif. **Reason:** Woxacorp is a 100% sans-serif brand.

## Similar brands
- Interactive Brokers (color palette)
- MetaTrader (UI density)
- Cloudflare (typography weight and dark mode sections)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --woxa-primary: #1363df;
  --woxa-accent-sky: #89b7ff;
  --woxa-midnight: #041632;
  --woxa-slate: #48576f;
  --woxa-radius-button: 20px;
  --woxa-font-main: 'Inter', sans-serif;
}
```

## Agent prompt examples
- "Generate a hero section with a `#041632` background, an Inter 800 headline at 48px in `#ffffff`, and a primary button using `#1363df` with a 20px border radius."
- "Create a 3-column feature grid using `#26262b` cards and 20px Inter 500 titles."
- "Design a footer with a `#041632` background and social icons in `#ffffff`."

## Known gaps
- Hover and Active states for buttons were not captured in the static crawl.
- Exact mobile breakpoint transitions for the navigation menu were not fully mapped.

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