Wingman · Human Interface Guidelines

The single law every Wingman surface obeys.

One ramp for type. One symbol family. Four semantic colors. A floating material for things that overlay. Empty states that are content, not absence. Voice that’s plain and direct. We grade every screen against one bar: would Jony Ive ship this on apple.com?

Sign in to WingmanEngineering principles

Principles

The five rules.

01

One mind

Every screen should feel like it came from one person. Consistency beats local cleverness.

02

Color is information, never decoration

A near-monochrome surface palette, one brand accent, four semantic tones. If you reach for color to make something "pop," stop.

03

The states no one demos are the product

Empty, loading, and error get the same care as the happy path. We grade ourselves on what most teams skip.

04

Direct, plain, human

No tool names, no jargon, no emoji as chrome. We say "Searching your knowledge base," never "mcp:rag_search."

05

Material follows function

Translucent where things overlay. Opaque where things are the page. Liquid Glass as restraint-reference, not as a thing to copy.

Type

One ramp.

Eight steps. Picked once, used everywhere. Weight is 400 body, 500 medium for labels, 600 for titles. Never 700 in-app.

EYEBROW · CATEGORY · 4 · 30 SEC
wm-text-caption

11px

Secondary text and hints.
wm-text-small

12px

Default body — the workhorse.
wm-text-body

13px

Lead paragraph and kicker copy.
wm-text-body-lg

15px

Card title
wm-text-title-s

18px

Page heading
wm-text-title

22px

Hero moment
wm-text-display-s

28px

You’re ready.
wm-text-display

32px

Symbols

One family.

One stroke weight (1.75 on a 24 grid). Round caps + joins. Our own — drawn at one weight so the whole product reads as one mind. Emoji are allowed only in user-authored content, never as chrome.

today
meetings
accounts
watchlist
cadences
documents
pipeline
my-work
assistant
team
leadership
admin
number
growth
practice
alerts
network
voice-note
saved-commands
booking
rocket
deal
engagement
activity
signal
security
plug
sparkle
bolt
inbox
check
chart
people
building
book
clock

Space & radius

Four-px base.

One spacing unit (4px). p-5 (20px) is the standard card padding; p-6 (24px) is airy/hero. One card radius — 16px — everywhere. Drop the drift.

wm-space-14px
wm-space-28px
wm-space-312px
wm-space-416px
wm-space-520px
wm-space-624px
wm-space-832px
wm-space-1040px

Color

Information, never decoration.

Near-monochrome surfaces. One brand accent for the one thing the eye should find. Four semantic tones for state. If you reach for color to make something pop, stop — hierarchy comes from type weight and spacing.

Brand

Success

Attention

Critical

Material

Floating, not flat.

Surfaces that overlay the page — popovers, modals, the cue rail’s settings popover — use a translucent layer: backdrop-blur, hairline border, soft shadow. The page below shows through faintly so the rep stays oriented.

Floating example

.wm-floating

Translucent backdrop-blur, hairline border, soft shadow.

The page below.

Notice how the floating card lets the page texture show through. Apple Liquid Glass as restraint-reference. Not a copy.

Voice

Plain, direct, human.

Don’t

  • “mcp:list_stalled_deals”
  • “Something went wrong”
  • “No data”
  • “Loading…”

Do

  • “Looking up your pipeline…”
  • “Couldn’t reach Wingman. Check your connection.”
  • “No scorecards yet — run a meeting and this fills in.”
  • <LoadingRows /> — a skeleton in the right shape