A spacious, multiplayer canvas language for turning research, workshops, roadmaps, and AI-assisted ideas into shared decisions.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
A spacious, multiplayer canvas language for turning research, workshops, roadmaps, and AI-assisted ideas into shared decisions.
Open, expressive collaboration with a calm canvas, vivid ownership signals, and themeTypography
Roobert PRO Medium
Primary UI, body, navigation, and product labels.
Roobert PRO Medium, Roobert PRO Medium Placeholder, ui-sans-serif, system-ui, sans-serifFallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
Roobert PRO Bold
Hero emphasis, action labels, and compact metric values.
Roobert PRO Bold, Roobert PRO Bold Placeholder, Roobert PRO Medium, ui-sans-serif, system-ui, sans-serifFallback: ui-sans-serif, system-ui, sans-serif
Fragment Mono
Small canvas coordinates, metadata, and system-like annotations when a monospaced cue is useful.
Fragment Mono, ui-monospace, SFMono-Regular, Menlo, monospaceFallback: ui-monospace, SFMono-Regular, Menlo, monospace
Palette
Canvas light
#fbfaf8Primary light page or work field
Canvas dark
#17151dPrimary dark page or work field
Surface light
#ffffffRaised content surface in light mode
Surface dark
#211e2aRaised content surface in dark mode
Border
#e4dfd8Low-contrast separation and control edges
Ink
#242129Primary text and interface content
Muted ink
#756f7cSupporting copy and metadata
Accent
#6d4affPrimary action, selection, or brand signal
Accent strong
#5134e6Pressed and high-contrast action state
Accent soft
#e9e2ffTinted selection or supporting surface
Secondary signal
#0ea5a4Collaboration, health, or growth cue
Tertiary signal
#ff8266Human, warm, or threat cue
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Display | 72px / 44px mobile | 700 | 0.98 / 1.05 | -0.055em |
| Section heading | 48px / 34px mobile | 700 | 1.02 / 1.08 | -0.045em |
| Card heading | 24px / 21px mobile | 700 | 1.12 | -0.03em |
| Body large | 20px / 18px mobile | 500 | 1.45 | -0.01em |
| Body | 16px / 15px mobile | 500 | 1.5 | 0 |
| Label | 12px | 700 | 1.2 | 0.08em |
| Canvas meta | 11px | 400 | 1.35 | 0.02em |
Spacing & shape
Iconography
Use currentColor, keep arrows and presence cues optically centered, and pair unfamiliar symbols with visible labels. The pack uses original CSS-built marks and inline SVG-style geometry only.
System metrics
Radius
Spacing
Motion
Elevation
Canvas card
0 16px 48px rgba(31,24,41,.10)Lift a focused board object without turning the canvas into a dashboard
Navigation
0 1px 0 rgba(36,33,41,.08)Separate sticky navigation only after scroll
Surfaces & shape
Canvas
#fbfaf8Primary open work area
Raised
#f4f1edSection or object grouping
Ink
#242129Primary text and object labels
Signal
#6d4affAction, ownership, and selection
Guidelines
Imagery
Use abstract, CSS-built boards, sticky-note clusters, cursors, avatars, and diagrams. Avoid real screenshots, copied templates, logos, or downloaded artwork. Every visual should explain collaboration, spatial organization, or a next shared move.
Layout
Use a sticky, low-chrome navigation; a two-column hero with a visual canvas object field; proof metrics; product chapters for research, roadmaps, diagrams, workshops, Docs, Tables, and Slides; then a format switcher and a single invitation to start. Collapse into one column below 760px, keep the canvas visual after the promise, and let controls wrap rather than scroll horizontally.
Concept
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
11 published components in collection order
Components
Production-ready specimens from this AI Kit's approved collection.
More like this
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 17 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
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.
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.
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.