Design System Inspired by Mintlify

1. Visual Theme & Atmosphere

Mintlify is a documentation platform whose own docs are its best showcase. Rich teal-green on clean white creates a polished, trustworthy feel. The design prioritises readability, navigation clarity, and beautiful code rendering — every API reference looks like a product.

Key Characteristics:

• Teal-green primary on clean white
• Best-in-class code block rendering
• Dual mode: light for reading, dark for late-night sessions
• Navigation hierarchy that never gets lost

2. Color Palette & Roles

Primary

• Teal Green (#0D9373): Active nav, CTAs, links
• Teal Dark (#0B7A60): Hover states

Accent Colors

• Blue (#3B82F6): Info callouts, version badges

Neutral Scale

• Text Primary (#111827): Headings, body (light)
• Text Primary Dark (#F9FAFB): Headings, body (dark)
• Text Secondary (#6B7280): Captions, meta

Surface & Borders

• Background Light (#FFFFFF): Light mode page
• Background Dark (#0F1117): Dark mode page
• Surface (#F5F6F8): Code blocks, sidebar (light)
• Surface Dark (#1A1D27): Cards (dark)
• Border (#E5E7EB): Dividers (light), #2D3748 (dark)

Semantic / Status

• Success (#10B981): GET endpoints, passing tests
• Error (#EF4444): DELETE endpoints, errors
• Warning (#F59E0B): POST endpoints, caution callouts
• Info (#3B82F6): PUT endpoints, tip callouts

3. Typography Rules

Font Family

Primary: Inter, fallback: system-ui, sans-serif. Code: Fira Code

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
H1	Inter	36px	700	1.2	-0.01em	Doc page title
H2	Inter	26px	600	1.3	0	Section heading
H3	Inter	20px	600	1.4	0	Sub-section
H4	Inter	16px	600	1.5	0	Deep sub-section
Body	Inter	16px	400	1.75	0	Doc prose
Small	Inter	14px	400	1.5	0	Notes, meta
Code	Fira Code	14px	400	1.6	0	Inline and block

Principles

• 16px body with 1.75 line height is the sweet spot for docs
• Never put docs content narrower than 640px

4. Component Stylings

Buttons

• Primary: bg #0D9373, text #FFFFFF, padding 9px 18px, radius 6px
• Secondary: bg transparent, border 1px solid #E5E7EB, text #111827

Cards & Containers

• Light: bg #FFFFFF, border 1px solid #E5E7EB, radius 8px, padding 20px
• Callout: left border 4px teal, bg rgba(13,147,115,0.06)

Inputs & Forms

• Search input: bg #F5F6F8, border 1px solid #E5E7EB, radius 6px
• Focus: border #0D9373

Navigation

• Left sidebar 260px, structured by doc category
• Active page: teal left border 3px solid #0D9373 + text #0D9373

5. Layout Principles

Spacing System

• 4px — Inline code padding
• 8px — Tight item gaps
• 16px — Content padding
• 24px — Section breaks
• 32px — Major sections
• 48px — Hero/feature spacing

Grid & Container

• Docs max width 860px. Layout: 260px sidebar + content + optional 220px TOC

Whitespace Philosophy

Documentation needs breathing room — wide margins reduce cognitive load.

Border Radius Scale

• None (0px): Full-width code blocks
• Sm (4px): Inline code, method badges
• Md (6px): Buttons, inputs
• Lg (8px): Cards, callouts
• Full (9999px): Language pills, version chips

6. Depth & Elevation

Level	Treatment	Use
Flat	none	Doc surface
Raised	0 1px 3px rgba(0,0,0,0.08)	Cards
Overlay	0 4px 16px rgba(0,0,0,0.12)	Dropdowns
Modal	0 12px 40px rgba(0,0,0,0.16)	Dialogs

7. Do's and Don'ts

Do

• Use teal for active navigation and links — it's immediately recognisable
• Support both light and dark modes with proper token switching
• Color HTTP method badges: GET=green, POST=amber, PUT=blue, DELETE=red

Don't

• Don't nest navigation deeper than 3 levels
• Don't use code blocks without syntax highlighting
• Don't hide the table-of-contents for pages with more than 3 headings

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	0–767px	No sidebar, hamburger nav
Tablet	768–1023px	Collapsible sidebar, no TOC
Desktop	1024px+	Full sidebar + content + TOC

Touch Targets

Minimum 44×44px. Sidebar nav items are 40px tall.

Collapsing Strategy

Sidebar becomes a slide-in drawer. Right-side TOC hidden below desktop.

9. Agent Prompt Guide

Quick Color Reference

• Active nav / links: Teal (#0D9373)
• Background light: White (#FFFFFF)
• Background dark: #0F1117
• Body text light: #111827
• Border light: #E5E7EB
• GET endpoints: Green (#10B981)
• DELETE endpoints: Red (#EF4444)

Iteration Guide

1. Active sidebar item uses teal left border + teal text — both together
2. Callout boxes have a 4px left border in the appropriate semantic color
3. Code blocks in dark mode use #1A1D27 background
4. HTTP method badges are colored by verb (GET/POST/PUT/DELETE)
5. TOC on the right side is only visible on desktop (1024px+)