BMOS design language · v3

One system.
Three surfaces.

Landing, dashboard and the widgets on merchant sites share these tokens, components and motions. Inspired by the rules of the US National Design Studio.

Rules

"Ninety clicks become nine."National Design StudioURL to live store in 7 clicks.

"Clear enough to finish on the first try."National Design StudioOne column, inline errors that keep what you typed.

"Animation is communication, not decoration."National Design StudioNothing moves without a state change.

"Great design is invisible until it's missing."National Design StudioGood defaults: shipping, policies, open channels on.

"If a system is confusing, it is inaccessible."National Design StudioWCAG 2.1 AA; reduced motion shows the final frame.

"Designing for trust."Joe GebbiaWho gets paid, test mode and the agent of origin are always visible.

"Flat design is over. The future is colorful and dimensional."Brian CheskyConcepts in 3D; controls stay flat.

Every agent, its own mark.BMOSMuseMeta AIChatGPTGeminiGrokClaudeNever a bare name, never a robot.

Tokens

Text
--bm-ink

Text 2
--bm-ink-2

Secondary
--bm-sub

Faint
--bm-faint

Line
--bm-line

Line 2
--bm-line-2

Soft
--bm-soft

Paper
--bm-paper

Card
--bm-card

Plum · brand
--bm-plum

Plum dark
--bm-plum-2

Orchid · accent
--bm-orchid

Orchid ink
--bm-orchid-ink

Lilac
--bm-lilac

OK
--bm-ok

OK wash
--bm-ok-wash

Warn
--bm-warn

Warn wash
--bm-warn-wash

Bad
--bm-bad

Bad wash
--bm-bad-wash

Info
--bm-info

Dark
--bm-dark

Space · 4 pt

Radius

pill

Shadow · plum ink, never pure black

sh1

sh2

sh3

Type

.d1 · Instrument Serif

Every agent.

.d2

Your store, inside AI.

.d3

Channels

.d4

Store agent

h1 · Geist 600

Catalog · 803

h2

Needs you

h3

Mens Leather Flask (Brown)

.lead

Paste your store. See it the way agents see it.

body · Geist 15

Agents skip what they can't read. Fix the price and it goes live.

.mono · Geist Mono

BM-1013 · $34.95 · 0MgLmnS7RNzVBA

.eyebrow

Store agent

.roman

Motion

Each motion maps to one state change. With reduced motion, the final frame shows instantly.

Fade-blur entrance

Inside every agent.

480 ms · cubic-bezier(.215,.61,.355,1) · blur 8 px, y 6 px

A section or a new item appears.

Spring pop

New product

320 ms · cubic-bezier(.34,1.56,.64,1)

A card or a dialog arrives.

Pill-drop toast

320 ms spring in · 200 ms out

Saved, order paid, channel live.

Number ticker

640

800 ms · ease-out quart

A number changed.

Wire draw

480 ms · cubic-bezier(.16,1,.3,1)

A channel connected.

Fly to cart

650 ms arc · then count bump 550 ms spring

Added to cart.

Checkmark draw

480 ms · delay 120 ms

Payment done, issue fixed.

Store agent orb

idle 4 s · listening ring · thinking = real latency · talking

The store agent changes state.

Lottie moment

plays once · Noto Emoji Animation

Published, first order.

3D emoji

Fluent Emoji 3D (Microsoft, MIT), WebP at 48 and 160 px. Concepts only; agents and payments use official marks.

home

catalog

channels

agent

orders

install

settings

cart

bags

card

coin

money

globe

sparkles

party

check

warning

bell

rocket

bulb

link

key

lock

chart

bar

truck

label

picture

phone

laptop

hourglass

inbox

envelope

team

wrench

clipboard

page

memo

store

zap

bubbles

handshake

brain

eyes

megaphone

gem

seedling

thinking

plug

robotless

compass

stopwatch

receipt

books

scroll

gift

wine

dagger

chain

map

flag

tada

shield

calendar

paperclip

loop

Agent marks · 32

LobeHub (MIT), simple-icons (CC0), Muse from Wikimedia Commons (Meta, public domain). Marks belong to their owners and show compatibility.

Alexa

Amazon

Apple

ChatGPT

Claude

Copilot

DeepSeek

Doubao

Gemini

Google

Grok

Honor

Huawei

Hunyuan

Kimi

Payments

Components

Buttons

Channel states

OffSendingIn reviewLiveErrorsComing

BrandTEST MODEPaidRefunded

Issues and chips

Price unreadableNo GTINReadyAffiliate

Agent chips

MuseMeta AIChatGPTGeminiCopilotGrokClaudePerplexity

Form

PriceEnter a price like 34.95

ChatGPT

Tabs, segments, steps

Setup 3/4

Numbers

0Products read

0Agents can buy

Empty, skeleton, note

No orders yet.

Your feed is live.

Muse approved 637 products.

Dialog and drawer

Top layer via <dialog>: no z-index fights, Esc closes, focus returns.

Store agent orb

idlelisteningthinkingtalkingerror

One system.Three surfaces.