Color palette
Use P.* constants from palette.tsx — never hardcode hex values in components.
bg
#F5F1E8
Page background
surface
#EBE6DA
Elevated surfaces
surfaceAlt
#E0DAC8
Pressed / active
card
#FAF8F2
Cards, inputs
border
#C5BEA8
Default border
borderLight
#D8D2C0
Dividers
text
#2D2820
Primary text
textMuted
#6B6455
Secondary text
textSubtle
#9A9180
Placeholder
accent
#5B8A6F
Sea glass — CTAs
accentDark
#3D6652
Hover accent
accentLight
#C4DDD4
Focus ring
accentBg
#EEF5F1
Accent tint bg
errorBg
#FDF2EE
Error surface
warningBg
#FBF5E6
Warning surface
successBg
#EEF5F1
Success surface
Typography
DM Sans — use opsz 9..40 for variable optical sizing. Three weights in use: 300, 400, 500.
32px / 500 / ls -0.03em — page titles
Morning prep list
24px / 500 / ls -0.02em — section headings
Inventory overview
20px / 500 — route headings
Scan barcode
16px / 500 — card titles, item names
Hellmann's Real Mayonnaise
14px / 400 — body text
The morning prep list is generated automatically after the inventory count is submitted. Each item shows the recommended batch count based on today's ML prediction, adjusted for your current stock levels and the estimated yield per batch.
13px / 400 — secondary text
Last counted 4 hours ago · 3 items pending sync
11px / 500 / uppercase / ls 0.07em — eyebrow labels
Inventory receiving
11px / 400 / monospace — barcodes, IDs, codes
0048001012152
"Know your line."
Logo
Icon-only for small contexts. Lockup for headers, marketing, and first-load screens.
Lockup — 56px, 40px, 28px
Icon only — 48px, 32px, 24px, 16px
Icon on dark surface
Buttons
All buttons use border-radius: 10px. Heights: 46px default, 38px compact, 34px small.
Primary — default, hover, disabled
Secondary — outlined
Ghost — no border
Compact — 38px height
Loading state
Form inputs
All inputs: 42px height, border-radius 10px, 1.5px border. Focus ring uses accentLight.
Cost per canonical unit (e.g. per oz, per lb)
Name must be at least 3 characters
Selects & dropdowns
Native select styled to match. Use for unit type, supplier, category, and role pickers.
Checkboxes & radios
Custom-styled, keyboard accessible. Accent color on checked state.
Checkboxes
Radios — unit type
Chip radios — scanning mode
Badges & chips
Status, category, and count indicators. Never use color alone — pair with a label.
Status badges
Count badges
Cards
border-radius: 16px on main cards. 10px on compact cards. Always use P.card as background.
Metric cards — summary numbers
Food waste this week
$84
↓ 12% vs last week
Items 86'd this season
3
lobster roll ×2, chowder ×1
Prep list accuracy
±11%
MAPE last 14 days
Morning count time
6 min
was 23 min before Saltline
Product scan card — found state
Inventory count row — morning count form
Alerts & notices
Inline feedback — not modals. Use for sync status, errors, validation, and system messages.
All synced
3 inventory counts uploaded successfully.
4 items pending sync
Counts saved locally. Will upload when connection is restored.
Toast connection lost
Could not reach the Toast API. Check your API key in settings.
Baseline model active
Your restaurant-specific model will be ready after 14 days of order data.
Loading & empty states
Skeleton loader
Empty state
No ingredients yet
Add your first canonical ingredient to start building the inventory hierarchy.
Saltline-specific components
Patterns that appear repeatedly across the app.
Scanning reticle — used in barcode scan and kiosk
Kiosk request buttons — large touch targets, tablet use
Sync status bar — appears at top of count form when offline