# Webflow — DESIGN.md

Light marketing canvas with bold black sans type and a bright blue accent for CTAs and logo mark.

Independent reference guide from public Incognito viewport captures. Not an official brand guide. Values describe the captured desktop marketing pages; responsive rules below are implementation recommendations.

Captured: 2026-10-01

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **geometric sans / Inter-like**. A family name is not a bundled font licence. Use an available, licensed installation or a system sans-serif fallback.

## Marketing — Light, blue-accent CTAs

### Observed palette
- Canvas: `#ffffff`
- Soft band: `#f5f5f5`
- Primary text: `#0a0a0a`
- Secondary text: `#5c5c5c`
- Accent blue: `#146EF5`
- CTA label: `#ffffff`
- Nav link: `#333333`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero headline | ~48–64px / tight | 700 | tight |
| Section heading | ~28–36px | 600–700 | tight |
| Body / plan copy | 14–16px / 1.5 | 400 | normal |
| Nav / button label | 13–14px | 500–600 | normal |

### Layout & hierarchy
- Wide centred content on a light canvas; homepage hero pairs a short claim with Get started / Talk to Sales over product mockup cards.
- Nav: Platform, Source, Solutions, Resources, Enterprise, Pricing; header actions Log in, Contact Sales, filled Start for free.
- Pricing groups Site plans and Platform plans with a Monthly / Yearly toggle.

### Components & behavior
- Primary CTA: filled bright-blue pill with white label (Start for free / Get started).
- Secondary CTA: light grey or outline button (Talk to Sales).
- Plan cards: bordered columns with short audience labels; NEW badges on some tiers.
- Persistent Made in Webflow pill in the lower corner of marketing pages.

## Scope
The product / Designer editor was not captured: this collection covers logged-out marketing pages only (home, pricing, AI), so there is no product context.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and page structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, stack multi-column plan grids on small screens and let comparison tables scroll horizontally.
- Recommended: give every CTA a real destination and implement hover, focus and disabled states; the capture shows resting states only.
- Use the observed font only when available and appropriately licensed; otherwise use a system sans-serif fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Page inventory
- Homepage: Announcement bar, nav, "Build for what's next" hero with Get started / Talk to Sales, audience chip, then a row of site/product mockup cards (staging, scheduled, scroll analytics, pipeline metric). Screenshot: `captures/webflow-marketing-home.jpg`.
- Pricing: "Our pricing" with Monthly / Yearly toggle; Site plans (Starter, Basic, Premium) and Platform plans (Team). Screenshot: `captures/webflow-marketing-pricing.jpg`.
- AI / feature: "AI that turns creativity into conversions" hero with Webflow AI chip and Get started CTA over a blue lower band. Screenshot: `captures/webflow-marketing-feature.jpg`.