DESIGN.md · measured November 6, 2026

ZEON design system

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

#000000
#F8F8F8
#00BC7D

Download DESIGN.md

From zeonbot.xyz ↗ · 270 elements at 1440×900 and 390×844 Independent analysis, not affiliated with ZEON

ZEON color palette

13 colors with hex codes, grouped by where each one is used on the page.

Surfaces

Near Black#000000backgroundPage background · 3×

Vivid Red 10%#FB2C361AoverlayTranslucent fill for cards and controls · 7×

Snow 4%#F8F8F80Aoverlay-strongStronger translucent fill · 4×

Text

Snow#F8F8F8on-surfacePrimary text and headings · 29×

Silver#E0E0E0on-surface-variantSecondary text · 4×

Silver#C6C6C6on-surface-mutedMuted text and metadata · 5×

Gray#959595on-surface-subtleSubtle text and placeholders · 14×

Near Black#000000on-primaryText and icons on primary

Accents

Snow#F8F8F8primaryPrimary buttons and calls to action · 38×

Dark Teal#00BC7DsecondaryAccent in text, fills and borders · 2×

Borders

Vivid Red 10%#FB2C361AoutlineBorders and dividers · 6×

Snow 8%#F8F8F814outline-variantSecondary dividers · 4×

Status

Red#FF6467errorErrors and destructive states · 1×

Gradients

ZEON fonts and type scale

2 families.

AaRajdhaniWeights 500, 600Rajdhani, Rajdhani Fallback, sans-serif

AaInterWeights 400Inter, Inter Fallback

headline-displayPage title (h1)ZEON144px · 500 · 0.95 · -0.05em
mobile 72px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog72px · 500 · 1.05 · -0.05em
mobile 48px

headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog60px · 500 · 1 · -0.05em

headline-smCard and feature titlesThe quick brown fox jumps over the lazy dog24px · 500 · 1.33 · -0.025em

body-mdBody textThe quick brown fox jumps over the lazy dog16px · 400 · 1.5

body-lgLead paragraphsThe quick brown fox jumps over the lazy dog17px · 600 · 1.5 · -0.025em

body-smSecondary and small textThe quick brown fox jumps over the lazy dog12px · 400 · 1.5

label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog14px · 500 · 1.43 · 0.1em

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog13px · 500 · 1.5 · 0.025em

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog12px · 500 · 1.5

Contrast

Text on #000000

AaAAA19.7:1

AaAAA15.9:1

AaAAA12.2:1

AaAAA7.0:1

Spacing

No strict grid · 83% are multiples of 4px

xs2px

sm8px

md16px

lg32px

xl36px

gutter8px

section112px

Shapes

Corner radii, most used first.

sm10px · 12×

md16px · 8×

Depth

Shadow

ZEON UI components

Rebuilt from the measured CSS.

DASHBOARD

button-primaryFilled button

NODE ONLINE Support Hub

button-outlineOutlined button

Customize

button-ghostOutlined button

Inline link

linkInline link

Motion

Interface transitions

0.15s0.3s0.5s

cubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.4, 0, 0.6, 1)

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

Use #000000 for the page.
Keep text in 4 levels: #F8F8F8, #E0E0E0, #C6C6C6, #959595.
Let contrast carry emphasis; primary actions use #F8F8F8 on #000000.
Set headlines in Rajdhani with tight tracking (-0.05em).
Reuse the measured spacing steps (8px, 16px, 32px).
Use 10px corners on most elements; larger surfaces also use 16px.
Introduce new font families beyond Rajdhani and Inter.
Add saturated accent colors; the measured palette is almost entirely neutral.
Make interface transitions slower than 0.5s.

ZEON DESIGN.md221 lines

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

Fonts

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.

AaRajdhani · 500, 600
AaInter · 400

Find every font on zeonbot.xyz with Font finder →

Colors

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

Get zeonbot.xyz’s palette as CSS or Tailwind with Colors →

Tech stack

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

Check zeonbot.xyz live with Tech stack →

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need a page behind a login?

The DESIGN.md generator Chrome extension makes one from any page you have open, including dashboards and pages behind a login.

See the Chrome extension

More designs

Brand examples →

Spartan-AI spartanai.framer.website · Inter Display

Dev BD IT devbdit.com · Roboto

Sitepeel sitepeel.dev · Inter

FramerBrand framer.com · GT Walsheim Medium

RiveBrand rive.app · Orbitron

DenoBrand deno.com · Inter

Another site? Make a DESIGN.md from any link.

FAQ

ZEON design system questions

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.