Patterns

Components get the details right; composition decides whether a screen makes sense. Each pattern below is shown wrong and right with the library's own pieces.

Feature first

Lead with the task the person came for. Navigation and chrome step back until they are needed.

navigation first

Dashboard
Orders
Customers
Reports
Settings

Find an order

task first

Find an order

The search is the screen, not a footnote under the menu.

Structure first

Settle the layout and hierarchy with neutral blocks before adding imagery. Decoration never becomes the focal point.

decoration

Ceramic cup

structure

Ceramic cup

Q 95 · 24 in stock

A neutral frame holds the place; the real photo comes later.

Action placement

A repeated action sits in the same place on every row, so people find it without searching. In lists that is the end edge (ListItemAction).

end, start, inset

Wall clock

Ceramic cup

Day backpack

end, always

Wall clock

Ceramic cup

Day backpack

One position for the action, row after row.

Consistent names

One concept, one word, everywhere: navigation, headings and buttons. If it's a store in the menu, it's a store on the button.

three names

Menu: Workspaces

Organizations

one name

Menu: Stores

Stores

Three names make three things; one name makes one.

Personality

Keep one voice: plain titles, matter-of-fact descriptions, verbs on buttons, sentence case. No hype, no shouting.

mixed tone

Insane deals!!!

ur gonna love this, trust us

one voice

New this week

Twelve products, restocked today.

Calm and clear reads as confident.

Shared styles

The same action looks the same wherever it appears. Pick its Button variant once and reuse it.

3 styles

1 style

Three Open buttons, one style.