Docs Playbook

What Is This

The Docs Playbook is the shared documentation standard for all Rocket Lab projects. It defines how every project site should look, what components to use, and how to write content.

This site is itself built with the same template it documents — what you see here is exactly what every project site should look like.

        What It Covers
        Site layout and navigation structure
UI components (cards, tables, tags)
Content structure and section order
Voice, tone, and formatting rules

      

        How to Start a New Site
        Copy docs/index.html from docs-playbook
Change the badge text and page title
Replace sidebar nav groups with your sections
Fill in your content using the components below

      

Site Anatomy

Every site follows the same three-panel layout. This page is a live example of that layout.

        
          ElementWhat It DoesWhere You're Seeing It

          TopbarFixed header — "Rocket Lab" + project badgeThe bar at the very top of this page
SidebarLeft navigation with grouped sectionsThe panel on the left with section links
Content areaMain content, max 960px wideThis text you're reading right now
FooterCentered text at the bottomScroll to the bottom of the page

Element	What It Does	Where You're Seeing It
Topbar	Fixed header — "Rocket Lab" + project badge	The bar at the very top of this page
Sidebar	Left navigation with grouped sections	The panel on the left with section links
Content area	Main content, max 960px wide	This text you're reading right now
Footer	Centered text at the bottom	Scroll to the bottom of the page

Single-file architecture

Each site is one self-contained index.html file — all CSS is inline in <style>, all JS is inline in <script>. No build tools, no external dependencies.

How to Use

Starting a New Site

# 1. Create a docs/ directory in your project
mkdir docs

# 2. Copy the template
cp docs-playbook/docs/index.html your-project/docs/index.html

# 3. Update the title and badge
#    Change <title> and the .badge text

# 4. Update sidebar nav groups
#    Replace with your own sections

# 5. Deploy via Cloudflare Pages
#    Set build output to: docs/

Adding to an Existing Site

Refer to the Components section below for all available building blocks. Copy the HTML structure for any component you need.

Topbar & Sidebar

Topbar

The topbar is the fixed header you see at the top. It always contains:

Structure

"Rocket Lab" — always present, left-aligned
Badge — project name in uppercase, accent-colored
Hamburger menu — appears on mobile (<900px)

HTML

<header class="topbar">
  <h1>
    Rocket Lab
    <span class="badge">YOUR PROJECT</span>
  </h1>
</header>

Sidebar Navigation

The sidebar groups links under uppercase category labels. The active link highlights automatically as you scroll.

Structure

Wrap each group in .nav-group
Add a .nav-group-title for the category label
Each <a> links to a <section id="..."> in the content

HTML

<div class="nav-group">
  <div class="nav-group-title">Category Name</div>
  <a href="#section-id">Section Title</a>
  <a href="#another-section">Another Section</a>
</div>

Cards & Grids

Cards are the primary content container. Use them to group related information.

Basic Card

A standard card with a border. This is one:

This Is a Basic Card

Use .card for general content blocks. Add a heading with <h4> and content below it.

Highlighted Card

Add .highlight for emphasis — accent-colored border and subtle background tint:

This Is a Highlighted Card

Use .card.highlight for important content, key takeaways, or primary actions.

Grid Layouts

Place cards in a grid using .grid-2 (two columns) or .grid-3 (three columns). Grids collapse to single column on mobile.

Grid Column 1

.grid-3 gives you three equal columns.

Grid Column 2

Each child element becomes a column.

Grid Column 3

Collapses to single column on mobile.

HTML

<div class="grid-2">
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<div class="grid-3">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

Tables

Use tables for structured data — tech stacks, environment variables, API endpoints, comparisons. Always wrap in .table-wrap for horizontal scroll on small screens.

Class	Purpose	When to Use
`.table-wrap`	Scrollable container	Always — wrap every table
`<th>`	Column header	Always — first row of every table
`<td>`	Data cell	For each piece of data

HTML

<div class="table-wrap">
  <table>
    <thead><tr><th>Column 1</th><th>Column 2</th></tr></thead>
    <tbody>
      <tr><td>Data</td><td>Data</td></tr>
    </tbody>
  </table>
</div>

Typography

Consistent heading hierarchy keeps content scannable.

Element	Styling	Usage
`<h2>`	22px, white, accent underline	Section titles — one per `<section>`
`<h3>`	17px, accent-colored	Subsection titles within a section
`<h4>`	15px, white	Card headings, small groupings
`<p>`	15px, light gray	Body text
`<code>`	13px, monospace, dark bg	Inline code, file names, commands
`<pre><code>`	Block code with padding	Code examples, shell commands

Blockquotes use a left accent border and italic text. Use them for important notes or quotes.

Tags & Callouts

Callouts

For important notes that need to stand out from normal content:

This is a callout

Use .callout with a .callout-label for key information, tips, or warnings. It has an accent border and subtle background.

Section Structure

Every project site should include these core sections. Add project-specific sections as needed.

        
          SectionPurposeRequired

          About / OverviewWhat the project is and who it's forYes
Getting StartedSetup, prerequisites, first runYes
Tech StackTechnologies used (table format)Yes
ArchitectureSystem design, key decisionsRecommended
API / Data ModelEndpoints, schemas, data flowIf applicable
DeploymentHow and where it deploysRecommended

Section	Purpose	Required
About / Overview	What the project is and who it's for	Yes
Getting Started	Setup, prerequisites, first run	Yes
Tech Stack	Technologies used (table format)	Yes
Architecture	System design, key decisions	Recommended
API / Data Model	Endpoints, schemas, data flow	If applicable
Deployment	How and where it deploys	Recommended

Voice & Tone

        Do
        Clear over clever — write for scanning, not studying
Direct — lead with what matters, skip filler
Friendly but professional — approachable, not casual
Confident — state things plainly, no hedging

      

Don't

Use jargon without explanation
Hedge with "maybe", "probably", "it should"
Write long paragraphs when a list works
Add filler text or unnecessary introductions

Formatting Rules

Headings

<h2> for section titles (one per section)
<h3> for subsections
<h4> for card headings
Never skip heading levels
Use Title Case

Lists

Use <ul> for unordered items
Use <ol> for sequential steps
Keep list items parallel in structure
Bold the lead term if items need explanation

Code

<code> for inline references
<pre><code> for code blocks
Use inline code for file names, commands, variables

Templates

Drop-in document templates for any project. Copy from the docs-playbook repo.

Template	Purpose	Link
README	Standard project README with all required sections	View
CONTRIBUTING	Contribution guidelines for team projects	View
CHANGELOG	Version history tracking	View
ARCHITECTURE	System design and technical decisions	View

Brand & Style

Color Palette

Variable	Value	Usage
`--bg`	`#0f1117`	Page background
`--surface`	`#181b24`	Cards, sidebar
`--surface2`	`#1e2230`	Table headers, code blocks
`--border`	`#2a2e3d`	Borders and dividers
`--text`	`#e1e4ed`	Primary text
`--text-muted`	`#8b90a0`	Secondary text, nav links
`--accent`	`#06f4b1`	Links, highlights, active states

Responsive Behavior

Breakpoint at 900px
Below 900px: sidebar collapses, hamburger menu appears
Grids collapse to single column
Content padding reduces for mobile

Published Sites

All sites built with this template:

What Is This

What It Covers

How to Start a New Site

Site Anatomy

How to Use

Starting a New Site

Adding to an Existing Site

Topbar & Sidebar

Topbar

Structure

HTML

Sidebar Navigation

Structure

HTML

Cards & Grids

Basic Card

This Is a Basic Card

Highlighted Card

This Is a Highlighted Card

Grid Layouts

Grid Column 1

Grid Column 2

Grid Column 3

HTML

Tables

HTML

Typography

Tags & Callouts

Tags

Callouts

Section Structure

Voice & Tone

Do

Don't

Formatting Rules

Headings

Lists

Code

Links

Templates

Brand & Style

Color Palette

Responsive Behavior

Published Sites

CashAir

WeView

ESA RFQ

Dev Team