DESIGN.md inspired by ReadMe

---
name: ReadMe
tagline: 'Developer-docs system with Bureau serif display, deep navy demo canvas, blue CTAs, and pill navigation.'
updated_at: 2026-07-09T12:54:00+12:00
published_at: 2026-07-09T12:54:00+12:00
author: webdesignhot
source_url: https://readme.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [dev-tools, saas]
tags: [light, friendly, sans, serif, docs, developer]
preview_swatch: ['#f5f5f5', '#0e2af5', '#00033f']
related: [mintlify, stripe, resend]
description: 'ReadMe mixes developer documentation utility with an editorial launch-page system: a pale page, STK Bureau Sans navigation, STK Bureau Serif hero type, deep navy demo surfaces, blue pill CTAs, and doc-interface chrome that makes API docs feel like a product.'
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: accent-sky
  muted: text-muted
  border: border
  ring: brand
colors:
  bg: '#f5f5f5'
  bg-page: '#ffffff'
  bg-soft: '#fafafa'
  surface: '#ffffff'
  surface-navy: '#00033f'
  surface-navy-raised: '#001361'
  surface-muted: '#f5f5f5'
  text: 'rgba(0, 0, 0, 0.84)'
  text-strong: '#000000'
  text-muted: 'rgba(0, 0, 0, 0.64)'
  text-soft: 'rgba(0, 0, 0, 0.50)'
  text-on-dark: '#ffffff'
  brand: '#0e2af5'
  brand-hover: '#1024d8'
  brand-deep: '#001361'
  accent-sky: '#82cbff'
  accent-blue-soft: '#d2eaff'
  accent-green-soft: '#d3f6c4'
  accent-green: '#396c26'
  accent-violet: '#8712ff'
  border: 'rgba(15, 15, 15, 0.10)'
  border-soft: 'rgba(15, 15, 15, 0.06)'
  border-on-dark: 'rgba(255, 255, 255, 0.18)'
  focus: '#0e2af5'
  success: '#396c26'
  warning: '#e09f17'
  danger: '#d73a49'
  on-brand: '#ffffff'
typography:
  display:
    family: 'STKBureauSerif, Georgia, "Times New Roman", serif'
    weights: [400, 500]
  body:
    family: 'STKBureauSans, ui-sans-serif, system-ui, -apple-system, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace'
    weights: [400, 500]
  scale:
    hero-display: { size: 72, weight: 400, lineHeight: 0.98, tracking: '-0.025em', family: display }
    display: { size: 56, weight: 400, lineHeight: 1.05, tracking: '-0.02em', family: display }
    h1: { size: 42, weight: 400, lineHeight: 1.08, tracking: '-0.01em', family: display }
    h2: { size: 32, weight: 400, lineHeight: 1.33, tracking: '-0.005em', family: display }
    h3: { size: 22, weight: 500, lineHeight: 1.25, tracking: '0', family: body }
    body-lg: { size: 20, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
    body: { size: 16, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
    body-sm: { size: 14, weight: 400, lineHeight: 1.45, tracking: '0', family: body }
    nav: { size: 14, weight: 400, lineHeight: 1.3, tracking: '0', family: body }
    code: { size: 13, weight: 400, lineHeight: 1.5, tracking: '0', family: mono }
radius:
  micro: 4
  sm: 8
  md: 12
  lg: 18
  xl: 28
  hero: 52
  pill: 9999
spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]
layout:
  page-width: 1280
  prose-width: 720
  header-height: 80
  hero-max-width: 1234
  docs-shell-width: 1080
motion:
  ease-standard: 'cubic-bezier(0.2, 0, 0, 1)'
  duration-fast: 140
  duration-standard: 240
  duration-slow: 420
  reduced-motion: 'pause typed headline scrambling and doc-preview transitions'
breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536
components:
  button-primary:
    bg: brand
    text: on-brand
    radius: 9999
    padding: '8px 16px'
    use: 'Get started and signup actions'
  nav-pill:
    bg: transparent
    text: text
    radius: 9999
    padding: '6px 12px'
    use: 'Product, Solutions, Resources menus'
  hero-panel:
    bg: surface-navy
    text: text-on-dark
    radius: 52
    padding: '72px 80px'
    use: 'large dark docs hero canvas'
  docs-shell:
    bg: surface
    border: border
    radius: 18
    padding: 0
    use: 'documentation UI preview below hero copy'
  search-chip:
    bg: bg-soft
    border: border-soft
    radius: 10
    padding: '8px 12px'
    use: 'docs search and Ask AI controls'
lineage:
  summary: 'ReadMe blends an editorial serif hero with real documentation UI. The deep navy hero panel turns docs into a staged product surface rather than a flat feature list.'
  influences:
    - { name: 'API documentation portals', role: 'tabs, search, guides, reference, changelog chrome' }
    - { name: 'Editorial launch pages', role: 'serif hero type and large dark canvas' }
    - { name: 'Developer SaaS', role: 'blue CTA, concise nav, product-proof demo shell' }
---

## 1. Visual Theme & Atmosphere

ReadMe feels like developer documentation that has been promoted to a polished product surface. The page begins quietly with a pale background and compact nav, then lands on a large deep navy hero panel.

The most recognizable move is the contrast between STK Bureau Serif display type and detailed documentation UI chrome. This creates an editorial feel without losing developer credibility.

**Key Characteristics**
- Pale gray/white page shell.
- Deep navy hero panel with very rounded top corners.
- STK Bureau Serif for major display moments.
- STK Bureau Sans for nav and interface labels.
- Blue pill CTA for signup.
- Documentation tabs, search, Ask AI, and sidebar preview inside the hero.
- Tiny badges and pills rather than loud cards.
- Mono used only for code/reference details.

## 2. Color Palette & Roles

Use `bg #f5f5f5` and `surface #ffffff` for the outer page. The signature hero surface is `surface-navy #00033f`.

Text uses `rgba(0, 0, 0, 0.84)` on light surfaces and `#ffffff` on the navy panel.

The brand action is `brand #0e2af5`, observed on the header `Get started` pill. `accent-sky #82cbff` appears in hero badges and detail accents.

Borders should stay faint: `border rgba(15, 15, 15, 0.10)` for light chrome and `border-on-dark rgba(255, 255, 255, 0.18)` inside the navy demo.

## 3. Typography Rules

| Role | Font | Size | Weight | Notes |
| --- | --- | ---: | ---: | --- |
| Hero | STKBureauSerif | 72 | 400 | Editorial, high contrast, animated copy possible |
| Display | STKBureauSerif | 56 | 400 | Large story sections |
| H1 | STKBureauSerif | 42 | 400 | Detail titles |
| H2 | STKBureauSerif | 32 | 400 | Trust and proof sections |
| H3 | STKBureauSans | 22 | 500 | Feature cards |
| Body | STKBureauSans | 16 | 400 | Product copy |
| Nav | STKBureauSans | 14 | 400 | Compact navigation |
| Code | Geist Mono | 13 | 400 | API/reference surfaces |

Keep serif type large and sparse. ReadMe's serif is for authority and personality, not for dense paragraph copy.

## 4. Component Stylings

Primary buttons are blue pills with white text and tight padding. They should feel like navigation-level CTAs, not oversized marketing buttons.

The docs shell is the product proof. It needs tabs such as Guides, Recipes, API Reference, Changelog, and Discussions, plus a compact search field and Ask AI button.

Badges use small rounded pills. The "New" treatment should be a quiet blue chip rather than a warning banner.

## 5. Layout Principles

Center the nav and hero. The large navy hero panel should sit within a pale page, with the docs UI preview overlapping or emerging from its bottom edge.

Avoid separate floating cards around the hero. ReadMe's first viewport is strongest when the hero panel itself is the main object.

## 6. Shapes & Radius Scale

| Tier | Value | Use |
| --- | ---: | --- |
| Micro | 4 | icons, code tokens |
| Small | 8 | small controls |
| Medium | 12 | inputs and chips |
| Large | 18 | docs shell |
| Hero | 52 | oversized navy hero panel |
| Pill | 9999 | nav and CTA pills |

The extreme hero radius is intentional. It softens the dense docs UI and turns the panel into a branded shape.

## 7. Depth & Elevation

Depth is mostly layering: navy panel, docs shell, internal tabs. Shadows can be subtle and broad, but borders are more important for UI clarity.

Use light hairlines around the docs shell and controls. Avoid dark heavy shadows on the pale background.

## 8. Interaction & Motion

The animated headline can scramble or swap words, but keep it slow enough to read. Tabs in the docs shell should switch quickly, around 200-240ms.

Hover states on pills should use light surface changes. The brand CTA can darken slightly on hover.

## 9. Accessibility & A11y

Blue CTA on white has strong contrast. Inside the navy panel, use white text and avoid mid-blue text for small labels unless it is supported by badges or icons.

Documentation previews should preserve visible labels. Do not rely on icons alone for Guides, Recipes, Search, or Ask AI actions.

## 10. Responsive Behavior

On mobile, reduce the serif hero to 44-52px and allow the docs shell to scroll horizontally. The navy panel can keep a large radius, but reduce padding sharply.

The top nav should collapse early; keep the ReadMe logo and `Get started` affordance visible.

## 11. Content & Voice

ReadMe's voice is practical and developer-friendly. It talks about docs that drive adoption, APIs that are easier to understand, and teams that ship better documentation.

Use words like docs, API, guides, reference, changelog, adoption, and developer experience.

## 12. Dark Mode & Theming

The audited homepage uses a light shell with a dark hero panel. A full dark mode should keep the navy surface and blue CTA, but move the outer shell to a near-black instead of inverting to pure blue.

Do not remove the light docs shell from previews; that contrast is part of the product proof.

## 13. Lineage & Influences

ReadMe combines developer documentation structure with editorial packaging. The large serif headline gives personality, while the embedded docs shell keeps the system honest.

It is closer to productized docs than static reference pages. The design goal is to show documentation as software.

## 14. Do's and Don'ts

Do use Bureau Serif for hero statements. Do include real documentation UI chrome. Do keep CTAs as blue pills. Do use deep navy as the hero stage.

Do not turn the page into generic API docs. Do not overuse monospace. Do not make every panel dark. Do not replace the docs preview with abstract illustration.

## 15. Agent Prompt Guide

When generating ReadMe-like UI, ask for a pale developer SaaS page with STK Bureau Serif display type, compact Bureau Sans navigation, a deep navy rounded hero panel, blue pill CTAs, and an embedded docs interface preview.

The result should make documentation feel like a polished product that developers can navigate immediately.