Read the Docs — Brand Design System Deep Dive

1. Brand Overview

Read the Docs isn't chasing "flashy startup aesthetic" — it's practical, legible, and focused entirely on documentation readers and maintainers. You can feel the engineering roots in every pixel. The design language favors clarity over dramatic flair, with restrained typography choices and a color system grounded in teal blues, neutrals, and a few functional accents.

This is a brand built for developers. The audience is people who write, read, and host documentation. That means the priority is accessibility, scannability, and efficient navigation. Buttons are direct. Links are clearly distinct, but not screaming for attention. There's no overuse of gradients or illustrations — instead, the system delivers a skeleton that supports heavy documentation content without visual clutter.

There's a slight tension in the palette: you get the calm, consistent teal (#0993af) as a brand anchor, but also a strong purple (#6435c9) that appears in secondary CTAs. There's even an unexpected citrus-green (#b5cc18) likely used for status or success. This isn't purely monochromatic, and that's refreshing — Read the Docs embraced a "functional color diversity" approach without feeling scattered.

Typography is entirely Lato with a safety net of web-safe fallbacks, and occasional monospace for code or version labels. No custom licensing overhead. No experimental variable fonts. It's consistent across headings, links, and labels.

Overall vibe: developer-centric, utilitarian, minimal but not bland. Design philosophy: Reduce visual friction. Make content the hero.

2. Color System

2.1 Primary Colors

The brand's primary color token is rgb(9, 147, 175) → #0993af. It's a teal leaning into blue, common in developer tooling brands because it reads clean, trustworthy, and technical without the corporate stiffness of pure navy. Competitors like GitHub lean grayscale, while others like GitLab lean orange — teal gives Read the Docs a distinct position.

This color works well for CTAs, highlighting links, and conveying technical precision. It pairs comfortably with white for maximum contrast, and with dark neutrals for readable text.

2.2 Complete Palette

Plus, CSS variables define functional grays:

• --readthedocs-search-color → rgb(64, 64, 64)
• Divider grays (#e0e0e0, #333, #ddd, etc.) for UI separation.

2.3 Color Relationships

There's high contrast between primary teal (#0993af) and white (#ffffff) — excellent for accessibility. Even smaller text in teal against white will clear WCAG AA. Dark neutrals (#000000, #767676) are paired with white backgrounds for body copy, again exceeding WCAG requirements.

Purple (#6435c9) is high-saturation and works well on light backgrounds, but will fail contrast ratios for very small text on white unless weight is increased. Lime (#b5cc18) is high-chroma and low-luminance contrast — probably reserved for non-text elements like icons or badges.

Dark mode (if implemented) would invert these relationships: teal and purple can survive dark backgrounds well, but lime would need adaptation to avoid vibrancy overload.

2.4 Usage Guide

• Good combos: Teal + white. Purple + white. Black + teal for section headers.
• Avoid: Lime (#b5cc18) as text color over white — low accessibility. Purple over teal — poor readability.
• Interactive states: Darker teal (#00829c) for hover provides depth without breaking brand.
• Functional use only: Status greens, error reds (mapped in link hover styles) shouldn't bleed into primary CTAs.

3. Typography

3.1 Font Families

The primary typeface is Lato, a sans-serif workhorse. Fallback stack: "Helvetica Neue, Arial, Helvetica". Lato is chosen for readability in web UI, neutral personality, and good x-height for small UI labels. No Google Fonts CDN reference in extracted data — likely self-hosted.

Monospace family (browser default) appears in headings and labels related to code.

No variable fonts or alternate weights beyond what Lato offers — simpler maintenance.

3.2 Type Scale

3.3 Hierarchy

They rely on weight and size shifts to create clear hierarchy. Lato 600 at 36px is your top-level page title, scaling down through 32px, 27.43px for subheadings, and 23px for dense heading sections. Links stick close to heading sizes to maintain visual unity across navigation and interactive text.

Monospace inserts break the rhythm intentionally for code snippets or version indicators. The uppercase caption at 14px is perfect for metadata.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Most common values: 16px (body rhythm), 13px (button text vertical balance), 8px (UI gaps).

4.2 Layout

Breakpoints define responsive rules:

• 320px, 420px — small mobile.
• 767px/768px — tablet transition.
• 992px — small desktop.
• 1200px, 1920px — large desktop / full-width doc viewer.

Expect fluid container widths between breakpoints, with fixed vertical spacing following the 8px multiples.

5. Visual Elements

Border radius:

• 4px is the workhorse radius — used on buttons, cards, modals.
• Fancy pill shapes use 8000px — seen in avatars or image masks.
• Occasionally, mixed radius (e.g., 0px 0px 4px 4px) for dropdowns or tooltips.

Shadows:
Mostly subtle — primary effect is rgba(0, 0, 0, 0.15) -1px 1px 6px for hover states and raised elements.
Inners like rgba(122,124,126,0.25) maintain focus outlines.
Overall, depth cues are understated — no deep box shadows or material-style z elevations.

Borders:
Thin (1px) with low-opacity neutral colors for separators. Dividers often use rgba(122,124,126,0.25).

6. Components

6.1 Buttons

Neutral UI Button (.ui.button)

• Default: bg rgb(224, 225, 226), text rgba(0, 0, 0, 0.6), pad 13px 24px, border radius 4px, no border.
• Hover: text rgb(219, 40, 40), bg rgb(224, 224, 224), subtle inset + drop shadow, 1px border rgba(34, 36, 38, 0.12).
• Active: bg rgb(249, 250, 251), dark text, no shadow.
• Focus: bg white, text full black, rgba(122, 124, 126, 0.25) shadow.

Primary Teal (.ui.large.teal.stackable.button)

• Default: bg #0993af, text white, pad 12.375px 27px, 4px radius.
• Hover: unexpectedly grey bg — possible semantic inversion — text turns red (!), same hover shadow.
• Active/Focus: match neutral button's focus states — interesting consistency.

Secondary Purple (.ui.large.secondary.relaxed.button)

• Default: bg #6435c9, text white, same padding/radius as primary.
• States match primary teal — hover turning grey with red text.

Observation: hover turning buttons grey with red text is opinionated — clearly shows "interactive" but removes brand color in hover. You either like that for accessibility or you find it jarring. Personally, I'd keep brand color on hover for consistency.

6.2 Links

Multiple link styles:

• Teal (#0993af) default, hover to near-black text.
• Dark neutral default (#252a31), hover to semi-transparent white — likely for footer/dark backgrounds.
• Functional hover colors in red for emphasis.

No underline — relies on color + hover change.

6.3 Forms

No explicit text input styling extracted — likely default semantic UI inputs with custom colors. Same 4px radius would apply.

6.4 Cards

No explicit card token extract, but any bordered box would use 4px radius, subtle neutral border, and shadows from shadow system.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-primary-teal: #0993af;
  --color-black: #000000;
  --color-gray-118: #767676;
  --color-purple: #6435c9;
  --color-lime: #b5cc18;
  --color-teal-dark: #00829c;
  --color-black-95: rgba(0,0,0,0.95);
  --color-black-5: rgba(0,0,0,0.05);

  /* Typography */
  --font-primary: "Lato", "Helvetica Neue", Arial, Helvetica;
  --font-mono: monospace;

  /* Spacing */
  --space-2: 2px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-11: 11px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-24: 24px;
  --space-48: 48px;

  /* Radius */
  --radius-sm: 4px;
  --radius-pill: 8000px;

  /* Shadows */
  --shadow-hover: rgba(0,0,0,0.15) -1px 1px 6px;
  --shadow-inset: rgba(122,124,126,0.25) 0 0 0 0 inset;
}

8. AI Coding Assistant Prompt

# Read the Docs Design System Specification

You are a Read the Docs design expert. Build UIs matching their visual language exactly.

## Brand Context
Read the Docs is developer-focused: clarity, legibility, minimal distraction. Design system is teal-led with functional accents, Lato typography, and an 8px spacing grid. Depth cues are subtle. Consistency is more important than visual drama.

## Color Palette
- Primary Teal: #0993af — CTAs, primary buttons, key links
- White: #ffffff — page backgrounds, button text
- Black: #000000 — body text, headers
- Gray 118: #767676 — secondary text
- Purple: #6435c9 — secondary buttons, accents
- Lime: #b5cc18 — success status, badges
- Teal Dark: #00829c — hover/focus for teal elements
- Black 95%: rgba(0,0,0,0.95) — hover backgrounds, overlays
- Black 5%: rgba(0,0,0,0.05) — subtle background fills
- Divider Gray: #e0e0e0 — borders between UI blocks

## Typography
- Font Family Primary: "Lato", "Helvetica Neue", Arial, Helvetica — headings, body
- Monospace: monospace — code, version labels

| Level     | Size       | Weight | Line Height | Use For              |
|-----------|------------|--------|-------------|----------------------|
| H1        | 36px       | 600    | 1.20        | Page titles          |
| H2        | 32px       | 600    | 1.20        | Section headings     |
| H3        | 27.43px    | 600    | 1.20        | Subheadings          |
| H3 Mono   | 27.43px    | 500    | 1.20        | Code headers         |
| H4        | 23px       | 400    | 1.50        | Short headings       |
| Body Lg   | 18px       | 400    | 1.50        | Paragraphs           |
| Link Lg   | 18px       | 600    | 1.00        | Navigation           |
| Caption   | 14px       | 600    | 1.20        | Metadata, uppercase  |

## Spacing & Grid
Base unit: 8px  
Scale values: 2px, 5px, 6px, 8px, 11px, 12px, 13px, 14px, 16px, 18px, 24px, 48px  
Use multiples for margins/paddings.

## Border Radius
- sm: 4px — inputs, buttons, cards
- pill: 8000px — avatars, circular masks
- mixed: 0px 0px 4px 4px — dropdowns, panels

## Shadows & Depth
- Hover shadow: rgba(0,0,0,0.15) -1px 1px 6px
- Inset border simulation: rgba(122,124,126,0.25) 0 0 0 0 inset
- Flat design bias — shadows are subtle, use borders for separation.

## Component Specifications

### Primary Button (.ui.large.teal.stackable.button)
Default:

background: #0993af; color: #ffffff; padding: 12.375px 27px; border-radius: 4px; border: none; font-weight: 600; font-size: 18px; box-shadow: rgba(122,124,126,0.25) 0 0 0 0 inset;

Hover:

background: #e0e0e0; color: rgb(219,40,40); border: 1px solid rgba(34,36,38,0.12); box-shadow: 0px 0px 0px 1px inset, rgba(0,0,0,0.15) -1px 1px 6px;

Focus:

background: #ffffff; color: rgba(0,0,0,0.95); box-shadow: rgba(122,124,126,0.25) 0px 2px 3px; border: none;

### Secondary Button (.ui.large.secondary.relaxed.button)
Same structure as primary, but `background: #6435c9` by default.

### Neutral Button (.ui.button)
Default:

background: rgb(224,225,226); color: rgba(0,0,0,0.6); padding: 13px 24px; radius: 4px; border: none; font-size: 16px; font-weight: 600;

### Navigation Links
Teal link:
Default color: #0993af, no underline. Hover: rgba(0,0,0,0.95).

Footer link:
Default color: #252a31. Hover: rgba(255,255,255,0.8).

## Layout & Responsive Rules
Breakpoints:
- xs: 320px
- sm: 420px
- md: 767–768px
- lg: 992px
- xl: 1200px
- xxl: 1920px

## Interaction Rules
- Transitions: 150ms ease on hover/focus state changes
- Focus indicators: subtle shadow or border color change only
- No bounce or large motion

## DO List
- Use only palette colors
- Maintain 8px grid for spacing
- Lato for all text except code
- Match exact border radius per component
- Keep hover behavior consistent — all buttons lose brand color

## DON'T List
- No custom colors
- No heavy box shadows
- No mixed radius outside defined patterns
- Don’t keep brand color in hover for buttons — breaks consistency
- No underlines for links unless explicitly needed

## Code Examples

Primary button:
```css
.btn-primary {
  background: #0993af;
  color: #ffffff;
  padding: 12.375px 27px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 18px;
  border: none;
}
.btn-primary:hover {
  background: #e0e0e0;
  color: rgb(219,40,40);
  border: 1px solid rgba(34,36,38,0.12);
}
```

Neutral card:
```css
.card {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid rgba(122,124,126,0.25);
  padding: 16px;
}
```

Form input:
```css
.input {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 16px;
}
.input:focus {
  border-color: #0993af;
  outline: none;
}
```

9. Summary

TL;DR — Read the Docs runs on developer pragmatism: teal primary for actions, Lato typography for universal legibility, 8px grid for rhythm, and subtle shadows for depth. Buttons drop brand color on hover — a deliberate signature.

Brand Keywords

• dev-minimalist
• teal-functional
• content-first
• restrained-contrast
• accessible-pragmatic