---
version: alpha
name: ZEON
description: "Dark monochrome interface measured from zeonbot.xyz: Rajdhani type with Inter, flat surfaces and 10px corners."
colors:
  background: "#000000"
  surface: "#000000"
  on-surface: "#F8F8F8"
  on-background: "#F8F8F8"
  on-surface-variant: "#E0E0E0"
  on-surface-muted: "#C6C6C6"
  on-surface-subtle: "#959595"
  overlay: "#FB2C361A"
  overlay-strong: "#F8F8F80A"
  outline: "#FB2C361A"
  outline-variant: "#F8F8F814"
  primary: "#F8F8F8"
  on-primary: "#000000"
  secondary: "#00BC7D"
  error: "#FF6467"
typography:
  headline-display:
    fontFamily: Rajdhani
    fontSize: 144px
    fontWeight: 500
    lineHeight: 0.95
    letterSpacing: -0.05em
  headline-lg:
    fontFamily: Rajdhani
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.05em
  headline-md:
    fontFamily: Rajdhani
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.05em
  headline-sm:
    fontFamily: Rajdhani
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: -0.025em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: Rajdhani
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.025em
  body-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
  label-lg:
    fontFamily: Rajdhani
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0.1em
  label-md:
    fontFamily: Rajdhani
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.025em
  label-sm:
    fontFamily: Rajdhani
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
  headline-display-mobile:
    fontFamily: Rajdhani
    fontSize: 72px
    fontWeight: 500
    lineHeight: 0.95
    letterSpacing: -0.05em
  headline-lg-mobile:
    fontFamily: Rajdhani
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.05em
rounded:
  sm: 10px
  md: 16px
spacing:
  xs: 2px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 36px
  gutter: 8px
  section: 112px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: 8px 16px
    height: 33px
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "#F8F8F866"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    height: 66px
  button-ghost:
    backgroundColor: "#0B0B0B4D"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
    height: 36px
  link:
    textColor: "#F8F8F866"
---

# ZEON Design System

## Overview

ZEON describes itself as: “The Ultimate Discord Bot” The interface is dark, built on **Near Black (#000000)** with **Snow (#F8F8F8)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Rajdhani** and **Inter**. Headlines run large with tight negative tracking; body text is 16px. Depth comes from soft drop shadows. Corners are mostly 10px.

Measured from [zeonbot.xyz](https://zeonbot.xyz/) on November 6, 2026 at 1440×900 and 390×844 from 270 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 13 roles, plus gradient stops #FF6467CC.

- **Near Black (#000000):** Page background, seen 3 times. Token `background`.
- **Snow (#F8F8F8):** Primary text and headings, seen 29 times. Token `on-surface`.
- **Silver (#E0E0E0):** Secondary text, seen 4 times. Token `on-surface-variant`.
- **Silver (#C6C6C6):** Muted text and metadata, seen 5 times. Token `on-surface-muted`.
- **Gray (#959595):** Subtle text and placeholders, seen 14 times. Token `on-surface-subtle`.
- **Vivid Red 10% (#FB2C361A):** Translucent fill for cards and controls, seen 7 times. Token `overlay`.
- **Snow 4% (#F8F8F80A):** Stronger translucent fill, seen 4 times. Token `overlay-strong`.
- **Vivid Red 10% (#FB2C361A):** Borders and dividers, seen 6 times. Token `outline`.
- **Snow 8% (#F8F8F814):** Secondary dividers, seen 4 times. Token `outline-variant`.
- **Snow (#F8F8F8):** Primary buttons and calls to action, seen 38 times. Token `primary`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Dark Teal (#00BC7D):** Accent in text, fills and borders, seen 2 times. Token `secondary`.
- **Red (#FF6467):** Errors and destructive states, seen 1 time. Token `error`.

## Typography

**Rajdhani** and **Inter** share the interface. Fallback stack: `Rajdhani, Rajdhani Fallback, sans-serif`.

- **headline-display:** Rajdhani 144px at weight 500, line height 0.95, tracking -0.05em (72px on mobile). Page title (h1).
- **headline-lg:** Rajdhani 72px at weight 500, line height 1.05, tracking -0.05em (48px on mobile). Section headings (h2).
- **headline-md:** Rajdhani 60px at weight 500, line height 1, tracking -0.05em. Sub-section headings.
- **headline-sm:** Rajdhani 24px at weight 500, line height 1.33, tracking -0.025em. Card and feature titles.
- **body-md:** Inter 16px at weight 400, line height 1.5. Body text.
- **body-lg:** Rajdhani 17px at weight 600, line height 1.5, tracking -0.025em. Lead paragraphs.
- **body-sm:** Inter 12px at weight 400, line height 1.5. Secondary and small text.
- **label-lg:** Rajdhani 14px at weight 500, line height 1.43, tracking 0.1em. Large buttons and tabs.
- **label-md:** Rajdhani 13px at weight 500, line height 1.5, tracking 0.025em. Buttons, navigation and labels.
- **label-sm:** Rajdhani 12px at weight 500, line height 1.5. Small labels and badges.

## Layout

Spacing is mostly on a 4px grid (83% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** xs 2px, sm 8px, md 16px, lg 32px, xl 36px.
- **Sections:** 112px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.15) 0px 0px 30px 0px`
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.15) 0px 0px 40px 0px`

## Shapes

Most elements use 10px corners. Measured radii, most used first:

- **sm (10px):** 12 elements.
- **md (16px):** 8 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“DASHBOARD”):** #F8F8F8 fill, #000000 text, 11px/700, 16px radius, padding 8px 16px.
- **button-outline (“NODE ONLINE Support Hub”):** #000000CC fill, #F8F8F866 text, 16px/400, 16px radius, padding 12px 16px, border 1px solid #F8F8F81A, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`.
- **button-ghost (“Customize”):** #0B0B0B4D fill, #F8F8F8 text, 14px/500, 10px radius, padding 8px 12px, border 1px solid #0B0B0B, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`.
- **link:** transparent fill, #F8F8F866 text, padding 0px.

## Do's and Don'ts

- Do use #000000 for the page.
- Do keep text in 4 levels: #F8F8F8, #E0E0E0, #C6C6C6, #959595.
- Do let contrast carry emphasis; primary actions use #F8F8F8 on #000000.
- Do set headlines in Rajdhani with tight tracking (-0.05em).
- Do reuse the measured spacing steps (8px, 16px, 32px).
- Do use 10px corners on most elements; larger surfaces also use 16px.
- Don't introduce new font families beyond Rajdhani and Inter.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.15s, 0.3s, 0.5s. Longer ambient animations run 2s, 1s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `cubic-bezier(0.4, 0, 0.6, 1)`, `cubic-bezier(0, 0, 0.2, 1)`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/zeonbot.xyz/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).