An unofficial, original Loom-inspired product system built around record, edit, share, and respond with async video, responsive proof surfaces, and 20 research-selected elements.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
A human async-video system shaped by Loom's current homepage: direct record-and-share hierarchy, a warm purple/orange visual split, lightweight editing proof, collaboration details, and trust-led enterprise reassurance.
Friendly async communication: cream canvas, expressive purple, coral moments, an themeTypography
Charlie Text
Observed Loom body, navigation, controls, metadata, and collaboration copy
Charlie Text, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serifFallback: Inter, -apple-system, Segoe UI, Arial, sans-serif
Charlie Display
Observed Loom display and section headlines
Charlie Display, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serifFallback: Inter, -apple-system, Segoe UI, Arial, sans-serif
Palette
Canvas
#fffaf7Warm page field for human communication
Ink
#24162bPrimary display and body copy
Purple action
#7339d8Record, share, and primary conversion action
Coral signal
#ff6f5bRecording, reply, and lively secondary emphasis
Lavender panel
#f7efffVideo, transcript, and collaboration context
Surface
#ffffffCard, composer, and editor surfaces
Divider
#eadde9Soft boundaries around product proof
Dark canvas
#160e1aExplicit dark mode page field
Dark surface
#21152aExplicit dark mode player and message surfaces
Success
#2f9c75Shared, captioned, and ready state
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Utility | 15px | 400 | 22px | 0 |
| Body | 16px | 400 | 24px | 0 |
| Lead | 18px | 400 | 1.5 | 0 |
| Card title | 28px | 700 | 1.08 | -0.03em |
| Section title | 44px | 700 | 1.14 | -0.02em |
| Hero display | 63px | 700 | 1.03 | -0.025em |
Spacing & shape
Iconography
Pair recording and privacy glyphs with text, keep play/record distinction obvious, and expose captions, comments, and share states to assistive technology.
System metrics
Radius
Spacing
Motion
Elevation
Player stage
0 22px 70px rgba(36,22,43,.11)Lift a recording/editor frame
Share drawer
0 16px 38px rgba(36,22,43,.14)Separate privacy and share controls
Surfaces & shape
Page
#fffaf7 / #160e1aLight and dark canvas
Player
#ffffff / #21152aRecording, editor, and message surfaces
Context
#f7efff / #2f1e3bTranscript, comments, and feature proof
Guidelines
Imagery
Use original abstract video frames, camera/screen split geometry, transcript lines, and soft lavender/coral gradients. Do not reuse Loom logos, production footage, screenshots, or customer photography.
Layout
Lead with a centered human promise and one record/share action, follow with credibility, then use a two-column feature proof story for recording, editing, sharing, and response. Collapse to one column below 900px.
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
20 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.