# Oxiyen Design System

> High-contrast industrial utility meets technical precision, anchored by a high-voltage yellow on a deep obsidian canvas.

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

## TL;DR
Oxiyen utilizes a "monochrome plus one" strategy, where a high-saturation yellow (`#e5dd00`) provides the only chromatic relief against a dark, structured environment. The system relies on **Soehne breit halbfett** for wide, authoritative display typography and **Inter** for high-density technical body copy. Layouts are characterized by generous vertical spacing (80-120px) and a strict 8px grid. Visual depth is achieved through atmospheric green and blue radial glows rather than traditional drop shadows, maintaining a flat, engineering-focused aesthetic.

## Signature DNA
1. **The High-Voltage Anchor** (Oxiyen Yellow `#e5dd00` used as a singular functional accent for CTAs and section indicators against obsidian backgrounds).
2. **Extended Display Type** (Soehne breit halbfett used at weights 600-700 with negative letter-spacing, creating a compressed, heavy-industry feel).
3. **Atmospheric Glows** (Subtle radial gradients in green and blue used as background textures to define content areas without using borders or shadows).

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--dm-background-primary` | `#13141c` | Primary page canvas, dark mode surfaces | 32 | 1.0 | Computed Style |
| `--lm-background-primary` | `#f5f5f7` | Light mode canvas, secondary text on dark | 42 | 1.0 | Computed Style |
| `--dm-texts` | `#a3a7ad` | Primary body text on dark surfaces | 25 | 1.0 | Computed Style |
| `--dm-text-disable` | `#7c7f84` | Muted metadata, secondary descriptions | 36 | 1.0 | Computed Style |
| `--dm-stroke-disable` | `#1e2027` | Subtle dividers, container borders | 4 | 1.0 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--oxiyen-yellow` | `#e5dd00` | Primary CTA background, active states, brand marks | 24 | 1.0 | CSS Variable |
| `accent-blue` | `#0000ee` | Inline links (legacy/fallback) | 5 | 0.6 | Computed Style |
| `--pink-16` | `#ea4c89` | Decorative only (unmapped) | 1 | 1.0 | CSS Variable |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| `--bg-success` | `#b4e34f` | Success states |
| `--bg-error` | `#ea333d` | Error states |
| `--bg-warning` | `#f8d650` | Warning states |
| `--bg-info` | `#58c0e8` | Information states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Soehne breit halbfett | 400, 500, 600, 700 | Display & Headings | Archivo Expanded | Licensed |
| Inter | 400, 500 | Technical Body | Inter (Google Fonts) | OFL |
| Aa-Light | 400 | Secondary Body | Roboto Light | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `display-mega` | 60px | 66px | -1.5px | 700 | Hero Headline | `h1.hero__headline` |
| `display-xl` | 52px | 57.2px | -1.2px | 700 | Section CTA | `h2.cta__title` |
| `heading-lg` | 36px | 43.2px | -0.8px | 700 | Section Title | `h2.problem-section__title` |
| `heading-md` | 24px | 32.4px | -0.3px | 600 | Card Title | `h3.proof-row__title` |
| `subheading` | 18px | 25.2px | -0.2px | 600 | Pillar Title | `h3.solution-pillar__title` |
| `body-lg` | 18px | 28.8px | 0.2px | 400 | Lead Paragraph | `p.belief-section__text` |
| `body-md` | 16px | 28.8px | 0.2px | 400 | Default Body | `p.who-section__text` |
| `button` | 15px | 15px | 0.2px | 500 | Primary CTA | `a.btn.btn--primary` |
| `caption-caps` | 12px | 21px | 1.5px | 400 | Eyebrows | `p.problem-section__eyebrow` |

### Principles
1. **Negative Tracking on Display:** All Soehne headings above 24px must use negative letter-spacing (-0.3px to -1.5px) to maintain visual density.
2. **Wide Eyebrows:** Captions and eyebrows use 1.5px letter-spacing to contrast against the tight display type.
3. **Line-Height Precision:** Body text maintains a 1.6x to 1.8x line-height ratio for legibility on dark backgrounds.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `space-xs` | 8px | 12 |
| `space-sm` | 12px | 12 |
| `space-md` | 16px | 30 |
| `space-lg` | 24px | 16 |
| `space-xl` | 40px | 6 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `radius-sharp` | 0px | Section containers | 151 occurrences |
| `radius-sm` | 4px | Buttons, Inputs | `a.btn.btn--primary` |
| `radius-lg` | 12px | Feature Cards | `div.card` |
| `radius-xl` | 20px | Surface Overlays | `div.surface` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| Flat | None | Default state | All pages |
| Glow | Radial Gradient | Content emphasis | `div.glow-bg` |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Action
**Pages observed:** All
**Spec:** Background: `#e5dd00` | Text: `#13141c` | Border: 1px `#e5dd00` | Radius: 4px | Padding: 12px 36px | Font: Soehne 15px/500
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Card
**Role:** Content grouping
**Pages observed:** All
**Spec:** Background: `rgba(20, 22, 28, 0.6)` | Border: 1px `#1e2027` | Radius: 12px | Padding: 24px
**States observed:** Default

### Tier 3: Surface-specific

#### Navigation Bar
**Role:** Global Header
**Pages observed:** All
**Spec:** Background: `#111219` | Text: `#f5f5f7` | Height: 80px | Radius: 0px
**States observed:** Default | Hover: `#e5dd00` (text)

## Layout
| Property | Value |
| :--- | :--- |
| Max-width | 1280px |
| Section Gap | 96px |
| Column Grid | 12-column |

## Imagery & decoration
*   **Atmospheric Glows:** Uses radial gradients (Green `#83be00` and Blue `#2b37d8`) at low opacity (0.1-0.2) behind text blocks.
*   **Horizontal Rules:** Uses a gradient line (Yellow to Transparent) as a section separator.
*   **Avoids:** Drop shadows, rounded corners on main containers, and photographic backgrounds.

## Do's
*   Use `#e5dd00` only for interactive elements or critical indicators.
*   Apply negative letter-spacing to all Soehne headlines.
*   Maintain a minimum 80px vertical gap between major content sections.
*   Use `#a3a7ad` for long-form body text to reduce eye strain on dark backgrounds.
*   Keep container corners sharp (0px) unless they are internal UI cards.

## Don'ts
*   **Wrong:** Using `#ffbb00` (Corporate Yellow) for primary CTAs. **Right:** Use `#e5dd00`. **Reason:** `#ffbb00` is a legacy token not used in the current Oxiyen brand layer.
*   Do not use drop shadows for elevation; use border colors or background glows.
*   Do not use Soehne for body copy; it is reserved for display and headings.
*   Do not place `#e5dd00` text on `#f5f5f7` backgrounds (fails contrast).

## Quick start

### CSS Custom Properties
```css
:root {
  --oxiyen-yellow: #e5dd00;
  --oxiyen-obsidian: #13141c;
  --oxiyen-silver: #a3a7ad;
  --font-display: "Soehne breit halbfett", sans-serif;
  --font-body: "Inter", sans-serif;
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "brand": { "primary": { "value": "#e5dd00" } },
    "surface": { "canvas": { "value": "#13141c" } }
  }
}
```

## Agent prompt examples
*   "Create a primary CTA button using Oxiyen Yellow #e5dd00, 4px border radius, and Soehne 15px bold text."
*   "Design a feature card with a dark background #14161c, 1px border #1e2027, and 12px corner radius."
*   "Generate a hero section with a 60px Soehne headline, -1.5px letter spacing, on an obsidian #13141c background."

## Known gaps
*   Hover and Active states for buttons were not captured in the static trace.
*   Mobile navigation transition states were not fully documented.
*   Specific shadow tokens were absent from the rendered evidence.

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