Every class in setpoint-ui.css, rendered light and dark. Copy the markup straight out of this file.
Tokens are copied verbatim from apps/admin/src/app/globals.css. Sizes come from the Tailwind classes in apps/admin/src/components/ui/*.tsx. Never write a hex in a mockup.
button.tsx · h-9 · rounded-md 6px · text-sm 14px · sm h-8/12px · lg h-10/px-32 · icon 36x36
badge.tsx / status-badge.tsx / sport-badge.tsx / booking-type-badge.tsx · rounded-md · px-2.5 py-0.5 · text-xs 600
card.tsx rounded-xl 12px p-6 · section-header.tsx · price-display.tsx · info-row.tsx
tabs.tsx list h-9 rounded-lg bg-muted p-1 · table.tsx th h-10 px-2, td p-2, text-sm
| Student | Class | Coach | Status | Price | |
|---|---|---|---|---|---|
| Somchai P. | Intermediate | Nestor | Confirmed | ฿1,200 | |
| Maria L. | Beginner | Adrian | Checked in | ฿1,200 | |
| James W. | Performance | Nestor | No Show | ฿1,800 |
input.tsx h-9 · select.tsx h-9 · switch.tsx 32x18.4 · checkbox.tsx 16x16 rounded-4px
dialog.tsx max-w-lg 512px sticky header py-3.5 · sheet.tsx right 384px p-6 · toast.tsx 420px · tooltip.tsx bg-primary
The session still counts against the student's package.
Package, attendance and payment history.
calendar-grid.tsx · rail w-14 56px · tick 28px · column min-w 140px · header h-9 bg-muted/50 · card rounded 4px px-1.5 py-1, title 11px, meta 10px
.mockup-ribbon (fixed, top-right, on every page) · .mockup-note (annotation caption) · .mobile-frame (390px)
Annotation. Use a note block to explain what a designer is looking at. It never appears in shipped UI.