cowork-ui-kit / molecules / 02

Cowork UI Kit · Molecules

Ten simple atom combinations — each rendered in Warm and Dark aesthetics. Foundation for organisms.

01 · Molecule

Card

Surface + content padding + optional border/shadow. Four variants: default, elevated, interactive, outlined.

warm · terracotta sand
default
Active sessions
Twelve users online across three rooms.
elevated
Monthly revenue
Pulled from the live ledger.
interactive →
Open ledger
Hover to lift. Click to navigate.
outlined
Empty slot
Drop a widget here.
dark · graphite aurora
default
Active sessions
Twelve users online across three rooms.
elevated
Monthly revenue
Pulled from the live ledger.
interactive →
Open ledger
Hover to lift. Click to navigate.
outlined
Empty slot
Drop a widget here.
02 · Molecule

Form group

Label + input + helper/error message. Three states: default, focused, error.

warm
As it appears on your ID.
Looks good. We will send a confirmation here.
Phone must be at least 9 digits.
dark
As it appears on your ID.
Looks good. We will send a confirmation here.
Phone must be at least 9 digits.
03 · Molecule

Toast notification

Transient feedback, dismissible. Four severities — success, info, warning, danger.

warm
Backup completed
Snapshot stored to cold storage. 412 MB.
New version available
Reload to get the latest features.
Quota at 82 percent
Consider archiving old projects.
Sync failed
Token expired. Reconnect to continue.
dark
Backup completed
Snapshot stored to cold storage. 412 MB.
New version available
Reload to get the latest features.
Quota at 82 percent
Consider archiving old projects.
Sync failed
Token expired. Reconnect to continue.
07 · Molecule

Tab strip

Three variants — underline (default), segmented (pill group), vertical (sidebar nav).

warm
underline
segmented
vertical
dark
underline
segmented
vertical
09 · Molecule

Pagination

Numbered (full) and compact (prev / count / next). 32px minimum tap target.

warm
numbered
compact
Page 3 of 12
dark
numbered
compact
Page 3 of 12
10 · Molecule

Accordion item

Header with chevron + collapsible body. Three items — first expanded, others collapsed.

warm
The studio plan covers unlimited rooms, four facilitator seats, and the full audit log. Backups run nightly to cold storage. Support window is weekdays 9 to 6 in your local timezone.
dark
The studio plan covers unlimited rooms, four facilitator seats, and the full audit log. Backups run nightly to cold storage. Support window is weekdays 9 to 6 in your local timezone.