Style identity
Quiet product velocity
A dark, precise product language for routing work from intake through planning, agent execution, review, and monitoring.
adaptive dark-first themeDesign system Pro AI Kit17 components
Linear-inspired velocity system
An unofficial, original Linear-inspired system for product operations and agent-assisted delivery, narrowed to the patterns visibly supported by the current reference.
Desktop · 1440 × 10898
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 Variable
Display, navigation, product UI, and body copy
"Inter Variable", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif- Weights
- 100–900 variable; live headings observed around 510
- Sizes
- 11px metadata, 13px UI, 15px body, 24px product headings, 44–76px display
- Line height
- 1.4 UI; 1.55 body; 0.98 display
- Tracking
- -1.408px at 64px live h1; -1.056px at 48px h2; normal body
Fallback: "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif
Berkeley Mono
Issue IDs, commands, timestamps, metrics, and technical metadata
"Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace- Weights
- 100–900 variable
- Sizes
- 11–14px
- Line height
- 1.4–1.55
- Tracking
- 0–0.02em
Fallback: ui-monospace, "SF Mono", Menlo, monospace
Palette
Core colors
Light canvas
#f7f7f8Page background in light mode
Light surface
#ffffffCards and raised product frames
Dark canvas
#08090bPage background in dark mode
Dark surface
#111214Cards and editor frames in dark mode
Primary text
#17181bHigh-contrast content
Muted text
#686a74Supporting copy and inactive labels
Accent
#7c5cffPrimary action and selected state
Accent strong
#aa9bffFocus ring and display signal
Positive
#38c793Healthy, live, or ready state
Warning
#e6ad45Attention or pending state
Danger
#ef6a72Blocked 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
compact geometric outlines with selected status fills
1.5px stroke · 16px / 20px / 24px
Use currentColor, reserve filled dots for status, and pair command icons with readable labels.
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
#f7f7f8 / #08090bPage and element background
Surface
#ffffff / #111214Cards and panels
Raised
#f0f0f2 / #1a1b1fSelected rows and nested frames
Soft
#e8e8ec / #25262bQuiet fills and navigation rails
Guidelines
Do
- Let one action lead each issue or review surface.
- Use neutral borders and quiet surfaces before adding color.
- Make human and agent ownership visible in the same activity context.
- Use motion only for handoff, progress, reveal, or state change.
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
Linear-inspired Interface Elements
17 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.