Observable — Notebook

Docs & NotebooksSee it liveobservablehq.com

A live-code notebook dressed as a GitHub repo page — one dense metadata strip carries published state, license, author and social proof, then the notebook itself renders as a plain scrollable document.

Observable — Notebook — captured interface — Page excerpt · scroll inside to explore

Source capture · 2026-08-01Open full image ↗

Why this pattern works

The single-line metadata strip under the title: published badge, collections count, author avatar, edit date, license tag, fork count, importers, star count — all plain icon+text pairs with no borders or containers. It packs every piece of provenance and social proof into one ~24px row without competing with the title above it. Also worth taking: rendering each gallery entry as a live-sized thumbnail image with a plain caption underneath and zero card chrome — the image alone carries the entry.

Design notes

Surface: Observable's D3 gallery notebook — a published, forkable code notebook rendered as a document
Navigation: Two tiers. A black top-level nav bar (logo, Notebooks, Resources with a dropdown, Pricing, then Sign in / Get started) that is global-app chrome, and a thin vertical icon rail pinned to the far right edge of the content (tag, database, pipeline, package, search, help) for notebook-specific actions. The right rail is unlabelled and nearly invisible until you go looking for it.
Layout: Single fluid column, generously margined, capped well short of full width. No sidebar on the content itself — the only fixed elements are the top nav and the sliver of icon rail on the right.
Density: Relaxed. Section headings and body copy read like a magazine article; the thumbnail grid below is the only dense part — six columns of small square previews with one caption line each.
Color: Black top nav, white page, almost no colour in the chrome — a single muted gold dot for the 'Published' badge and blue reserved for hyperlinks. All the colour on the page comes from the chart thumbnails themselves, which makes the gallery pop against a colourless shell.
Type: A serif-leaning display face for the H1 ('D3 gallery') next to a plain sans for everything else — metadata, body text, thumbnail captions — so the one moment of typographic personality is the title, and the rest stays quiet and legible.
Pattern: The metadata strip: six or seven small facts (state, collections, author, edit date, license, forks, importers, stars) rendered as plain icon+text pairs in a single row, with icons alone doing the job of separators.
States: Populated, steady-state only — a live, well-used gallery with 1k stars and 282 forks. No empty or zero-count treatment visible in this shot.
Don't: Don't turn the metadata strip into a row of pill badges or bordered chips. The moment each fact gets its own container, the row reads as UI decoration instead of quiet document metadata.

Make it your own

Turn this reference into a useful brief for your project. Copy it into the AI tool you already use.

Your project

Use withI want to

Tech stack

Add constraints

What should the tool respect?

Preview & edit prompt

Prompt text

# My project
[Describe the product, audience, and screen you want to improve]

Stack: Use the existing project stack
Task: Implement the interface and verify the result in the existing project.

## Tool guidance (Any AI tool)
Use available project tools to inspect, implement, and test. State any unavailable capabilities.

# Design reference: Observable — Notebook
Source: https://observablehq.com/@d3/gallery
Swipefile reference: https://swipefile.design/ref/observable-notebook/
Captured: 2026-08-01. This is a dated reference, not a claim about the current live product.
Capture scope: a page excerpt. Do not infer unseen sections or interactions.

## Objective
Adapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- surface: Observable's D3 gallery notebook — a published, forkable code notebook rendered as a document
- nav: Two tiers. A black top-level nav bar (logo, Notebooks, Resources with a dropdown, Pricing, then Sign in / Get started) that is global-app chrome, and a thin vertical icon rail pinned to the far right edge of the content (tag, database, pipeline, package, search, help) for notebook-specific actions. The right rail is unlabelled and nearly invisible until you go looking for it.
- layout: Single fluid column, generously margined, capped well short of full width. No sidebar on the content itself — the only fixed elements are the top nav and the sliver of icon rail on the right.
- density: Relaxed. Section headings and body copy read like a magazine article; the thumbnail grid below is the only dense part — six columns of small square previews with one caption line each.
- color: Black top nav, white page, almost no colour in the chrome — a single muted gold dot for the 'Published' badge and blue reserved for hyperlinks. All the colour on the page comes from the chart thumbnails themselves, which makes the gallery pop against a colourless shell.
- typography: A serif-leaning display face for the H1 ('D3 gallery') next to a plain sans for everything else — metadata, body text, thumbnail captions — so the one moment of typographic personality is the title, and the rest stays quiet and legible.
- pattern: The metadata strip: six or seven small facts (state, collections, author, edit date, license, forks, importers, stars) rendered as plain icon+text pairs in a single row, with icons alone doing the job of separators.
- states: Populated, steady-state only — a live, well-used gallery with 1k stars and 282 forks. No empty or zero-count treatment visible in this shot.
- dont: Don't turn the metadata strip into a row of pill badges or bordered chips. The moment each fact gets its own container, the row reads as UI decoration instead of quiet document metadata.

Useful for: The single-line metadata strip under the title: published badge, collections count, author avatar, edit date, license tag, fork count, importers, star count — all plain icon+text pairs with no borders or containers. It packs every piece of provenance and social proof into one ~24px row without competing with the title above it. Also worth taking: rendering each gallery entry as a live-sized thumbnail image with a plain caption underneath and zero card chrome — the image alone carries the entry.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.

Assembled in your browser. No API key or AI request needed. Changing the fields refreshes the preview.

## Objective
Adapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

Observable — Notebook

Make it your own

Keep exploring