# ZEON design system

> ZEON design system measured from zeonbot.xyz: Rajdhani font, 13 color hex codes, type scale, spacing and a free DESIGN.md. Dark theme with 10px corners.

Canonical page: https://sitepeel.dev/design-md/zeonbot.xyz/

ZEON’s website (zeonbot.xyz) uses the Rajdhani font on a black background. Measured by Sitepeel on November 6, 2026.

## What font does ZEON use?

ZEON uses Rajdhani (weights 500 and 600) and Inter (weight 400) on zeonbot.xyz. Page titles are 144px at weight 500 (72px on phones) and body text is 16px. Measured on November 6, 2026.

- Rajdhani (weights 500, 600)
- Inter (weights 400)

## ZEON colors: palette and hex codes

ZEON’s main colors are #000000 (near black) for the background and #F8F8F8 (snow) for text, with #00BC7D (dark teal) as another accent. Measured on November 6, 2026.

- #000000: near black
- #F8F8F8: snow
- #E0E0E0: silver
- #C6C6C6: silver
- #959595: gray
- #00BC7D: dark teal

## What is ZEON built with?

ZEON’s website (zeonbot.xyz) is built with Next.js, React, Radix UI, Tailwind CSS and Cloudflare. Measured on November 6, 2026.

- JavaScript framework: Next.js 16.0.10, React 9.6.1
- Animation & 3D: Three.js r185, Motion, React Three Fiber
- Hosting & CDN: Cloudflare, Vercel
- Analytics: Cloudflare Web Analytics
- UI & CSS: Radix UI, Tailwind CSS 4.x
- Fonts & icons: Lucide

## Questions and answers

### What font does ZEON use?

ZEON’s website uses Rajdhani (weights 500 and 600) and Inter (weight 400). Page titles are 144px at weight 500 (72px on phones) and body text is 16px. Measured on November 6, 2026.

### What are the ZEON colors and hex codes?

On zeonbot.xyz: #000000 (near black) for the background and #F8F8F8 (snow) for text, with #00BC7D (dark teal) as another accent. The color palette above lists all 13 colors with their hex codes and where each one is used.

### What is the ZEON design system?

The design system on this page is zeonbot.xyz’s, as measured on November 6, 2026: Rajdhani type and 10px corners, written down as a DESIGN.md. It is not ZEON’s own documentation.

### What is ZEON built with?

ZEON’s website (zeonbot.xyz) is built with Next.js, React, Radix UI, Tailwind CSS and Cloudflare. The full tech stack Sitepeel found: Next.js, React, Three.js, Cloudflare, Vercel, Cloudflare Web Analytics, Radix UI, Tailwind CSS, Motion and React Three Fiber. Measured on November 6, 2026.

### What is the ZEON DESIGN.md?

A plain-text file with ZEON’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this ZEON’s official design system?

No. Sitepeel measured it from zeonbot.xyz’s public page on November 6, 2026. It is an independent analysis, not made or approved by ZEON.

### Can I use ZEON’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy ZEON’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/zeonbot.xyz/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with ZEON.

## The DESIGN.md file

```markdown
---
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).

```