# Onymos Design System

> High-contrast monochrome precision punctuated by a singular, deep violet brand voltage.

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

## TL;DR
Onymos utilizes a high-fidelity "monochrome+" aesthetic where a stark white canvas (#ffffff) and deep obsidian text (#0f0f0f) provide a clinical, authoritative backdrop. The system's primary energy is derived from a single accent color, a vibrant violet (#7a5ce0), used for high-intent CTAs and specific semantic highlights. Typography is strictly Inter, leaning on heavy weights (700) for display headers and generous line heights (1.5x) for body readability. Layouts are characterized by significant vertical breathing room, often exceeding 100px between sections, and a complete absence of rounded corners on primary interactive elements, favoring a "sharp" architectural edge.

## Signature DNA
1. **The Sharp Edge** (Total rejection of border-radii on buttons and primary containers (0px), creating a technical, non-consumerist feel. Observed across all pages.)
2. **Violet Punctuation** (The use of #7a5ce0 as the exclusive chromatic signal against a 100% achromatic base. Seen in "Schedule your demo" CTAs and inline highlights.)
3. **Obsidian Contrast** (Utilizing #0f0f0f instead of pure black for text to maintain depth while achieving maximum contrast against the white #ffffff floor.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--wp--preset--color--black` | `#0f0f0f` | Primary text, headings | 106 | 1.0 | CSS Variable |
| `--wp--preset--color--white` | `#ffffff` | Page background, button text | 30 | 1.0 | CSS Variable |
| `surface-dark` | `#222222` | Dark section backgrounds (About page) | 69 | 0.8 | Computed Style |
| `--wp--preset--color--light-gray` | `#f5f5f5` | Secondary button backgrounds | 14 | 1.0 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `primary-accent` | `#7a5ce0` | Primary CTAs, brand highlights | 3 | 0.6 | Computed Style |
| `pure-black` | `#000000` | Primary button backgrounds, borders | 5 | 1.0 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Inter | 400, 500, 600, 700 | All roles (Display, Body, UI) | Inter (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `display-hero` | 60px | 72px | normal | 700 | Hero Headlines | `strong` |
| `display-h2` | 60px | 72px | normal | 400 | Section Headers | `h2` |
| `display-sub` | 48px | 57.6px | normal | 500 | Secondary Headers | `h2` |
| `heading-md` | 32px | 38.4px | normal | 600 | Sub-section titles | `h3` |
| `heading-sm` | 25px | 37.5px | normal | 400 | Intro paragraphs | `p:nth-of-type(1)` |
| `body-lg` | 18px | 27px | normal | 400 | Default body text | `p` |
| `body-bold` | 18px | 24px | normal | 700 | Emphasized body | `strong` |
| `body-sm` | 14px | 21px | normal | 400 | Footer/Legal text | `p:nth-of-type(2)` |

### Principles
- **Weight as Hierarchy:** Uses the jump from 400 to 700 weight within the same font family to distinguish between narrative and data.
- **Generous Leading:** Body text maintains a 1.5x line-height ratio (18px/27px) for high legibility in technical contexts.
- **No Tracking:** Letter spacing is kept at `normal` across all scales, trusting the Inter typeface's natural kerning.

## Spacing
**Base unit:** 4px (inferred)
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `space-xs` | 10px | 30 |
| `space-sm` | 16px | 20 |
| `space-md` | 30px | 35 |
| `space-lg` | 40px | 10 |
| `space-section` | 80px | 23 |
| `space-hero` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `sharp` | 0px | Buttons, Cards, Sections | 178 occurrences |
| `input` | 4px | Form fields | 20 occurrences |
| `panel` | 50px | Decorative UI elements | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | All primary surfaces | Default state across site |

## Components

### Tier 1: Foundational

#### Primary Button (Violet)
**Role:** Main Call to Action (Schedule Demo)
**Pages observed:** https://onymos.com, https://onymos.com/about
**Spec:** Background `#7a5ce0` / Text `#ffffff` / Radius `0px` / Padding `12px 24px` (inferred) / Typography `Inter 600`
**States observed:** Default | Hover: Not captured

#### Secondary Button (Light)
**Role:** Secondary actions (Customer Stories)
**Pages observed:** https://onymos.com
**Spec:** Background `#f5f5f5` / Text `#222222` / Border `0px` / Radius `0px` / Padding `9px 13px` / Typography `Inter 18px`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Accordion Header
**Role:** FAQ and technical disclosure
**Pages observed:** https://onymos.com
**Spec:** Background `transparent` / Text `#0f0f0f` / Border-bottom `1px solid #0f0f0f` / Radius `0px` / Typography `Inter 18px 600`
**States observed:** Default | Active: Background `#222222` (inferred from surface tokens)

### Tier 3: Surface-specific

#### Dark Content Block
**Role:** High-impact testimonials or "About" sections
**Pages observed:** https://onymos.com/about
**Spec:** Background `#222222` / Text `#ffffff` / Radius `0px` / Padding `80px 0px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Gutter | 80px - 100px |
| Column Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked columns, menu converts to hamburger, font-size reduction on display-hero |

## Imagery & decoration
- **Technical Diagrams:** Uses clean, vector-style UI mockups with subtle shadows to demonstrate product functionality.
- **Duotone Overlays:** Photographic elements (like the About page hero) use circular masks and violet/orange gradients.
- **Avoidance:** No illustrative "SaaS doodles," no soft rounded containers, no drop shadows on text.

## Do's
- Use `#0f0f0f` for all primary body text on white backgrounds.
- Maintain `0px` border radius on all interactive button components.
- Reserve `#7a5ce0` for the single most important action on the page.
- Ensure section spacing is at least `80px` to maintain the "Intelligent Layer" breathing room.
- Use Inter 700 for display headers to anchor the page.

## Don'ts
- **Wrong:** Using `#9b51e0` (Vivid Purple) for primary CTAs.
- **Right:** Use `#7a5ce0`.
- **Reason:** `#9b51e0` is a legacy WP preset; `#7a5ce0` is the validated brand primary.
- Do not apply border-radius to buttons to "soften" the look.
- Do not use pure black `#000000` for long-form body copy.
- Do not use violet for secondary or tertiary actions.

## Similar brands
- Vercel (Monochrome precision)
- Linear (Technical sharp edges)
- Stripe (High-contrast typography)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #7a5ce0;
  --color-ink: #0f0f0f;
  --color-canvas: #ffffff;
  --color-surface-dark: #222222;
  --font-main: 'Inter', sans-serif;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Onymos sharp-edge style, background #7a5ce0, white text, Inter 600, and 0px border radius."
- "Design a hero section with a #ffffff background, #0f0f0f text using Inter 700 at 60px, and 100px vertical padding."
- "Generate a dark surface card using #222222 background and #ffffff Inter body text at 18px."

## Known gaps
- Hover and focus states for the primary violet button were not explicitly captured in the evidence.
- Mobile navigation transition details (animation/easing) are missing.
- Success/Error semantic colors were not observed in the analyzed pages.

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