# Design System
Inspired by Mintlify

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.

Get Started View Documentation

01 / Colors

## Color Palette

Primary
Near Black
#0d0d0d
Primary text, headings
Pure White
#ffffff
Page background
Brand Green
#18E299
Brand accent, CTAs
Brand Extended
Green Light
#d4fae8
Badge backgrounds
Green Deep
#0fa76e
Badge text
Annotate Green
#1ba673
Code annotations
Semantic
Info Blue
#3772cf
Tags, annotations
Warn Amber
#c37d0d
Warnings, caution
Error Red
#d45656
Errors, destructive
Neutral Scale
Gray 700
#333333
Secondary text
Gray 500
#666666
Tertiary text
Gray 400
#888888
Placeholders
Gray 200
#e5e5e5
Borders
Gray 100
#f5f5f5
Subtle surface
Gray 50
#fafafa
Near-white tint

02 / Typography

## Typography Scale

Display Hero
Display Hero — 56px / 600 / 1.10 / -1.28px / Inter
Section Heading
Section Heading — 40px / 600 / 1.10 / -0.8px / Inter
Sub-heading
Sub-heading — 24px / 500 / 1.30 / -0.24px / Inter
Card Title
Card Title — 20px / 600 / 1.30 / -0.2px / Inter
Body Large — The intelligent knowledge platform that powers your documentation, APIs, and guides.
Body Large — 18px / 400 / 1.50 / normal / Inter
Body — Standard reading text for documentation and content.
Body — 16px / 400 / 1.50 / normal / Inter
Body Medium — Navigation and emphasized text
Body Medium — 16px / 500 / 1.50 / Inter
Button Label
Button — 15px / 500 / 1.50 / Inter
Link / Caption
Link / Caption — 14px / 500 / 1.50 / Inter
Section Label
Label Uppercase — 13px / 500 / uppercase / 0.65px / Inter
MONO TECHNICAL LABEL
Mono Code — 12px / 500 / uppercase / 0.6px / Geist Mono
MICRO LABEL
Mono Micro — 10px / 500 / uppercase / Geist Mono

03 / Buttons

## Button Variants

Get Started
Primary Dark
Documentation
Ghost / Outline
Start Building
Brand Accent
Documentation
Pill Badge
Info
Info Badge
Warning
Warning Badge

04 / Cards

## Card Examples

Docs

### Intelligent Search

AI-powered search that understands your documentation and delivers precise answers to developer questions.

API

### API Reference

Auto-generated API documentation with interactive examples, authentication flows, and code snippets.

Analytics

### Documentation Analytics

Track what developers search for, which pages perform best, and where they get stuck.

Featured Card (24px radius)
Featured

### The Intelligent Knowledge Platform

Build beautiful documentation that powers your developer community. AI-enhanced, automatically updated, and always in sync with your codebase.

05 / Forms

## Form Elements

Email Address
Default (pill shape)
Organization
Focus (green ring)
API Key
Error (red ring)
Description

06 / Spacing

## Spacing Scale

2
4
6
8
10
12
16
24
32
48
64

07 / Radius

## Border Radius Scale

4px
Code, tags
8px
Nav buttons
16px
Cards
24px
Featured
9999px
Buttons, pills

08 / Elevation

## Elevation & Depth

Level 0: Flat
No shadow
Level 1: Subtle
5% border + ambient
Level 2: Medium
8% border + ambient
Level 3: Raised
Stronger shadow
Focus Ring
Brand green ring