This is the living reference for every visual building block in the Bagel University platform. Every color, font, spacing value, and component you see here is powered by the same CSS files your app uses. If it looks right here, it looks right everywhere.
All colors are defined as CSS custom properties. Never use raw hex values in components.
Three font families: Graduate for the brand, DM Serif Display for section headings, DM Sans for everything else.
4px base unit. Use tokens, not arbitrary pixel values.
Use .btn + variant + size. One primary button per screen.
The primary container for content. Add status border with .card-status.
Used for grouping related content. No hover state unless interactive.
Clickable cards that navigate somewhere. Shows elevated shadow on hover.
All 6 stations defined with responsibilities and staffing rules.
Opening checklist done. Closing and side work still needed.
3 items flagged: missing baseline quantities for cream cheese.
Depends on station management and task management being complete first.
Auto-save pattern: 800ms debounce, inline "Saved" indicator. No submit buttons for data entry.
Vertical step list for the intake flow. Collapses to a dropdown on mobile.
Drag to reorder. Used for recipe steps, checklist items, station order, workflow phases.
Color-coded cards for the wall-mounted tablet floor view.
Non-intrusive feedback. Auto-dismiss for saves, persist for errors.
Used sparingly. Only for destructive actions.
