An unofficial, original Webflow-inspired product system with 14 evidence-backed elements for Flowframe's focused workflow language.
Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.
Delivered component specimen
Inspect the kit's typography, palette, icons, spacing and motion.
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.
Reference style: adaptive light and darkTypography
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.
Assigned collection
14 published components in collection order
Components
These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.
More AI Kits
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 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
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.
