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

Default (pill shape)
Focus (green ring)
Error (red ring)
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