USER INTERFACE · LABELS

Badges

Small labels for status, counts, presence and tags. Everything here is live.

THEME

DENSITY

Playground

Change the settings — compare with the default

COMPARE3 differences

DEFAULTSent

Invoice AV-041 Sent

YOURS!Overdue3

Invoice AV-041 !Overdue3

Settings

TONE

default: Cyan

STYLE

default: Soft

SHAPE

default: Pill

SIZE

default: S

DIFF FROM DEFAULT

− tone="cyan"+ tone="coral"+ icon={…}+ count={3}

Variants

6 tones × 5 styles

SOFTSOLIDOUTLINEDOTGHOSTNeutralDraftDraftDraftDraftDraftCyanSentSentSentSentSentGreenPaidPaidPaidPaidPaidAmberAt riskAt riskAt riskAt riskAt riskCoralOverdueOverdueOverdueOverdueOverdueVioletViewedViewedViewedViewedViewed

Types

Status, count, presence, tags, labels, metrics

Statusone vocabulary for all of Avava

○Draft↗Sent◉Viewed✓Paid!Overdue▢Archived

Same word, colour and icon on Invoices, Projects and Deals.

Count3 · 12 · 99+

🔔12✉99+Comments 5

Presence & dotonline · away · busy · live

OnlineAwayBusy · on setOfflineLive

TagsEnter adds · ✕ removes

Outerwear✕Daylight✕Iceland✕

LabelsNew · Beta · Pro next to titles

Client portalBetaSettings

AnalyticsNewSidebar

Custom domainsProBilling

Metric▲ / ▼ with direction colour

Revenue · 30 days€72,900▲ 12%

Margin41%▲ 4 pts

Billable hours612 h▼ 8%

Placement

Where badges sit in the product

IN A TABLE ROW

AV-041Nordic Thread!Overdue

AV-042Fjord Outdoor↗Sent

AV-039Kaya Ceramics✓Paid

AV-043Lumen Coffee○Draft

New24 photos◔Due in 2 d

Spring 27 campaign◉Post

On a photo: Solid or a dark glass badge so it stays readable on any image.

SIDEBAR · TABS · BUTTON

⌂Dashboard

✉Chat3

▦Projects14

€Invoices2 overdue

In Avava

Live — change status, filter, edit tags

Change invoice statusClick a status to change it

AV-041Nordic Thread

AV-042Fjord Outdoor

AV-043Lumen Coffee

Filter projects

Spring 27 campaignActive

Kaya website v2In review

Parka lookbookActive

Lumen retainer · OctDone

Mira Optics launchAt risk

All 7 projects

Project tags

Campaign✕Outdoor✕Q4✕

SUGGESTED

3 tags · used to group files and invoices

Rules & a11y

Restraint, labels and contrast

Good vs noisy

✓ CLEAR

Spring 27 campaign !Overdue

✕ NOISY

Spring 27 campaign OverdueUrgentNewClient

Screen readers

!Overduerole="status" aria-label="Status: Overdue"

3role="img" aria-label="3 unread messages"

Onlinedot is decorative — the word carries the meaning

Outerwear✕<span role="button" tabindex="0" aria-label="Remove Outerwear">

Contrast · softDark theme

Neutral text7.6 : 1AA

Cyan text10.8 : 1AA

Green text9.9 : 1AA

Amber text10.4 : 1AA

Coral text6.0 : 1AA

Violet text8.1 : 1AA

BadgeOverdue

Read-only: tells the state or a count.Invoice status, unread count

ChipIn review2

Clickable: filters or selects something.Project filters, quick replies

TagOutdoor✕

User-made: add and remove freely.Project tags, file labels

DO✓Keep labels to one or two words✓Use the same word and colour for a status everywhere✓Pair colour with text or an icon✓Cap counts at 99+✓Use Solid only for counts and urgent states

DON’T✕Put more than two badges next to one title✕Use coral for anything that isn’t a problem✕Make a read-only badge look clickable✕Show “0” — hide the count instead✕Rely on a coloured dot alone