An unofficial, original Webflow-inspired product system with 14 evidence-backed elements for Flowframe's focused workflow language.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
An original web-building system shaped by Webflow's current build, publish, and optimize story: editorial scale on the marketing canvas, a precise blue action accent, and dense product surfaces built from reusable visual structure.
adaptive light and dark themeTypography
WF Visual Sans Variable
Observed Webflow page family for navigation, hero display, section headings, controls, and body copy.
WF Visual Sans Variable, Arial, ui-sans-serif, system-ui, sans-serifFallback: Arial, ui-sans-serif, system-ui, sans-serif
WFVisualSans-Mono
Observed technical labels, code-like metadata, keyboard hints, and measurement accents.
WFVisualSans-Mono, Inconsolata, SFMono-Regular, monospaceFallback: Inconsolata, SFMono-Regular, monospace
Inconsolata
Observed fallback monospace for technical and code-oriented content.
Inconsolata, SFMono-Regular, monospaceFallback: SFMono-Regular, monospace
Palette
Ink canvas
#111111Dark marketing and product canvas
Light canvas
#f7f7f4Warm light page background
Panel
#ffffffPrimary content surface in light mode
Raised panel
#292929Hover, selected, and product control surface in dark mode
Webflow blue
#4353ffPrimary action, active state, link, and focus
Signal lime
#d9ff72Secondary proof accent and positive differentiation
Success
#26c281Published or healthy state
Warning
#f4b34aPending or attention state
Danger
#e25757Destructive or failed state
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Display | 72px | 600 | 0.94 | -0.08em |
| Hero mobile | 48px | 600 | 0.98 | -0.065em |
| Section heading | 48px | 600 | 1.02 | -0.06em |
| Product heading | 24px | 700 | 1.2 | -0.03em |
| Body large | 18px | 400 | 1.55 | -0.01em |
| Body | 16px | 400 | 1.5 | 0 |
| Interface label | 13px | 600 | 1.35 | 0 |
| Technical metadata | 12px | 500 | 1.45 | 0.04em |
Spacing & shape
Iconography
Use a crisp SVG silhouette, keep the optical box square, and pair unfamiliar symbols with text. The pack uses original CSS symbols rather than the protected Webflow icon font.
System metrics
Radius
Spacing
Motion
Elevation
Quiet panel
0 1px 0 rgba(0,0,0,.04)Default card separation on the editorial canvas
Product frame
0 18px 42px rgba(16,16,16,.14)Focused builder frame or preview surface
Focus ring
0 0 0 3px rgba(67,83,255,.34)Keyboard focus and selected state reinforcement
Surfaces & shape
Warm light canvas
#f7f7f4Primary light page background
White work surface
#ffffffCards and builder panels
Dark canvas
#111111Dark-mode page background
Dark raised surface
#292929Dark-mode controls and selected rows
Guidelines
Imagery
Use original CSS diagrams, restrained interface frames, abstract grid lines, and evidence-oriented charts. Avoid bundled customer logos, live Webflow screenshots, and decorative stock imagery.
Layout
Use a 1200px rail with 24px desktop and 16px mobile gutters. Split hero compositions collapse below 900px; bento cards become one column below 650px; preserve visible section rules and let dense tables scroll horizontally.
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
14 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.