Style identity
Expressive collaborative canvas
A vivid, high-contrast product language for exploring ideas, building products, and handing a shared canvas to the next collaborator.
adaptive expressive light and dark themeDesign system Pro AI Kit7 components
Figma-inspired canvas studio
An unofficial, original Figma-inspired system for design, code, AI-native canvas, and product collaboration, narrowed to the patterns visibly supported by the current reference.
Desktop · 1440 × 8936
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
figmaSans
Figma’s current brand text family for navigation, body, and product storytelling
figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif- Weights
- 320 variable observed on body; use 400–700 for interface hierarchy
- Sizes
- 12px metadata, 16px body, 14px mono utility, 56px live h1
- Line height
- 23.2px body; 56px live h1; 18.2px mono utility
- Tracking
- -1.25px at the observed 56px h1; -0.14px nav; 0 body
Fallback: "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif
figmaMono
Canvas coordinates, handoff metadata, and technical labels
figmaMono, "figmaMono Fallback", "SF Mono", menlo, monospace- Weights
- 400–600
- Sizes
- 11–14px
- Line height
- 1.4–1.55
- Tracking
- 0–0.02em
Fallback: "SF Mono", menlo, monospace
Palette
Core colors
Light canvas
#fbfaf8Page background in light mode
Light surface
#ffffffCards and raised product frames
Dark canvas
#151515Page background in dark mode
Dark surface
#202020Cards and editor frames in dark mode
Primary text
#1d1d1dHigh-contrast content
Muted text
#6d6a68Supporting copy and inactive labels
Accent
#ff5c39Primary action and selected state
Accent strong
#ff9d58Focus ring and display signal
Positive
#2cab78Healthy, live, or ready state
Warning
#e5a84cAttention or pending state
Danger
#ef5b5bBlocked 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
expressive geometric outlines with occasional filled tool marks
1.5px stroke · 16px / 20px / 24px
Keep tool symbols optically centered, use color to group tools, and pair unfamiliar actions with 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
#fbfaf8 / #151515Page and element background
Surface
#ffffff / #202020Cards and panels
Raised
#fffdfa / #2a2a2aSelected rows and nested frames
Soft
#f1efed / #373737Quiet fills and navigation rails
Guidelines
Do
- Use expressive color as a tool-grouping signal against a calm neutral canvas.
- Show one object, frame, or story at a time so collaboration stays legible.
- Keep product exploration and build handoff in the same navigation hierarchy.
- Use precise labels alongside visual primitives; never make color do all the explaining.
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
Figma-inspired Interface Elements
7 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.