# Typeform — DESIGN.md

Dark charcoal AI-forms marketing with serif headlines, white Sign up CTAs, and a light pricing canvas.

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: **serif display + geometric sans**. A family name is not a bundled font licence. Use an available, licensed installation or a system serif / sans-serif fallback.

## Marketing — Dark AI hero, light pricing

### Observed palette
- Dark canvas: `#1A1228`
- Light canvas: `#F7F5F2`
- Primary text (dark): `#ffffff`
- Primary text (light): `#1A1A1A`
- Accent purple: `#8B5CF6`
- Soft purple label: `#C4B5FD`
- CTA fill (dark pages): `#ffffff`
- CTA fill (light pages): `#1A1A1A`
- Growth Flow border: `#7C3AED`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero headline (serif) | ~40–56px / tight | 500–600 | tight |
| Section heading | ~24–32px | 600 | tight |
| Body / plan copy | 14–16px / 1.5 | 400 | normal |
| Nav / button label | 13–14px | 500–600 | normal |

### Layout & hierarchy
- Dark home hero centers an AI FORMS & AUTOMATION chip, serif claim, and white Get started CTA above ASK / ACT / LEARN cards.
- AI feature page splits a glowing 3D prompt mockup with serif copy and the same white CTA.
- Light pricing page shows Monthly / Yearly toggle, Enterprise bar, and Basic / Plus / Business / Growth Flow cards.

### Components & behavior
- Primary CTA: filled white pill on dark pages; filled black pill on pricing (Sign up / Get started).
- Secondary CTA: outlined Contact sales.
- Plan cards: bordered columns; Growth Flow highlighted with purple Free trial badge and struck-through price.
- Persistent Ask Ty chat affordance on dark marketing pages.

## Scope
The product / form builder 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 serif / sans-serif fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Page inventory
- Homepage: Dark canvas; AI FORMS & AUTOMATION chip; serif "Your favorite forms. Now with AI automation."; Get started—it's free; ASK / ACT / LEARN cards; Ask Ty chat. Screenshot: `captures/typeform-marketing-home.jpg`.
- Pricing: Light canvas; "Get started with AI forms"; Yearly (Save 30%); Basic / Plus / Business / Growth Flow cards. Screenshot: `captures/typeform-marketing-pricing.jpg`.
- AI / feature: Dark TYPEFORM AI page; "Build your forms, email campaigns, & insight reports" with prompt mockup and Get started CTA. Screenshot: `captures/typeform-marketing-feature.jpg`.