WANT
THIS?

Build me a complete, responsive business website in the KINETIC TYPOGRAPHY style — the type-as-hero look descended from Saul Bass's title sequences and today's Awwwards "type-only" sites: enormous animated headlines that fill the screen, near-monochrome on a dark ground, one hot accent, and almost no imagery. The words ARE the design, and motion is the only special effect. There's nowhere to hide — the copy and its timing carry everything a photograph usually would. Combine this style seed with my brief below. If I don't give you the details, invent a plausible business that suits this bold, confident, statement-driven look — a design agency, a fashion label, a product launch, a music or culture brand — and build a full, real demo for it, not a placeholder. This style is a FAMILY, not a single template — the same seed should produce visibly different sites for different businesses. A few dimensions are yours to choose: the exact HOT ACCENT, the DISPLAY TYPE face, and the MOTION/COMPOSITION approach. Pick one of each that fits my brand and COMMIT to it across the whole site — every option below is equally on-style, so don't second-guess the choice with your own taste. ── INVARIANTS (never break these — they define the style) ── • TYPE IS THE HERO. Words are not labels on a design — they are the design. Imagery is stripped back to almost nothing so language does all the work. No decorative photos, no illustration crutches, no stock hero image. • MASSIVE scale. Headlines run edge to edge, often clipped by the viewport, set uppercase with deliberate letter-spacing. Size alone creates drama and hierarchy, standing in for the visual weight a photo would carry. Body text stays small and quiet by contrast. • STARK, near-monochrome palette on a mostly DARK ground — a near-black background with off-white type — plus exactly ONE hot accent, used like a director's spotlight on the single most important word or action. Nothing else competes for the eye. • Motion & rhythm are the medium: words CUT, SNAP, and STAGGER in with the timing discipline of film editing — hard reveals, staggered lines, decisive entrances — and react to scroll and hover. Timing is a narrative device, not decoration. Never a soft generic fade-up. Honor prefers-reduced-motion (show the final composed type, no animation) and keep ALL content visible without JavaScript — never leave a headline stuck invisible. • Motion discipline: about ONE signature entrance + ONE interaction (scroll or hover text motion) per section — choreographed and intentional, not everything moving at once. • CONTRAST (WCAG 2.2 AA, non-negotiable): off-white type on the dark ground clears AA easily — keep it there. When the hot accent becomes a big filled panel it is a background too: put DARK text on it if it's light/bright, light text if it's deep. Body ≥4.5:1, large/headline ≥3:1. Never accent-on-dark where the two are too close, and never light text on a bright accent fill. ── VARIABLES (choose one of each that fits my brand, then commit) ── • HOT ACCENT — bring my brand's boldest color if I give one; otherwise choose a single high-energy hue (a hot orange-red, electric blue, acid lime, magenta). Just ONE, saturated, used sparingly against the near-monochrome. Everything else stays black-and-off-white. • DISPLAY TYPE — one heavyweight display face carrying the giant headlines, plus one plain sans for the small body, via Google Fonts. Display, pick one: Archivo Black · Anton · Syne 800 · Space Grotesk 700 · a heavy condensed grotesque. Body: Archivo · Inter · Space Grotesk. • MOTION / COMPOSITION — choose one signature and commit: giant stacked words that stagger in line by line; a horizontal scroll that pulls headlines across; marquee/ticker word-strips; or scroll-scrubbed type that scales and slides as you move. Also settle your own entrance timing, stagger rhythm, and how far type is clipped by the frame. ── MEDIA MODEL (type is the media) ── Build the site almost entirely from TYPE and negative space — oversized words, kinetic lines, one accent mark. This style is deliberately image-light. Only where the business genuinely cannot communicate without a real photo (a physical product, a venue) use a rare placeholder <img>, kept restrained so it never out-shouts the type. Do not pad the page with decorative imagery. Generate any needed marks appropriate to MY business, not a reuse of any demo. WHAT THIS SITE MUST ACHIEVE (business goal): Make it instantly, boldly clear who this business helps and what it offers; state the value as confident, quotable lines; reduce a first-time visitor's risk with real proof (results, credentials, client names — whatever is true, set as punchy typographic statements); and drive one clear next step — an enquiry, a booking, a launch signup — as a decisive typographic call to action. Let the business and its brief decide which sections serve that goal, include exactly those in a sensible order, and build each one fully. BUILD REQUIREMENTS — ship a complete, usable site, not a hero mock: • Real information architecture driven by MY business and goal — whatever sections move a stranger toward acting, each with one clear job, in an order that builds understanding then trust then action. Include working navigation and a footer, both set in the typographic system. • Don't be lazy with any section: each carries real content depth (never a title plus one thin line — even statement type needs supporting copy that lands), proper hierarchy from giant headline to quiet body, and the full kinetic treatment. If a section only serves the style, cut it; if a section serves the goal but feels thin, flesh it out. • Real, tailored copy for MY business — sharp, confident, quotable, written to carry meaning on its own since there's no image to lean on. Never lorem. • Fully responsive and accessible: semantic landmarks, alt text on any rare image, and the CONTRAST invariant on EVERY section — especially text on the accent panels. On mobile, keep the type huge and the motion legible; let headlines wrap boldly rather than shrinking to timid sizes. • Apply the chosen accent, type, and motion approach to EVERY section, not just the hero.

Best for AI website builders — Lovable, v0, Bolt

Restyle my existing site into the KINETIC TYPOGRAPHY look — the type-as-hero aesthetic of Saul Bass's title sequences and today's "type-only" award sites: enormous animated headlines, near-monochrome on a dark ground, one hot accent, minimal imagery, and words that carry the design. Keep ALL of my current content, copy, pages, and structure exactly as they are; change only the visual language so the type becomes the main event. Do not invent new pages, remove sections, or rewrite my words. Keep MY brand's boldest color as the single HOT ACCENT — carry it in rather than swapping for a new one. Set the rest near-monochrome on a dark ground. Then make one DISPLAY TYPE choice and COMMIT — a heavyweight face that suits my brand. ── INVARIANTS (never break these) ── • Blow up the headlines to fill the viewport — set them uppercase, massive, edge to edge, with deliberate letter-spacing. Type becomes the hero; body text stays small and quiet beneath it. • Recolor to a stark near-monochrome on a mostly DARK ground (near-black background, off-white type) plus exactly ONE hot accent (my brand color) used sparingly like a spotlight. Strip competing colors. • Strip the imagery back — remove decorative photos and illustration filler so language does the work; keep only images that genuinely carry information. • Add scroll and hover text motion: headlines CUT, SNAP, and STAGGER in with film-editing timing and react as the visitor scrolls. Remove soft generic fade-ups. About one signature entrance + one interaction per section. Honor prefers-reduced-motion (show the final composed type) and never leave a headline stuck invisible; keep content visible without JavaScript. • Never: soft generic fades, busy multi-color palettes, decorative stock imagery, timid small headlines, everything animating at once. ── TYPE (pick one pairing to suit my brand, then commit) ── One heavyweight display for the giant headlines (Archivo Black · Anton · Syne 800 · Space Grotesk 700 · a heavy condensed grotesque) + one plain sans body (Archivo · Inter · Space Grotesk), via Google Fonts. Where an existing image genuinely carries information, keep it but let a giant kinetic headline frame it; replace decorative images with bold type and negative space. Keep it responsive and accessible — enforce WCAG 2.2 AA contrast on every block (≥4.5:1 body, ≥3:1 large): off-white on the dark ground, and when the hot accent becomes a filled panel treat it as a background and pick dark-or-light ink accordingly — never light text on a bright accent fill. Restyle what already exists so every section is type-led and kinetic — same content, new typographic skin.

Paste alongside your existing site/code for an AI coding agent to apply

Design a single section in the KINETIC TYPOGRAPHY style — the type-as-hero look of Saul Bass titles and "type-only" award sites: enormous animated headlines that fill the screen, near-monochrome on a dark ground, one hot accent, and words that carry everything. A low-commitment preview of the style, built richly for whatever section I ask for. Tell me in your own words, alongside this prompt, which section you want and the job it has to do — a hero that lands a statement, a manifesto block, a services row, a testimonial, a launch CTA, a project title reveal. If I don't name one, build a bold statement hero for a plausible agency or launch you invent. Whatever the section, build it fully and richly — don't be lazy: real, tailored copy, proper hierarchy, and depth, not a title plus one thin line. ── INVARIANTS ── • Type is the hero — words are the design, imagery stripped back to almost nothing. Massive, edge-to-edge, uppercase headlines with deliberate letter-spacing; small quiet body by contrast. Stark near-monochrome on a mostly DARK ground (near-black background, off-white type) plus exactly ONE hot accent used sparingly like a spotlight. Motion is CUT / SNAP / STAGGER with film-editing timing plus a scroll or hover reaction — one signature entrance + one interaction; never a soft generic fade. Content visible without JavaScript, honoring prefers-reduced-motion. • Never: soft generic fades, busy multi-color palettes, decorative stock imagery, timid small headlines, everything animating at once. ── VARIABLES (pick one of each, commit) ── • HOT ACCENT — bring my brand's boldest color if I give one; otherwise choose ONE high-energy hue (hot orange-red, electric blue, acid lime, magenta), saturated, used sparingly against the near-monochrome. • DISPLAY TYPE — one heavyweight display (Archivo Black / Anton / Syne 800 / Space Grotesk 700 / a heavy condensed grotesque) + one plain sans body (Archivo / Inter / Space Grotesk), via Google Fonts. Also choose your entrance timing and stagger rhythm. Build the section almost entirely from TYPE and negative space, with one accent mark. Only if it genuinely cannot communicate without a real image, use a rare placeholder <img> kept restrained so it never out-shouts the type — never a fake colored div standing in for a photo. Where the section's job calls for an action, make it a decisive typographic CTA. Make it responsive and accessible — WCAG 2.2 AA contrast (≥4.5:1 body, ≥3:1 large): off-white on the dark ground, and if the accent becomes a filled panel treat it as a background and pick dark-or-light ink accordingly, never light text on a bright accent fill. Write real, tailored copy for the subject, not lorem.

Good for a focused first pass, or a chat-based assistant like ChatGPT/Claude