Flat Design Mobile (System Bold)

Font pairingsans + sans

Inter + Inter — flat, clean, system, bold, geometric, cross-platform, icon, poster, minimal, functional, responsive

flat clean system bold geometric cross-platform

FontsInter headingsInter body

Preview

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

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

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 — Flat Design Mobile (System Bold)

Headings: Inter · Body: Inter
Mood: flat, clean, system, bold, geometric, cross-platform, icon, poster, minimal, functional, responsive
Best for: Cross-platform apps, dashboards, system UI, onboarding, marketing pages, informational apps, icon-heavy interfaces

System-first strategy: Inter as primary, falls back to system SF/Roboto on iOS/Android. Scale: Headlines fontWeight 800 letterSpacing -0.5; Subheadings fontWeight 600 fontSize 18; Body fontWeight 400 lineHeight 24; Labels fontWeight 700 uppercase letterSpacing 1. Thick weights carry all hierarchy since there are no shadows. Use aggressive size contrast (poster rule: body 16pt vs headline 40pt+). Avoid italic.

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

Tailwind: `fontFamily: { sans: ['Inter', '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.

Start building — free I already have an account

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