Style identity
CanvasOps
An unofficial original system for a prompt and data source becoming a governed internal app.
Dark operations canvas with warm off-white type, coral/orange and cool blue acce themeDesign system Pro AI Kit15 components
Retool-inspired CanvasOps Operations Canvas System
An unofficial, original Retool-inspired design system for a prompt and data source becoming a governed internal app. Fifteen focused elements for a concrete product workflow.
Desktop · 1440 × 9687
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
Saans
Interface, body, navigation, and product copy
saansFont, "Saans Fallback", Arial, sans-serif- Weights
- 100–900 variable
- Sizes
- 14–18px
- Line height
- 1.4–1.65
- Tracking
- −0.02em to 0
Fallback: Arial, system-ui, sans-serif
Px Grotesk
Large display statements and builder headlines
pxGroteskFont, "Px Grotesk Fallback", Arial, sans-serif- Weights
- 400, 700
- Sizes
- 42–80px desktop; 34–52px mobile
- Line height
- 0.95–1.1
- Tracking
- −0.06em to −0.02em
Fallback: Arial, sans-serif
System mono
Queries, code, metrics, and technical metadata
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace- Weights
- 400–700
- Sizes
- 11–14px
- Line height
- 1.4–1.55
- Tracking
- 0 to 0.02em
Fallback: ui-monospace, Menlo, monospace
Palette
Core colors
Warm black
#151515Primary dark canvas
Graphite surface
#21211fBuilder and app panels
Raised panel
#2c2d29Selected or nested surface
Warm white
#f4f2e8Primary dark-mode copy
Muted olive
#a7aa9fSupporting copy and metadata
Coral
#ef875fHigh-intent action and warm proof
Cool blue
#6aa4e8Data, focus, and secondary action
Green
#48c88aHealthy/governed state
Light canvas
#f3f2ebExplicit light-mode background
Light surface
#ffffffLight-mode app frame
Light border
#d7d8cfLight-mode structure
Amber
#e4a74cAttention and pending state
Type scale
Responsive hierarchy
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero | clamp(2.5rem, 7vw, 5.5rem) | 600 | 0.98 | -0.06em |
| Section heading | clamp(2rem, 4.5vw, 4rem) | 600 | 1.02 | -0.05em |
| Product heading | 24px | 600 | 1.2 | -0.03em |
| Body large | 18px | 400 | 1.6 | -0.01em |
| Body | 16px | 400 | 1.55 | 0 |
| Interface | 14px | 500 | 1.4 | -0.01em |
| Technical | 12px | 500 | 1.45 | 0.02em |
Spacing & shape
Layout rhythm
- Density
- Framed app-builder density with generous hero breathing room
- Base unit
- 4px
- Max width
- 1180px
- Section gap
- 72–128px
- Card padding
- 20–28px
- Element gap
- 8–16px
Iconography
Small geometric utility icons with filled status marks
1.5–2px where outlined stroke · 16px / 20px / 24px
Keep utility icons quiet and aligned to labels; use shape and text with status color, and do not reproduce Retool’s product mark or captured app icons.
System metrics
Radius
sm 6pxmd 8pxlg 12pxxl 18pxpill 999px
Spacing
Base unit 4pxInline gap 8–16pxCard padding 20–28pxSection gap 72–128pxContent rail 1180px
Motion
Fast control 150msStandard transition 220msReveal 420msReduced motion Remove transforms and nonessential animation
Elevation
Boundary
1px neutral border with one-step surface shiftDefault cards and product frames
Floating
0 12px 36px rgba(0, 0, 0, .18)Menus and command surfaces
Modal
0 24px 80px rgba(0, 0, 0, .32)Dialogs and blocking confirmation
Surfaces & shape
Canvas
#f3f2eb / #151515Page background in light / dark mode
Surface
#ffffff / #21211fCards, controls, and product frames
Raised
#e9e9e1 / #2c2d29Selected rows, nested panels, and focus context
Guidelines
Do
- Start with the operational outcome, not an empty canvas.
- Keep prompt, data, preview, and governance visible in the same frame.
- Use a warm dark canvas, crisp framed panels, and restrained coral/blue action signals.
- Keep status understandable in grayscale with text, shape, or icon.
Don't
- ×Do not copy logos, screenshots, protected marketing passages, or proprietary artwork.
- ×Do not add taxonomy filler, decorative-only patterns, or dashboard-sized specimens.
- ×Do not use color as the sole carrier of meaning.
- ×Do not make the compact element frame depend on a full-page shell.
Imagery
Use original builder panes, prompt cards, data tables, integration lines, and governance labels. Avoid Retool screenshots, gallery images, logos, compliance badges, or copied app thumbnails.
Layout
Center an 1180px rail on a warm dark canvas. Lead with the builder promise and prompt surface, then use framed split panels and concrete app cards. Stack the builder and preview panes below 820px while retaining a clear source-to-result order.
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
Retool-inspired CanvasOps Interface Elements
15 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.