Material You MD3 (Roboto System)

Font pairingsans (system default)

Roboto + Roboto — material design 3, md3, android, google, tonal, friendly, rounded, accessible, adaptive

material design 3 md3 android google tonal friendly

FontsRoboto headingsRoboto body

Preview

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

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 — Material You MD3 (Roboto System)

Headings: Roboto · Body: Roboto
Mood: material design 3, md3, android, google, tonal, friendly, rounded, accessible, adaptive
Best for: Android apps, cross-platform tools, productivity software, data-heavy B2B dashboards, enterprise mobile

MD3 type scale: Display Large 56px/400/64px. Headline Large 32px/500/40px. Title Large 22px/500/28px. Body Large 16px/400/24px. Label Medium 12px/500/16px. Buttons and Labels: letterSpacing 0.1px. Use system Roboto on Android; load from Google Fonts for iOS parity. Never use custom weights beyond 300–700.

```css
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');
```

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