Style identity
Warm connected workspace
An editorial, paper-toned product language for capturing context, finding answers, and turning repeatable work into agents.
adaptive warm light-first themeDesign system Pro AI Kit8 components
Notion-inspired workspace atelier
An unofficial, original Notion-inspired system for docs, knowledge, AI agents, and team workflows, narrowed to the patterns visibly supported by the current reference.
Desktop · 1440 × 4677
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
NotionInter
Marketing headings, navigation, body copy, and product labels
NotionInter, Inter, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"- Weights
- 400, 500, 600, 700 loaded on the live site
- Sizes
- 12px metadata, 16px body, 54px section heading, 96px live h1
- Line height
- 24px body; 56px h2; 100px live h1
- Tracking
- -4.6px at the observed 96px h1; -1.875px at 54px h2; normal body
Fallback: Inter, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif
iA Writer Mono
AI prompt metadata, counts, timestamps, and compact source labels
iA Writer Mono, ui-monospace, SFMono-Regular, Menlo, monospace- Weights
- 400–600
- Sizes
- 11–14px
- Line height
- 1.4–1.55
- Tracking
- 0–0.02em
Fallback: ui-monospace, SFMono-Regular, Menlo, monospace
Palette
Core colors
Light canvas
#f7f5f0Page background in light mode
Light surface
#fffdf8Cards and raised product frames
Dark canvas
#171615Page background in dark mode
Dark surface
#211f1cCards and editor frames in dark mode
Primary text
#201f1cHigh-contrast content
Muted text
#73716bSupporting copy and inactive labels
Accent
#e26d5cPrimary action and selected state
Accent strong
#f18b77Focus ring and display signal
Positive
#48ad7bHealthy, live, or ready state
Warning
#d9a441Attention or pending state
Danger
#dc665aBlocked or destructive state
Type scale
Responsive hierarchy
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Display | clamp(44px, 6vw, 76px) | 650 | 0.98 | -0.07em |
| Section heading | clamp(32px, 4vw, 52px) | 620 | 1.03 | -0.055em |
| Product heading | 24px | 650 | 1.15 | -0.035em |
| Body large | 18px | 400 | 1.55 | -0.01em |
| Body | 15px | 400 | 1.55 | 0 |
| Interface | 13px | 550 | 1.4 | -0.005em |
| Metadata | 11px | 500 | 1.4 | 0.02em |
Spacing & shape
Layout rhythm
- Density
- Moderate editorial/product density
- Base unit
- 4px
- Max width
- 1180px
- Section gap
- 64–96px
- Card padding
- 20–28px
- Element gap
- 8–16px
Iconography
quiet outlined symbols with occasional familiar text glyphs
1.5px stroke · 16px / 20px / 24px
Keep symbols secondary to the label, use warm neutral contrast, and never rely on emoji color alone for meaning.
System metrics
Radius
Control 9pxPanel 14pxFrame 18pxPill 999px
Spacing
1 4px2 8px3 12px4 16px5 20px
Motion
Fast 160msBase 220msReveal 420msReduced disable non-essential motion
Elevation
Flat frame
1px border, no shadowDefault cards and sections
Menu
0 16px 42px rgba(0,0,0,.18)Floating menus and command surfaces
Dialog
0 24px 80px rgba(0,0,0,.30)Drawers and focused overlays
Surfaces & shape
Canvas
#f7f5f0 / #171615Page and element background
Surface
#fffdf8 / #211f1cCards and panels
Raised
#f3f0e9 / #2b2824Selected rows and nested frames
Soft
#ebe7df / #37322dQuiet fills and navigation rails
Guidelines
Do
- Use warm neutrals and generous whitespace to make dense knowledge feel approachable.
- Give one high-intent conversion action visual priority.
- Treat feature cards as proof of a workflow, not decoration.
- Keep search and citations legible at the point where trust is earned.
Don't
- ×Do not copy the reference wordmark, protected copy, customer marks, or proprietary UI assets.
- ×Do not use gradients or color without a product meaning.
- ×Do not rely on color alone for status, errors, or selection.
- ×Do not add taxonomy filler or a dashboard-sized specimen.
Imagery
Use original CSS art, abstract geometry, and authored product frames. The two ordered screenshots are explicitly requested live reference media; do not use them inside component source or as decorative imagery.
Layout
Use one aligned content rail, generous section rhythm for marketing proof, compact product frames for workflow evidence, and a single-column mobile stack below 840px. Preserve readable gutters and let tables scroll rather than clip.
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
Notion-inspired Interface Elements
8 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.
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.
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.