Style Library

Kinetic Brutalism (Space Grotesk)

Font pairinggeometric sans (single dominant)

Space Grotesk + Space Grotesk — kinetic, brutalist, aggressive, uppercase, oversized, display, motion, street, bold, high-energy, zine

FontsSpace Grotesk headingsSpace Grotesk body

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output. Fonts from Google Fonts: Space Grotesk.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs
Tasks done1,284+12% this week
Sign in
Emailyou@example.com
Remember meContinue
Today
Review roadmapDone
Ship onboardingIn progress
Team sync3 pm
Prompt
Paste into any AI assistant before describing what to build — or attach it to a project below.
# Font pairing — Kinetic Brutalism (Space Grotesk)

Headings: Space Grotesk · Body: Space Grotesk
Mood: kinetic, brutalist, aggressive, uppercase, oversized, display, motion, street, bold, high-energy, zine
Best for: Music/culture apps, sports platforms, brand flagship mobile, performance dashboards, underground product drops

Dominant single-family system: Space Grotesk 700 for display, with 400–600 available for body and supporting hierarchy. Scale: Hero 60–120pt (windowWidth/375*size), Section 40–50pt, Card titles 28–32pt, Body 18–20pt, Labels 12pt. ALL display/buttons/nav: UPPERCASE, letterSpacing -1 (large) / +2 (labels), lineHeight 0.9–1.1x. Use a sans-serif system fallback. Font scale must use PixelRatio helper for responsive sizing.

```css
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
```

Tailwind: `fontFamily: { display: ['Space Grotesk', 'sans-serif'], body: ['Space Grotesk', 'sans-serif'] }`
Use it in an app
Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

From UI/UX Pro Max (MIT, commit 477bcb2).View source