Wordmark
Primary header/logo usage for web and app shell navigation.
`/public/brand/logo.svg`
UI Kit
WorkSchedulePro Interface System
Single source for color, typography, controls, states, cards, and scheduling patterns before applying updates to live app screens.
Design ReadyApp IterationStaging First
App Mark
Compact brand mark for favicon, mobile icon, and minimal shell states.
`/public/brand/logo-mark.svg`
Foundation Tokens
Palette
Base 0
--bg0
Base 1
--bg1
Base 2
--bg2
Card
--card
Accent
--accent
Accent 2
--accent-2
Danger
--danger
Type Scale
Display Heading
Section Title
Body copy for event notes, dashboard summaries, and helper text.
Meta label / chips / timestamps
Shape + Depth
Radius LG / 22px
Radius MD / 16px
Radius SM / 12px
Buttons
Primary actions, secondary actions, and destructive confirmations.
Inputs + Filters
Form controls for invite codes, staff search, and scheduling filters.
Feedback States
Non-blocking system messaging with clear severity hierarchy.
Success
Invite published and visible to selected staff.
Warning
Assigned staff exceeds daily hour guideline.
Conflict
Shift overlaps with another confirmed assignment.
Data Display
112
Open Shifts
38
Offers Pending
7
Warnings
3
Critical
ShiftTimeNeedStatus
Setup Crew2:00 PM - 5:00 PM1 / 3Underfilled
Bartender5:00 PM - 10:00 PM2 / 2Filled
Planner Pattern
Mon
Corporate Lunch
Server · Need 4 · Assigned 3
Evening Reception
Bartender · Need 2 · Assigned 2
Tue
Wedding Banquet
Setup · Need 6 · Assigned 5
Wed
Hotel Ballroom
Runner · Need 3 · Assigned 1