Binectics
v 1.0 · 2026
Design system

Tokens, components, and the rules that hold them together.

The system is small on purpose. Fewer primitives, used precisely, scale better across 162 routes than a sprawling kit of one‑offs.

Color

One signal color carries every primary action. Role accents share matched chroma; semantic colors are reserved for meaning.

Foundation
paper
--bg
paper-2
--bg-2
bone
--bg-3
ash
--fg-3
graphite
--fg-2
ink
--ink
Signal & roles
signal · primary action
--signal
gym · blue
--gym
trainer · amber
--trainer
dietitian · violet
--dietitian
Soft pairs · used for badge fills, never large surfaces
signal-soft
--signal-soft
gym-soft
--gym-soft
trainer-soft
--trainer-soft
diet-soft
--dietitian-soft

Type

Geist for everything. Geist Mono for numerals and operational chrome. Instrument Serif Italic, marketing only.

display / 64Geist 500 · −4% trk
Operate the gym, not the spreadsheet.
h1 / 32Geist 500 · −2.8% trk
Members · this week
h2 / 22Geist 500 · −2% trk
Recent check‑ins
body / 15Geist 400 · 1.5 lh
A flat, structured page lets people find what they came for. Type carries hierarchy; color carries meaning; whitespace carries everything else.
caption / 12.5Geist 400
Last synced 14:32 GMT · auto‑refresh in 5 min
eyebrow / 11Mono · uppercase · +6% trk
Section · today
tnum / 16Mono · tabular
$42,891.30 · +18.4% · 142 / 480
editorial / 48Instrument Serif Italic · marketing
a calmer way to coach

Spacing

A 4‑pixel base. Use multiples of 4 for everything; use 6 only inside dense inline groups.

4 · xs
8 · sm
12 · md
16 · base
24 · lg
32 · xl
48 · 2xl
64 · 3xl

Radii & elevation

Hard‑edged surfaces. Max corner radius 10px for cards and modals; 999px only for pills, avatars, and toggles. We don't use shadows for elevation; we use 1px borders.

0 · square
3 · controls inside controls
6 · buttons, inputs, badges
10 · cards, modals, panels

Iconography

One family throughout — 1.5px stroke, outline only. Never mix filled and outlined in the same view.

home
search
menu
grid
folder
save
time
chat
bell
calendar
user
users
plus
arrow
trend
qr

Buttons

Three intents: primary (ink), signal (only for the single most important action on a page), and ghost (everything else).

One signal button per page. If you find yourself adding a second, demote one to primary.

Badges

Status, type, and category indicators. 22px tall; never as a button substitute.

Verified Pending Rejected Gym Trainer Dietitian Stripe Subscription · 30d USD Active

Inputs & controls

All dropdowns are searchable selects. Country always precedes City. Forms group fields in 12px columns inside 24px sections.

South Africa
Cape Town
Email digest
SMS alerts
Auto‑renew subscription
Send weekly report

Cards

Listing cards, stat cards, and content cards share the same 10px radius and 1px border. No shadows.

Active members
1,284
+12.4% MoM
Avg rating
4.82
+0.06 vs Apr
Monthly revenue
$42,891
−2.1% MoM
Gym interior · 4:3
Gym
Iron Lab · Cape Town
4.9·312 reviews
$48 / month Verified
Trainer portrait · 4:3
Trainer
Sarah Okafor — Strength & conditioning
4.8·Lagos · 6yr
$80 / session Online + in‑person
Nutritionist · 4:3
Dietitian
Dr. Priya Iyer — Sports nutrition
4.9·Mumbai · RD
₹4,500 / plan Verified

Tables

Dense rows, 11px row padding, tabular numerals. Hover state is a quiet bone fill — not blue.

MemberPlanStatusRenewsMRR
Lerato MokoenaPro · monthlyActive12 Jun 2026$48.00
Jamal SutherlandStarter · monthlyActive02 Jun 2026$24.00
Sofia AlmeidaPro · annualPaused14 Aug 2026$38.00
Wei ChenPro · monthlyPast due28 May 2026$48.00

Notification system

38 notification types organized into 10 categories. Each category has one accent color; within a category, all types share that color.

Sarah booked a 7am session for ThursdayBooking · trainer
2m
Iron Lab — 142 check‑ins todayCheck‑in summary
14m
Jamal accepted your client invitationClient management · trainer
1h
New review: 5 stars from Lerato M.Reviews · dietitian
3h
Monthly revenue exceeded $40k for the first timeSystem milestone
yesterday
Payment failed for Wei C. · auto‑retry scheduledBilling
2d

Rules

Short list. Hold to it.

Do
  • One signal button per page
  • Tabular numerals in every table, every dashboard
  • Country before City in every form
  • Searchable select — never a native <select>
  • 1px borders for separation, never drop shadows
  • Eyebrow labels in mono uppercase for section heads
Don't
  • Don't introduce a new color to add visual interest
  • Don't animate buttons — only hover/active states
  • Don't use emoji in product chrome
  • Don't use serif outside marketing pages
  • Don't soften corners past 10px
  • Don't decorate empty states with illustrations — use a sentence and one action