docs.stripe.com website design: fonts, colors and UI patterns

Overview

The Stripe API Reference documentation presents a dark-themed, developer-first interface designed for extended technical reading and quick information retrieval. The system employs a deep navy canvas with layered surface elevations to create visual hierarchy without relying on heavy shadows or borders. The interface is organized around a persistent left sidebar navigation and a main content area that accommodates dense technical content, structured data tables, and interactive code elements.

The visual language prioritizes clarity and scannability: high-contrast text on dark backgrounds, color-coded HTTP methods for immediate API endpoint recognition, and a restrained accent palette that draws attention to interactive elements and navigation states. The overall impression is of a precision-engineered tool that respects developer workflow—minimizing visual noise while providing clear pathways through complex API documentation.

The documentation structure supports hierarchical navigation through nested resource categories, with expandable sections revealing operation-level pages. Content surfaces include introductory paragraphs, structured tables for status codes and error types, endpoint listings with method indicators, and code blocks with copy functionality. The system maintains consistency across different API sections while allowing for content-specific adaptations such as method color coding and tabbed interface elements.

Colors

The color system is built on a dark-mode foundation with functional accent colors derived from syntax highlighting conventions. The palette is intentionally limited to reduce cognitive load while providing sufficient differentiation for interactive states and code semantics.

The dark canvas and surface layers create depth through value contrast rather than shadow. The accent purple is used sparingly for navigation selection states and focus indicators, appearing as a background tint in the active sidebar item. Method colors follow conventional syntax highlighting: green for creation operations, blue for retrieval, orange for deletion. Text hierarchy is established through ink value variation rather than size alone, with muted ink serving descriptions and secondary content.

Typography

The type system uses Inter as the primary family for all interface text, with a monospace family for code elements. The scale is optimized for readability at small sizes on dark backgrounds, with slightly increased line heights for body text to accommodate extended reading sessions.

Headings use tight negative tracking for a modern, compact appearance that aligns with technical documentation conventions. Body text maintains generous line height for readability. The label style is distinguished by slightly positive tracking and medium weight, creating a subtle hierarchy for uppercase category markers like "ENDPOINTS" and "BASE URL". Code typography preserves standard monospace proportions with increased line height to match the visual density of surrounding content.

Verify licensing for these families before production use.

Layout

The documentation employs a fixed split-pane layout with a persistent left sidebar and a scrollable main content area. The sidebar occupies approximately 20-25% of viewport width on desktop, providing stable navigation access during content exploration. The main content area centers readable text with adequate margins, while allowing full-width panels for structured data and code examples.

The sidebar contains a vertically stacked navigation tree with expandable category headers and nested page links. Active sections reveal child items with indented alignment, creating a clear parent-child relationship. The main content follows a single-column flow for explanatory text, breaking into structured layouts for API-specific information: two-column tables for status codes, endpoint listings with method-path pairs, and card-like panels for related resources.

Content spacing follows a modular rhythm based on a 0.25rem unit. Section breaks use 3rem vertical gaps, while related content elements maintain 1.5rem separation. Panels and cards receive 1rem internal padding, with code blocks and data tables extending to panel edges for visual containment. Horizontal rules and border dividers appear at 1px using the border color token, creating subtle separation without visual weight.

The layout adapts to content density: introductory sections use generous whitespace, while reference sections compress information into scannable tables and lists. Right-aligned action buttons in section headers maintain consistent positioning for "Ask about this section", "Copy for LLM", and "View as Markdown" utilities.

Visual language

The interface communicates precision and technical authority through restrained visual effects and consistent structural patterns. Surfaces are flat with minimal border treatment—elevation is suggested through value shifts rather than shadows. The darkest canvas recedes, while progressively lighter surfaces advance to contain interactive content.

Corner rounding is modest and functional: 0.5rem for panels and code blocks, 0.375rem for buttons and small interactive elements. This creates a slightly softened technical aesthetic without appearing informal. The rounding scale is consistent enough to feel systematic, yet varied enough to distinguish container types.

Interactive feedback relies on background color shifts rather than outline changes. Navigation items highlight with elevated surface backgrounds; buttons darken on press. The accent purple appears as a filled background for active states rather than as a border or text color, reducing visual competition with content-specific color coding.

Code and data presentation follows established developer conventions: monospace typefaces, left-aligned columns, consistent indentation. HTTP methods receive distinctive color treatment that transfers meaning across contexts—green POST labels in endpoint lists match green indicators in other API tools. Inline code uses the same family as blocks but without background treatment, distinguishing executable syntax from referenced terms.

Imagery is minimal and functional: small language icons in client library grids, status indicators, and copy icons. These elements use simple shapes and limited palettes to maintain the interface's information density without decorative distraction.

Components

Sidebar Navigation

• Anatomy: Vertical stack of category headers with expand/collapse chevrons, nested link lists, and active state indicators
• Surface: Canvas background with full-height border-right separator
• Typography: Navigation token for all items; label token for category headers in uppercase
• Shape: No rounding; full-width items with 0.5rem vertical padding
• Spacing: 1.5rem indentation for nested items; 0.25rem between sibling links
• Composition: Fixed position, scrollable independently from main content
• Variants: Collapsed category (chevron right, children hidden); expanded category (chevron down, children visible); active item (elevated surface background, accent text color)

Content Panel

• Anatomy: Contained rectangle with optional header, body content, and footer actions
• Surface: Surface background, 1px border in border color
• Shape: 0.5rem border radius
• Spacing: 1rem internal padding; 1.5rem margin from surrounding content
• Composition: Full-width within content column; stacks vertically with section gaps
• Variants: Plain panel (border only); header panel (label-style overline in uppercase); code panel (elevated surface background, monospace content)

Endpoint List

• Anatomy: Vertical stack of method-path pairs with optional description
• Typography: Code token for paths; body-small for descriptions
• Surface: Transparent within parent panel
• Spacing: 0.75rem vertical between entries; method text aligned to consistent width column
• Composition: Left-aligned method abbreviation in fixed-width column, path in flowing column
• Variants: POST (success text color); GET (info text color); DELETE (warning text color)

Data Table

• Anatomy: Header row with column labels, body rows with cell data
• Surface: Transparent with horizontal border dividers
• Typography: Body-small for cells; label token for column headers in uppercase
• Spacing: 0.75rem vertical padding per row; 1rem horizontal cell padding
• Composition: Full-width with left-aligned text; status codes in narrow fixed column
• Variants: Dense table (reduced padding for reference data); description table (wider right column for explanatory text)

Section Header Actions

• Anatomy: Horizontal row of icon-button pairs aligned to section title right edge
• Typography: Label token, often with icon preceding text
• Surface: Transparent background; subtle hover state
• Shape: Small rounded rectangles for button containers
• Spacing: 1rem gap between actions; vertically centered with heading
• Composition: Flex row with consistent baseline alignment to heading text

Code Block

• Anatomy: Contained preformatted text with optional header, copy button, and language indicator
• Surface: Elevated surface background
• Typography: Code token throughout
• Shape: 0.5rem border radius
• Spacing: 1rem padding; internal scroll for overflow
• Composition: Full-width within content; header row with label and actions above code area

Responsive behavior

The sidebar navigation should collapse to a hamburger-triggered overlay on viewports below approximately 1024px, preserving the nested structure while freeing horizontal space for content. The main content column should maintain readable line lengths through max-width constraints rather than fluid expansion.

Content panels and data tables should scroll horizontally when content exceeds viewport width, with method columns remaining visible during scroll. Code blocks should maintain monospace formatting with horizontal scroll rather than text wrapping.

Section header actions should reflow below headings on narrow viewports, maintaining tap target sizes of at least 44px. The client library icon grid should wrap to multiple rows rather than compressing icon spacing.

Typography scale should reduce by one step on mobile: hero-display becomes section-display, section-display becomes body at increased weight. Line heights should increase slightly for touch readability.

Practical implementation guidance

### Preserve - The dark canvas-to-surface elevation hierarchy using value shifts rather than shadows - Color-coded HTTP method conventions: green for POST, blue for GET, orange for DELETE - Monospace code presentation with elevated surface backgrounds - Sidebar navigation persistence for wayfinding in deep content hierarchies - Restrained accent usage limited to active states and focus indicators

### Avoid - Light mode implementations without complete palette inversion - Additional accent colors beyond the established purple - Heavy borders or shadows that compete with the flat surface aesthetic - Decorative imagery that reduces information density - Fluid typography that breaks the modular scale alignment

### Recommended build order 1. Establish dark canvas and surface color variables with proper contrast ratios 2. Implement sidebar navigation with expand/collapse state management 3. Create content panel component with consistent padding and border treatment 4. Build typography scale with Inter family and monospace code fallback 5. Add endpoint list component with method color mapping 6. Implement data table styles for reference content 7. Add section header actions with icon integration 8. Refine responsive behavior for sidebar collapse and content reflow

### Accessibility - Maintain minimum 4.5:1 contrast ratio for all body text against dark surfaces - Ensure method color coding is supplemented by text labels for colorblind users - Provide visible focus indicators using accent color for keyboard navigation - Preserve semantic heading hierarchy for screen reader navigation - Ensure code blocks are accessible via keyboard scroll and copy functions - Add aria-expanded states to collapsible sidebar sections

Scope note

This guide covers the API Reference documentation surface visible in the supplied images, including navigation, content panels, endpoint listings, data tables, and code blocks. Mobile breakpoints, animation behavior, search functionality, and interactive code execution environments are not represented. Measurements are practical adaptation targets based on visible proportions in the supplied documentation pages.

More website design guides

Browse website design guides by pattern and website.