# Seon Design System

> High-contrast fintech utility meets technical precision through deep navy canvases, electric blue actions, and light-weight Sora headlines.

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

## TL;DR
Seon utilizes a high-contrast "Dark Mode" foundation for its command center identity, leaning heavily on a deep navy `#05052a` for primary surfaces and a vibrant action blue `#3c72ff` for interactive elements. The typographic system pairs the geometric clarity of **Sora** for display and headings with the functional legibility of **Inter** for body text and navigation. A signature design move is the use of weight 300 for large display statistics and headlines, creating a technical, sophisticated atmosphere. Layouts are structured with generous 120px vertical padding between major sections, often alternating between pure white `#ffffff` and soft mint-gray `#f4f7f7` backgrounds.

## Signature DNA
1. **The Command Center Canvas** (Deep navy `#05052a` backgrounds used for hero sections and high-impact feature blocks to signal a "pro" tool environment, observed on `seon.io` and `pricing`).
2. **Technical Display Weight** (Sora at weight 300 for display headers and statistics, providing a precise, architectural feel that balances the heavy navy surfaces).
3. **Action Blue Punctuation** (The use of `#3c72ff` for primary pill buttons and text links, serving as the high-voltage "on" state against both light and dark canvases).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--wp--preset--color--background-primary` | `#ffffff` | Page floor and primary surface | 143 | 1 | Computed Style |
| `#141517` | `#141517` | Emphasized primary text | 137 | 1 | `--wp--preset--color--emphasized` |
| `--wp--preset--color--default` | `#3d4047` | Standard body text and borders | 147 | 1 | Computed Style |
| `--wp--preset--color--background-secondary` | `#f4f7f7` | Subtle section backgrounds | 37 | 1 | Computed Style |
| `--wp--preset--color--background-inverse` | `#05052a` | Dark mode surfaces / Hero backgrounds | 16 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--wp--preset--color--action` | `#3c72ff` | Primary CTA and interactive links | 45 | 1 | Computed Style |
| `--wp--preset--color--tertiary` | `#97a0b4` | Muted secondary text | 480 | 1 | Computed Style |
| `--wp--preset--color--secondary` | `#686f7d` | De-emphasized text / button labels | 78 | 1 | Computed Style |
| `--wp--preset--color--accent` | `#00c1b6` | Teal accent for icons/status | 56 | 1 | Computed Style |
| `--wp--preset--color--border-divider-secondary` | `#ccdbde` | Light borders and dividers | 20 | 1 | Computed Style |
| `--wp--preset--color--accent-secondary` | `#ff4d00` | Warning/Alert (decorative_only) | 2 | 1 | Computed Style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--wp--preset--color--vivid-red` | `#cf2e2e` | Error / High Risk |
| `--wp--preset--color--star` | `#f0c824` | Rating / Warning |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Sora | 300, 500, 600 | Display, Headings | Sora (Google Fonts) | SIL Open Font |
| Inter | 400, 500, 600 | Body, Nav, Buttons | Inter (Google Fonts) | SIL Open Font |
| Arial | 400 | UI Controls | System Sans | Standard |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{display-mega}` | 110px | 143px | -4px | 300 | Hero Display | `h3#15` |
| `{display-xl}` | 56px | 61.6px | -2.24px | 300 | Statistics | `p.is-style-statistic` |
| `{display-lg}` | 56px | 72.8px | -0.75px | 600 | Page Titles | `h1#h-our-mission` |
| `{heading-xl}` | 40px | 52px | -0.5px | 600 | Section Headers | `h2` |
| `{heading-lg}` | 32px | 41.6px | normal | 600 | Sub-section Headers | `strong` |
| `{heading-md}` | 24px | 31.2px | normal | 600 | Feature Titles | `h3#h-fraud-prevention` |
| `{body-lg}` | 20px | 34px | normal | 400 | Intro Paragraphs | `p.has-text-align-center` |
| `{body-md}` | 18px | 30.6px | normal | 400 | Default Body | `div.is-style-secondary` |
| `{body-sm}` | 14px | 23.8px | normal | 400 | Footer / Small text | `nav.has-tertiary-color` |
| `{caption}` | 12px | 20.4px | 1px | 400 | Overlines / Tags | `p.timeline-time-tag` |

### Principles
1. **Lightweight Authority:** Large numbers and hero headlines use Sora at weight 300 to avoid feeling "heavy" despite their size.
2. **Tight Display Tracking:** As Sora increases in size (56px+), letter spacing tightens significantly (-2.24px to -4px).
3. **Functional Body:** Inter is used exclusively for long-form reading and UI labels to ensure maximum legibility.

## Spacing
**Base unit:** 8px (approximate)
| Token | Value | Occurrences |
|---|---|---|
| `{space-xs}` | 8px | 99 |
| `{space-sm}` | 16px | 84 |
| `{space-md}` | 24px | 80 |
| `{space-lg}` | 32px | 38 |
| `{space-xl}` | 64px | 20 |
| `{section-v-pad}` | 120px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius-none}` | 0px | Section containers, sharp UI | 984 occurrences |
| `{radius-sm}` | 2px | Inputs, small buttons | `Rounded Button` component |
| `{radius-lg}` | 40px | Feature cards, panels | `Card` component |
| `{radius-pill}` | 1000px | Primary/Secondary CTAs | `Pill Button` component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `flat` | none | Default sections | Most surfaces |
| `elevated-soft` | `rgba(0, 0, 0, 0.06) 0px 8px 32px -4px` | Pricing/Feature cards | `Surface` component (pricing) |
| `overlay` | `rgba(0, 0, 0, 0.24) 0px 16px 48px -8px` | Modals / Dropdowns | Evidence shadows |

## Components
### Tier 1: Foundational
#### Pill Button (Primary)
**Role:** Main site actions (e.g., "Book time with our experts")
**Pages observed:** `seon.io`, `pricing`, `about`
**Spec:** Background: `#3c72ff` / Text: `#ffffff` / Radius: `1000px` / Padding: `16px 32px` / Font: `Inter 500 16px`
**States observed:** Default | Hover: `#2e57c2` | Active: Captured

#### Pill Button (Inverse)
**Role:** Secondary actions on light backgrounds or primary on dark
**Pages observed:** `seon.io`, `pricing`, `about`
**Spec:** Background: `#05052a` / Text: `#ffffff` / Radius: `1000px` / Padding: `8px 24px`

### Tier 2: Patterns
#### Pill Button (Outline)
**Role:** Tertiary actions
**Pages observed:** `seon.io`, `pricing`
**Spec:** Background: `transparent` / Text: `#3d4047` / Border: `1px solid #ccdbde` / Radius: `1000px`

#### Rounded Button (Small)
**Role:** Inline UI controls
**Pages observed:** `seon.io`, `pricing`, `about`
**Spec:** Background: `transparent` / Text: `#141517` / Radius: `2px` / Font: `16px`

### Tier 3: Surface-specific
#### Dark Surface Section
**Role:** High-impact hero or feature bands
**Pages observed:** `seon.io`, `pricing`, `about`
**Spec:** Background: `#05052a` / Text: `#ffffff` / Padding: `120px 64px`

#### Light Surface Section
**Role:** Standard content alternating bands
**Pages observed:** `seon.io`, `pricing`, `about`
| Property | Value |
|---|---|
| Background | `#f4f7f7` |
| Text | `#3d4047` |
| Vertical Padding | 120px |

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1440px |
| Section Vertical Padding | 120px |
| Column Grid | 12-column desktop |
| Horizontal Gutter | 64px (desktop) |

## Do's
- Use Sora weight 300 for any headline larger than 48px.
- Apply `#05052a` for full-width sections to create "Command Center" depth.
- Use `#3c72ff` for the primary path to conversion.
- Maintain 120px vertical spacing between distinct content sections.
- Use Inter for all tabular data and technical descriptions.

## Don'ts
- **Wrong:** Using `#00c1b6` (Teal) as a primary button background. **Right:** Use `#3c72ff`. **Reason:** Teal is a decorative accent/status color, not an action color.
- **Wrong:** Using Sora Bold (700) for display headers. **Right:** Use Sora 300 or 600. **Reason:** The brand signature relies on the 300 weight for elegance.
- **Wrong:** Applying heavy drop shadows to all cards. **Right:** Use `0px` radius and no shadow for most sections; reserve shadows for floating pricing tiers.

## Similar brands
- Cloudflare (Technical precision, high contrast)
- Datadog (Data-heavy, dark mode utility)
- Stripe (Refined typography, structural clarity)

## Quick start

```css
/* CSS Variables */
:root {
  --seon-blue: #3c72ff;
  --seon-navy: #05052a;
  --seon-white: #ffffff;
  --seon-gray-light: #f4f7f7;
  --seon-text-main: #3d4047;
  --seon-text-bold: #141517;
  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
}
```

```json
/* Style Dictionary */
{
  "color": {
    "brand": {
      "primary": { "value": "#3c72ff" },
      "inverse": { "value": "#05052a" }
    },
    "background": {
      "canvas": { "value": "#ffffff" },
      "alt": { "value": "#f4f7f7" }
    }
  }
}
```

## Agent prompt examples
- "Create a hero section with a deep navy #05052a background, a Sora weight 300 headline at 56px, and a primary blue #3c72ff pill button."
- "Design a 3-column feature grid using Sora 600 for titles and Inter 400 for body text, sitting on a #f4f7f7 background with 120px vertical padding."
- "Generate a pricing card with a 40px border radius and a subtle shadow (rgba(0,0,0,0.06) 0px 8px 32px)."

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://seon.io | 1440px | 2026-06-06 |
| Pricing | https://seon.io/pricing | 1440px | 2026-06-06 |
| About | https://seon.io/about | 1440px | 2026-06-06 |