Kinetic Typography
bold Visual styleWhen words become the design
Reference year: 2024
Compare this themeBest for
Portfolio, Editorial, Brand & events
Less suitable for
- Dense data interfaces where oversized text hides useful information.
Live component preview
Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.
Examples
Color Palette
Typography
Key Characteristics
- Oversized typography as the primary visual element
- Mixed font weights and sizes for dramatic hierarchy
- Text spanning the full viewport width
- Minimal imagery — type carries the entire design
- Bold color accents applied to specific words
- Editorial and magazine-inspired layouts
Tags
Kinetic typography design puts words at the absolute center of the visual experience. Rather than supporting imagery with type, this approach treats typography itself as the hero — oversized, expressive, and often animated. The style draws from editorial print design, motion graphics, and the experimental typography tradition of studios like Sagmeister and Bierut. On the web, it gained fresh momentum around 2024 as variable fonts and scroll-driven animations made large-scale typographic experiences more performant and accessible.
When to Use
Kinetic typography is ideal for creative studios, design agencies, fashion brands, cultural institutions, editorial publications, and personal portfolios of writers and designers. It works best when the content itself is compelling — the words need to earn their oversized presence. Avoid it for utility-focused products or interfaces with dense data where giant type would waste valuable space.
Key Visual Elements
Headlines dominate the viewport, often set at 10-20vw and spanning edge to edge. Mixed weights — thin next to black, italic next to upright — create dramatic contrast within a single line. Select words receive color accents (a single red or blue word in an otherwise black headline) to guide the eye and add meaning. Imagery is minimal or absent; when used, it appears as small inset photos or background textures that support rather than compete with the type. Horizontal rules, oversized numbers, and pull-quote treatments borrow from magazine editorial conventions.
Typography
Clash Display provides the bold, expressive display face this style demands — its sharp geometry and wide range of weights enable dramatic size and weight contrast. General Sans handles body text and secondary information with clean neutrality, letting the display type remain the star. The key is contrast: pair extremes of size, weight, and sometimes style within a cohesive typographic system.
Export style
Choose a library mapping or use the CSS variables in your own components. JSON includes the same mapping. Load the listed fonts separately.
:root {
--tx-surface-bg: #FFFFFF;
--tx-font-heading: "Clash Display", sans-serif;
--tx-font-body: "General Sans", sans-serif;
--tx-surface-bg-image: none;
--tx-card-bg: #FFFFFF;
--tx-card-border: #000000;
--tx-card-border-width: 2px;
--tx-card-radius: 0;
--tx-card-shadow: none;
--tx-card-backdrop-blur: 0px;
--tx-card-border-hover: #FF3366;
--tx-card-shadow-hover: none;
--tx-font-heading-weight: 700;
--tx-font-body-weight: 400;
--tx-text-muted: rgba(17,17,17,0.6);
--tx-text-subtle: rgba(17,17,17,0.4);
--tx-link-color: #FF3366;
--tx-button-radius: 0;
--tx-input-bg: #FFFFFF;
--tx-input-border: #000000;
--tx-text: #111111;
--tx-primary: #000000;
--tx-secondary: #FF3366;
--tx-accent: #3366FF;
--tx-media-filter: none;
}
Prompt Builder
Choose your project, UI library, and output. Prompts, documents, and exports use the same resolved theme values.
Use your own components with the exported CSS variables.
Kinetic Typography
Live component preview
Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.
Copy this prompt into your coding assistant. The task mode applies to the UI prompt.
Generated prompt
You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.
## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Portfolio
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional
## Visual direction
Base theme: Kinetic Typography (visual-style)
- Oversized typography as the primary visual element
- Mixed font weights and sizes for dramatic hierarchy
- Text spanning the full viewport width
- Minimal imagery — type carries the entire design
- Bold color accents applied to specific words
- Editorial and magazine-inspired layouts
## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #000000, secondary #FF3366, accent #3366FF, background #FFFFFF, text #111111
Typography: Clash Display for headings, General Sans for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
--tx-surface-bg: #FFFFFF;
--tx-font-heading: "Clash Display", sans-serif;
--tx-font-body: "General Sans", sans-serif;
--tx-surface-bg-image: none;
--tx-card-bg: #FFFFFF;
--tx-card-border: #000000;
--tx-card-border-width: 2px;
--tx-card-radius: 0;
--tx-card-shadow: none;
--tx-card-backdrop-blur: 0px;
--tx-card-border-hover: #FF3366;
--tx-card-shadow-hover: none;
--tx-font-heading-weight: 700;
--tx-font-body-weight: 400;
--tx-text-muted: rgba(17,17,17,0.6);
--tx-text-subtle: rgba(17,17,17,0.4);
--tx-link-color: #FF3366;
--tx-button-radius: 0;
--tx-input-bg: #FFFFFF;
--tx-input-border: #000000;
--tx-text: #111111;
--tx-primary: #000000;
--tx-secondary: #FF3366;
--tx-accent: #3366FF;
--tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.
## Layout
- Use an oversized heading with a readable body column and a clear reading order.
## Interaction
- Animate display text only. Keep body text stable and stop text motion for reduced motion.
## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Kinetic Typography: Dense data interfaces where oversized text hides useful information.
## Components
Generate the following components in this style:
- Hero
- Navbar
- Cards
- Footer
## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.
## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.