Style · 08

Material Design

Material Design = tonal surfaces, pill-shaped actions, and elevation expressed as tone rather than shadow.

Tonal surfaces, pill actions, elevation instead of borders.

North Search

Tonal surfaces. Pill actions.

Tonal surfaces and pill actions. One primary violet, container tints for the rest.

Tonal board

Catalog

Product

Elevation instead of borders. State layers on every touch.

Docs

Filled, outlined, text — three weights of one action.

Settings

Pills everywhere. The radius is the brand.

Works

Analytics board Material · Dark UI

SaaS landing Material

Docs shell Material · Minimal

Page Overall

Page

Formulas stay in English so you can paste them straight into your tool.

BUILD
- Build a complete Material-style SaaS product marketing homepage. Not a card, not an isolated navbar, not a dashboard, not a tabs widget.
- Domain: tonal product marketing where elevation and pill shapes carry the whole identity.

STYLE
- Material: tonal surfaces, filled pills, elevation instead of borders
- Page fill #FEF7FF, type #1D1B20, mute #49454F, primary #6750A4, primary container #E8DEF8
- Cards white, 12px radius, soft shadow 0 1px 3px rgba(0,0,0,0.12); hover deepens shadow, never translates
- Roboto for UI, tabular numerals for metrics. No serif

LAYOUT
- Top app bar as page chrome: wordmark North, links Product / Docs / Pricing, pill search field on container tint, CTA Get started (#6750A4 pill, white type)
- Centered container max-width 1120px, 12 columns, 24px gutter
- Finished homepage: split hero (copy + tonal product visual), three feature cards, mosaic (one large + two stacked), three-column footer
- Do not present the app bar as a standalone control sitting on an empty well

SECTIONS
1. Split hero: "Tonal surfaces. Pill actions." plus a tonal product visual. CTA Start free
2. Three feature cards: Product, Docs, Settings
3. Mosaic: Analytics board (lead) + SaaS landing + Docs shell
4. Three-column footer: Product / Docs / Legal

INTERACTION
- Hover deepens elevation and adds a subtle 8% state layer. No glow, no translate, no second accent

TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to Material tokens - not default shadcn. One homepage route.

DON'Ts
- No gradients on surfaces. No hard 0px corners. No shadows heavier than 0 2px 10px
- No emoji icons, no kitsch illustration
- Do not output only a headline plus two empty cells
- Docs and Settings are destinations, not the homepage type

MOTION
- Use the standard curves: enter 200ms decelerate, exit 150ms accelerate.
- Ripple expands from the exact touch point over 400ms.
- Elevation changes animate the shadow, 200ms.
- prefers-reduced-motion: no ripple, keep the state colour change.

Card

Formulas stay in English so you can paste them straight into your tool.

Build a single Material card. Not a page, not a dashboard.

STYLE
- Material: tonal surfaces, elevation instead of borders
- Card #FFFFFF, 12px radius, shadow 0 1px 3px rgba(0,0,0,0.12), no border
- Kicker SPECIMEN in #6750A4, title #1D1B20, body #49454F. Stage is container tint #F3EDF7

LAYOUT
- One card: kicker SPECIMEN, title, one-line summary, one pill button
- No extra tiles, no navbar

INTERACTION
- Hover deepens the shadow to 0 2px 10px rgba(0,0,0,0.18). The card never moves

CONSTRAINTS
- No gradients on the surface, no hairline borders, one accent #6750A4. No serif type

TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to these tokens - not default shadcn

Buttons

Formulas stay in English so you can paste them straight into your tool.

Build a Material button row only: Continue (filled), Save (outlined), Skip (text). Not a card, not a page.

STYLE
- Continue: #6750A4 fill, white type, fully rounded pill, no shadow at rest
- Save: transparent, type #6750A4, 1px outline #79747E, same pill radius
- Skip: text button #6750A4, no fill, no outline. Stage is container tint #F3EDF7

LAYOUT
- One horizontal row, 10px gap, 40px height, no wrapping card

INTERACTION
- Hover adds a state layer (8% white on filled, 8% primary on the others) and a soft shadow on the filled pill only

CONSTRAINTS
- One primary hue #6750A4. No gradients, no sharp corners, no third variant

TECHNICAL
- React, Tailwind CSS, restyle shadcn Button - do not keep default shadcn look

Navbar

Formulas stay in English so you can paste them straight into your tool.

Build a Material top app bar only. Not tabs, not a page.

STYLE
- Surface #FEF7FF bar with a 0 1px 2px rgba(0,0,0,0.1) shadow, fully rounded as a floating pill
- Wordmark North #1D1B20; links Overview and Billing #49454F; Open #6750A4 pill, white type

LAYOUT
- Single floating pill bar: wordmark, two links, Open. No panel, no border

INTERACTION
- Hover on links darkens them to #1D1B20. The bar itself never lifts

CONSTRAINTS
- No hard edges, no hairline border, one accent #6750A4

TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation - not default shadcn

Tabs

Formulas stay in English so you can paste them straight into your tool.

Build a Material Tabs component with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.

STYLE
- Selected: pill fill #E8DEF8, type #1D192B, weight 600, fully rounded
- Unselected: type #49454F, no fill
- Panel: white, 12px radius, shadow 0 1px 3px rgba(0,0,0,0.12), 16px padding

LAYOUT
- Horizontal tablist + one panel. No wordmark, no Open

INTERACTION
- Hover on unselected: type darkens to #1D1B20. The pill fill never moves

CONSTRAINTS
- No underline indicators, no hairline borders, one accent #6750A4

TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs - do not keep default shadcn look

What is Material Design?

Material UI speaks in tonal containers: one primary violet, container tints for everything else, fully rounded actions, and elevation instead of borders. Skip the radius or the state layer and the model ships generic flat chrome.

Elements

Tonal surfaces
Pill actions
Elevation, not borders

Put this word in the prompt.

Typical colors

#6750A4
#E8DEF8
#FEF7FF
#1D1B20

Use on

SaaS
Mobile apps
Dashboards

Prompt formula

[Component] + Material + Tonal + Pill + Elevation

Material Design

Tonal surfaces. Pill actions.

Product

Docs

Settings

Material Design

What is Material Design?

Elements

Typical colors

Use on

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns