Style identity
Signal Notebook
A dark, editorial system for reactive notebooks where executable code, data output, and concise explanation share one visual lane.
Technical minimalism, dark data wall, chart-paper whites, and mint reactive sign themeDesign system Pro AI Kit11 components
Observable-inspired Signal Notebook
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.
Desktop · 1440 × 7815
Foundations
The visual decisions behind the system
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Visit website
Typography
Font families
Inter
Body copy, navigation, labels, and actions observed in the live site.
Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif- Weights
- 400,500,600,700
- Sizes
- 14px,16px
- Line height
- 20px,24px
- Tracking
- 0,-0.01em
Fallback: 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, monospace- Weights
- 400,500,600
- Sizes
- 32px,40px,56px
- Line height
- 1.2,1.14
- Tracking
- 0,-0.02em
Fallback: 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, monospace- Weights
- 400,500
- Sizes
- 12px,13px
- Line height
- 18px,20px
- Tracking
- 0,0.02em
Fallback: monospace
Palette
Core colors
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
Responsive hierarchy
| 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
Layout rhythm
- Density
- Base unit
- Max width
- Section gap
- Card padding
- Element gap
Iconography
Small geometric inline SVG marks with occasional filled brand shapes.
1.5px to 2px where outlined; use currentColor. stroke · 16px / 20px / 24px
Use currentColor, pair symbols with labels for important actions, and preserve optical alignment.
System metrics
Radius
Sm 6pxValue 6pxMd 10pxValue 10pxLg 16px
Spacing
1 4pxValue 4px2 8pxValue 8px3 12px
Motion
Fast 180msValue 180msStandard 250msValue 250msEasing ease-out
Guidelines
Do
- Keep code and output adjacent so the relationship is immediately legible.
- Use one mint action and one amber data signal at a time.
- Keep chart labels and exact values readable without hover.
- Preserve a visible keyboard focus ring and an accessible status announcement.
Don't
- ×Do not turn a notebook specimen into a dashboard.
- ×Do not use a generic gradient where a meaningful data or code relationship belongs.
- ×Do not rely on color alone to distinguish a series or reactive state.
- ×Do not copy Observable copy, logo geometry, screenshots, or proprietary assets.
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.
Concept
A complete visual language, ready to inspect.
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
Signal Notebook Interface Elements
11 published components in collection order
Components
Built from the same system
Production-ready specimens from this AI Kit's approved collection.
More like this
Postman-inspired API Orbit
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
v0-inspired Prompt Workshop
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
Borderless Ledger — Wise-inspired AI Kit
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
Runway-inspired Real-World Studio
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.
Replit-inspired Build Canvas
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.
Perplexity-inspired Research Desk
An unofficial, original Perplexity-inspired interface study with 13 focused specimens supported by the live product and content experience.