Made for clarity,
made for the road.

Clarity earns trust.

Make the purpose of a page clear before asking for action. Give people enough context to understand what happens next, especially around activation, payment and the information they share.

Warm paper. Clear signal.

Use the neutral palette for most of a page and reserve stronger colors for emphasis. Coral is an accent; it is not a universal text color or proof that an action succeeded.

A hierarchy you can read.

The road is full of signals.
Make this one useful.

Limit long reading lines to roughly 65–75 characters. Use paragraphs, subheadings and lists to make details approachable; shrinking the text is not a substitute for editing.

Room for the message.

Use a shared page container, consistent side margins and a narrower reading column for long content. The page title introduces the subject; the next section explains it before presenting choices.

• Keep related elements close; use a larger gap between separate ideas.
• On smaller screens, stack cards and move the section index above the reading column.
• Let content determine card height. Tables can scroll horizontally without pushing the whole page sideways.

One clear next step.

Primary actions use warm ink with light text. Supporting links use descriptive language so the destination is clear. These examples navigate to real public resources.

• Use links for destinations and buttons for actions within the current page.
• Name the result: “Check order status” is more useful than “Continue” when the action has a specific purpose.
• During a request, explain what is happening. On failure, preserve context and give a practical way to retry.

Signals with meaning.

Icons help people find a familiar action. Pair them with text whenever the meaning could be unclear. Decorative icons should stay out of the screen reader’s reading order.

Explain the state. Show the route forward.

The following are copy examples, not live account statuses. Payment, delivery, QR activation and optional subscriptions each need their own clear explanation.

Movement with restraint.

Subtle reveals and image movement support the pace of the page. They should never delay essential information, move a focused control or make a task harder to complete.

• Respect reduced-motion preferences for decorative movement and smooth scrolling.
• Keep text readable throughout an animation and provide controls for any automatically changing content.
• Use immediate, understandable feedback for search, filters and disclosures.

Show the product in context.

Vehicle scenes explain where the product belongs; close views explain placement. Label illustrative imagery clearly and avoid presenting campaign visuals as customer evidence.

Readable. Reachable. Understandable.

Write for the person completing the task. Start with the information they need, then explain the details and boundaries. Keep essential instructions in text rather than embedding them only in an image.

• Use one page title and a logical heading sequence.
• Provide labels for search and form fields, and meaningful names for icon-only controls.
• Keep keyboard focus visible. Filters should announce their selected state and result counts.
• Use clear link text and leave room for larger text, narrow screens and touch input.
• Describe errors calmly without exposing internal service details or making a promise the system cannot confirm.