Binectics / Design system / Patterns
Binectics
Patterns · v 1.0

Modals, drawers, toasts.
The quiet machinery behind every screen.

Thirteen overlay patterns the rest of the product calls on without thinking. Hard rules: one modal at a time, one toast stack bottom‑right, drawers come from the side that owns the action.

13 primitives
3 widths · 2 easings
Reuses shared.css only
Modals Lightbox Drawers Command bar Toasts Banners Empty states Skeletons Principles
K1 — K7

Modals

Blocking · 420 px max

Cancel Wednesday's session with Sarah?

You're 32 hours before the start — well outside the 24‑hour cancellation window. You'll get a full refund to your VISA ending 4421.

Refund summary
Session · 60 minR 1,200.00
Take‑home programR 600.00
Platform feeR 90.00
Refunded today+ R 1,890.00
K1 · Confirm cancellation
Cost preview · destructive button

Request a refund

R 1,890 on the 15:30 session with Sarah · paid 11 May. We send your reason directly to Sarah and decide within 24h.

Provider didn't show up
Session quality not as described
Health emergency · documented
Other reason
K2 · Refund flow · step 1
Reason picker · multi-step

Delete your account?

This permanently removes your bookings, messages with providers, and all activity history. We can email you a copy of your data first.

Sarah will keep her record of your sessions for tax compliance · we can't remove that.
K7 · Delete account
Destructive · escape hatch on the left

Report this listing

Tell us what's wrong with "Strathmore Strength Co.". Reports go to platform admins, not the provider.

Fake certification or licence
Misleading photos / claims
Inappropriate content
Safety concern
K3 · Report / flag
Reuses K2 pattern · different context
Modal rules
  • One at a time. Modals don't stack. If a modal needs a follow‑up, swap content in place — same modal, new step.
  • Escape hatch on the left. Primary action goes right. Destructive action also goes right but in --danger red.
  • Show the cost. Anything money‑related uses an .impact block so the user sees exactly what changes.
  • The X dismisses to a known safe state — same as the escape‑hatch button.
K9 — K11

Drawers

Non‑blocking · 320 px · slide from right
Notifications 12
All 12 Bookings Messages Money
Sarah confirmed your session for Wed 08:30. Card was charged R 1,890.00.
3m ago · booking
Sarah Okafor replied to your message about Wednesday's program.
14m ago · message
Your insurance expires in 22 days. Renew before Jun 4 to keep your verified badge.
2h ago · provider
Reminder · session with Sarah Wed at 08:30, Iron Lab Sea Point.
Yesterday · reminder
Payout of R 18,400 hit your ABSA account.
Mon · payout
K9 · Notifications drawer
Category tabs · unread dot · accent per source
Drawer rules
  • Drawers never block the page. The user can keep working behind them. If you need to block, that's a modal.
  • From the right by default. The left side belongs to nav. Bottom drawers only on mobile.
  • One drawer at a time. Opening a second closes the first.
  • The same drawer shell is reused for K10 client peek and K11 activity log — only the content changes.
K12

Command bar

Centered · 480 px · ⌘K from anywhere
esc
Clients · 1 match
Linda Mokoena
Studio · 24-pack · wk 6 of 12
↵
Quick actions
Book a session with Linda
Wednesday 08:00 is open
⌘B
Message Linda
Opens conversation thread
⌘M
Open Linda's program
Strength block II · plan-builder
Navigate
Calendar
This week
G C
↑↓ move ↵ select ⌘K close
Binectics
K12 · Command bar · ⌘K
Search everything · run actions · global jump
K13

Toasts

Bottom-right · stack · 4s default · ink / signal / danger
Saved changes to Linda's program · v 4
Sent to Linda · she'll see it in the app
Undo
Booking placed · waiting on Sarah
Confirmation sent · BIN-2026-042841
View
Payment couldn't be charged
Card declined · retry in 24h
Update card
K13 · Toast stack
Default ink · signal green for success · danger red for failure
Toast rules
  • Bottom-right always. Never top, never centered. Stacks bottom-up, newest on top.
  • 4s default, 10s for danger, 0s if there's an action. The user has to dismiss anything with a button.
  • One line of body + one line of context. If you need more, it's a banner or a modal.
  • Undo for any reversible mutation. Programs sent, settings changed, items archived — always undo.
K14

Banners

Inline at top of page or section · persistent until acted on
K14 · Banner system
Persistent · always has a primary action · semantic color
K15

Empty states

One sentence · one action · nothing more
No bookings yet
Find a coach or studio in your city — verified providers ship a confirmation in under 4 hours.
Browse marketplace
No bookings
Consumer · empty my-bookings
Inbox zero · for once
When a client or lead messages you, it shows up here.
No messages
Earned silence · no CTA
Nothing matches "olympic"
No verified providers nearby. Try removing a filter or searching a different city.
No search results
Action recovers from the dead-end
Empty state rules
  • Never illustrate. No cute drawings, no balloons, no astronauts. A single Lucide icon and a sentence.
  • One sentence of context, one action. If there's nothing useful to do (inbox zero), say so plainly and stop.
  • Be specific. "No bookings yet" beats "Nothing here yet." Tell the user exactly what's empty.
K16

Loading skeletons

220 ms pulse · match the final layout
List skeleton
Conversations · members · bookings
Dashboard skeleton
Title + KPI tiles
14

Principles, all in one place

Order matters
Modals beat drawers beat toasts beat banners.
If two overlays could fire at once, the more interruptive one wins. A modal closes any open drawer. A toast never appears over an open modal.
One overlay at a time
Never stack modals on modals.
If a modal needs a follow-up, swap its content in place — same overlay, new step. Stacked overlays are how people lose track of what they're confirming.
Destructive on the right, in red
Reading direction beats button color.
Primary action and destructive action both sit on the right. Color carries the warning, not position. Escape hatches sit on the left.
Reduced motion respected
All transitions collapse to opacity at 120 ms.
Modal slide-in, drawer slide-from-right, toast bounce — all reduce to a quiet fade when the user has prefers-reduced-motion set.