Live, from distinctui.css. The markup for each is in components.md.
Everything stays black, white and grey. When every person or project gets a ring, give each one a colour from a single palette. Mzansi is the South African flag set Version One uses, with the meanings its builders pick from.
dui-palette-signal
Cobalt
Vermilion
Violet
Marigold
Blackdui-palette-mzansiRed · LeapBlue · Horizon
Gold · Value
Green · Roots
Black · Ubuntudui-palette-earthTerracottaOchreClayIndigoBlackdui-palette-coastOceanCoralTealSandBlackdui-palette-jacarandaPurpleMagentaSkySunsetBlackSpace runs on 4px: 4, 8, 12, 16, 20, 24, 32, 40, 56, 80, 112. Sections sit 80px apart on phones and 112px on desktop. The only shadow is on floating menus.
One black pill per group. The count only shows things waiting on this person.
Outline for status, solid for one highlight, soft grey for versions.
Two things to fix before this can go out.
Add a name, up to 40 characters.
Errors are black and bold with a small "!" disc. Ticks start unticked. Mark what's optional.
Shared school lifts for parents in the same suburb.
No screenshot yet, so the mark fills the frame.
Needs: one more driver
Hover turns the border black. No lift, no shadow.
ND
v1.0
Three fillings: empty (a seat nobody has taken yet, grey and dashed), initials, or a photo. Each one dashed until it's live, solid once it ships.
LJ
DM
Not live (dashed), live (solid), an earned dot in someone else's colour, a person with no signature of their own (thin black), a group (double black).
v0.3
v0.3
Sizes: 20 in the logo, 36 in a card, 64 in a list, 108 in a faces row, 152 on a profile.
If every person in your product gets a colour, keep the set to five or fewer, saturated and easy to tell apart. Still only on marks.
You're signed in as naledi@example.com.
Quick and quiet. Add distinctui.js and these work from attributes. Everything lands still for people who turn motion off.
v1.0Nothing paused. Good.
Filter tabs: data-filter on the tabs, data-tags on the items. What stays settles back in.
Breadcrumbs, when pages nest three deep or more. The page you're on isn't a link.
Steps through a flow. Done and current are black.
Page numbers are pills. The current one is black.
A side menu for docs and help: the current page is bold with a black edge.
| Item | Qty | Price |
|---|---|---|
| Speckled mug | 2 | R640 |
| Side plates, pair | 1 | R420 |
| Total | R1,060 |
A black line under the header, hairlines between rows, numbers on the right. No stripes.
Yes. Counts save on the phone and sync later.
Not yet.
npx skills add VenusOne-Lee/distinctuiCode people copy sits in a grey panel and scrolls sideways rather than wrapping.
A switch saves straight away. Consent is never a switch: it's an unticked box, one per purpose.
Filters that are on. Press one to remove it.
and 12 more
Who else is here. Five faces at most, then say how many more.
Loading shapes, only after 300ms, in the shape of what's coming.
A dialog only for a question that must be answered first. The veil behind is white, never dark.