An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.
Delivered component specimen
Inspect the kit's typography, palette, icons, spacing and motion.
Style identity
A dark, editorial system for reactive notebooks where executable code, data output, and concise explanation share one visual lane.
Reference style: Technical minimalism, dark data wall, chart-paper whites, and mint reactive signTypography
Inter
Body copy, navigation, labels, and actions observed in the live site.
Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serifFallback: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif
Spline Sans Mono
Display and section headings observed in Observable's current homepage.
Spline Sans Mono, SFMono-Regular, Menlo, Consolas, Monaco, monospaceFallback: SFMono-Regular, Menlo, Consolas, Monaco, monospace
Notebook code mono
Executable cell code, command hints, and data values.
ui-monospace, SFMono-Regular, Menlo, Consolas, Monaco, Liberation Mono, monospaceFallback: monospace
Palette
Notebook canvas / light
#f0f7f5Bright documentation and review canvas.
Notebook canvas / dark
#0c1112Primary deep notebook wall.
Output surface / light
#ffffffChart, table, and code-paper surface.
Output surface / dark
#141b1cRaised cell and panel surface.
Ink / light
#13221fPrimary readable text on bright surfaces.
Ink / dark
#effbf7Primary text on the dark data wall.
Reactive mint / light
#1f9f8dPrimary action, focus, and active cell.
Reactive mint / dark
#52d8c0High-contrast action and signal on dark.
Data amber
#f5b86aSecondary chart series and notable data point.
Hairline border
#30433eLow-contrast cell and table division.
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Display desktop | 56px | 500 | 64px | — |
| Display mobile | 40px | 500 | 48px | — |
| Section | 40px | 500 | 48px | — |
| Body | 16px | 400 | 24px | — |
| UI | 14px | 600 | 20px | — |
| Code | 12px | 400 | 18px | — |
Spacing & shape
Iconography
Use currentColor, pair symbols with labels for important actions, and preserve optical alignment.
System metrics
Radius
Spacing
Motion
Guidelines
Imagery
Prefer original data visualizations, SVG plots, and CSS geometry. Never use Observable screenshots, logo artwork, notebook captures, or proprietary chart assets.
Layout
Use an asymmetric code/output mosaic on desktop, with the headline and next action anchoring the first scan. Collapse to one deliberate reading order at 390px.
Assigned collection
11 published components in collection order
Components
These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.
More AI Kits
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.
An unofficial, original Perplexity-inspired interface study with 13 focused specimens supported by the live product and content experience.
