Style identity
Dark launch surface with living content
A dark, high-contrast site-building language for agent-led exploration, responsive previews, CMS editing, properties, and publishing.
adaptive dark-first with mint signal themeDesign system Pro AI Kit9 components
Framer-inspired motion studio
An unofficial, original Framer-inspired system for AI-assisted site creation, CMS authoring, and publishing, narrowed to the patterns visibly supported by the current reference.
Desktop · 1440 × 10878
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
GT Walsheim Medium
Large launch narrative, editor headings, navigation, and product UI
"GT Walsheim Medium", "GT Walsheim Medium Placeholder", sans-serif- Weights
- 500 live heading weight; use 500–700 for display and controls
- Sizes
- 12px body/navigation, 44px h2, 54px live h1
- Line height
- normal utility text; 48.4px h2; 54px live h1
- Tracking
- -2.16px at the observed 54px h1; -1.76px at 44px h2; normal body
Fallback: sans-serif
Geist
CMS fields, analytics values, code-adjacent labels, and status metadata
Geist, ui-sans-serif, system-ui, sans-serif- Weights
- 600 observed in the live font set; use 400–600 for utility labels
- Sizes
- 11–14px
- Line height
- 1.4–1.55
- Tracking
- 0–0.02em
Fallback: ui-sans-serif, system-ui, sans-serif
Palette
Core colors
Light canvas
#f4f7f6Page background in light mode
Light surface
#ffffffCards and raised product frames
Dark canvas
#080d0cPage background in dark mode
Dark surface
#111a19Cards and editor frames in dark mode
Primary text
#17201fHigh-contrast content
Muted text
#61716eSupporting copy and inactive labels
Accent
#72d4c4Primary action and selected state
Accent strong
#a6f1e4Focus ring and display signal
Positive
#71d6a6Healthy, live, or ready state
Warning
#e3b658Attention or pending state
Danger
#f07d71Blocked 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
minimal outlined controls with high-contrast active signals
1.5px stroke · 16px / 20px / 24px
Keep editor symbols compact, pair actions with labels where the state is consequential, and use mint only for active or healthy states.
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
#f4f7f6 / #080d0cPage and element background
Surface
#ffffff / #111a19Cards and panels
Raised
#f1f8f5 / #172522Selected rows and nested frames
Soft
#e6efec / #203531Quiet fills and navigation rails
Guidelines
Do
- Use a dark canvas to make previews and content records feel active.
- Make Explore, Edit, and Publish the visible progression.
- Keep CMS fields and record states in stable rows rather than decorative cards.
- Use motion and mint accents for active state, not ambient decoration.
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
Framer-inspired Interface Elements
9 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.