Adaptive neutral
Canvas
Light #FFFFFF · Dark #0B0C0D
Ordering.co design language
Operational
confidence.
A calm, precise system for builders running real marketplace operations.
Structured, not rigid.
Technical, not cold.
Dynamic, not playful.
Distinctive, not decorative.
01 / Choose a route
See the decision before reading the system.
Each route begins with a finished example, explains how it works, compares Use and Avoid, and keeps technical reference secondary.
Foundations
Choose the shared visual and behavioral decision before inventing a local one.
Build the hierarchy.
ROLE / TOKEN / COMPONENT
Voice
Turn operational experience into calm, specific language for the channel.
Revolutionize every part of your business.
Connect the work your marketplace needs to run.
Outcome → foundation → next action
Visual expression
Compose the message, system relationship and evidence as one editorial idea.
Make the system visible.
Route · state · actionProduct
Build task-led interfaces from governed controls, states and patterns.
Operations
Delivery exception
ORD-042 · 09:42
State and next action stay explicit
02 / One artifact, four layers
One identity changes rhythm without splitting apart.
The same operating reality can become a spacious expression and a dense product task. The layers stay distinct so each decision has an owner.
OperationsIllustrative data · not approved proofAttention required
Resolve delivery exceptions while the next action is clear.
Review the affected route, assign an owner and keep the current state visible.
Route ORD-042Review
- 1
Foundations
Type, semantic color, spacing, iconography and focus establish the shared contract.
- 2
Voice
The message names the operator’s task and the next useful action without promotion.
- 3
Visual expression
A visible route turns a system relationship into a distinctive editorial object.
- 4
Product
The same identity becomes denser and task-led when a person must resolve a state.
03 / Identity at a glance
Neutrals adapt. Identity stays.
Canvas and primary content reverse across Light and Dark. Action Blue, operational indicators and the complete masterbrand symbol remain fixed.
Adaptive neutral
Primary content
Light #0B0C0D · Dark #FFFFFF
Fixed identity
Action Blue
#266DF0 · Light and Dark
Fixed indicators
Operational states
Success · Warning · Danger
Fixed recognition
Logo palette
Masterbrand symbol only
04 / Clear authority
Sound, publication permission and visual expression are three different questions. Passing one does not answer the others.
Implementation resources
Guidelines v1.3.1releasedNext.js · TypeScript · Tailwind