Village Roaster Portal — Design Direction

Warm paper roster, copper accent, kraft tag signature

Live preview · use the panel bottom-right to swap the accent · v0.1 / 2026-05-17

Token palette

paper

#FAF8F5

page

cream

#FFFFFF

raised surface

linen

#F5F2ED

inset / inputs

linen-deep

#EFE9DE

selected

ink-primary

#2A2725

body text

ink-secondary

#5A5650

supporting

ink-tertiary

#8A8580

metadata

ink-muted

#B5AFA8

placeholder

copper

#C0785A

action

bay

#3D5C3F

settled / approved

amber

#C48820

advisory

clay

#B7522E

urgent

kraft

#C9A87C

signature tag

Location colors · per-company configurable

loc-main

#7B5DB8

Main Store · purple

loc-cultural

#4FA86E

Cultural Ctr · green

loc-hospital

#4A8FC9

Hospital · blue

loc-bakery

#E8A93C

spare · gold

Role tints · admin sets when creating roles

role-barista

#C0785A

Barista

role-baker

#C48820

Baker

role-roaster

#6B4423

Roaster

role-dish

#6B7B8F

Dishwasher

role-driver

#5C6F3D

Driver

Location + role colors are stored per-company. Admins set them once when configuring locations and roles — defaults match the Village Roaster world. Tints are a 35% wash over the kraft tag base, so the role color is felt without overwhelming the signature.

Typography

This week 14:32 hours · 3 open shifts

Body — Figtree 400/1.55. Reads like a printed roster taped above the espresso bar. Comfortable at 13–14px. Uses tabular numerals so columns of hours line up. Letter-spacing is the default; weights do the work of hierarchy.

Section label — 11px / 600 / +0.12em / uppercase

06:27 — clock_in — emp-a-01 — geo_attested=1

Kraft tags — the signature

OPENER CLOSER BARISTA DRIVER TRAINER BALANCER OPEN SHIFT

Used on shift cards, employee profiles, AI proposals, and the chat assistant. The signature element the rest of the system rests on.

Manager dashboard

Sunday, May 17

5 shifts active · 3 open clocks · 2 coverage requests · 1 OT risk

This week vs last CULTURAL CTR

Hours scheduled 186+8h vs last

Hours worked (so far) 42.3same month last year: 47h

Tip pool (period to date) $612Cultural Ctr

OT projected this week 1.2hMarco · review

Review queue 7 open

!

Jordan · geofence fail at Cultural Ctr — clock-in 06:32 recorded with GEO ?

06:33

⏱

Jamie · open clock past shift end — SMS sent

14:01

AI

Suggest · Marco at 38h — move Friday shift to Sam

09:15

✓

Maya · meal-break note recorded on clock-out

11:31

Today's roster · all locations 14 of 15 staffed

Main Store Cultural Center Hospital block color = location · type-weight does the hierarchy work

Opener · Barista

06:30 – 11:30

Maya R.

Cultural Ctr

Barista

06:30 – 11:30

Marco V.

Main Store

Barista · Balancer

08:00 – 13:00

Sam K.

Hospital

Baker

05:00 – 10:00

Jordan T.

Main · Bakery

Roaster · ⚠ OT risk

07:00 – 12:00

Tom B.

Main · Roastery

Closer needed

16:00 – 19:00

— open shift —

Cultural Ctr

Week view · Mon–Sun · all locations period 11–25

Mon 12

Tue 13

Wed 14

Thu 15

Fri 16

Sat 17

Sun 18

06–12

Maya · OPENER

Jordan · BAKER

Marco · BARISTA

Maya · OPENER

Tom · ROASTER

Sam · BARISTA

— open —

Marco · BARISTA

Maya · OPENER

Jordan · BAKER

Avery · BARISTA

Maya · OPENER

Tom · ROASTER

Marco · BARISTA

Maya · OPENER

Jordan · BAKER

Sam · BARISTA

closed

12–18

Jordan · BARISTA

Sam · BARISTA

Avery · CLOSER

Maya · BARISTA

Avery · CLOSER

Jordan · BARISTA

Tom · BARISTA

— open —

Marco · BARISTA

Sam · BARISTA

Avery · CLOSER

Maya · BARISTA

Jordan · BARISTA

closed

Employee — phone (dense, info-rich)

Phone real estate is precious. Hierarchy comes from size + weight, not whitespace. Persistent clocked-in bar at top when active (per A4 directive). Bottom tab bar always reachable. Chat is a swipe-up drawer accessible from any screen. Scroll horizontally to see all screens.

6:27

Morning, Maya.

Sun · May 17 · 22 hrs this period

MR

UP NEXT · in 3 min

Barista · 06:30 – 11:30

Cultural Center5 hrMaya + 2

OPENER BALANCER

14:32

This week

4

Shifts left

$112

Tip pool est

Today · later

Marco · BARISTA

06:30 – 11:30 · Cultural

covers you 11→

Avery · CLOSER

14:00 – 19:00 · Cultural

Inbox · 3 for youSee all →

!

Sam asks you to cover his Fri 14:00 shift. Reply by Wed.

2 d

⏱

Break check needed — did you take a meal break yesterday? Tap to answer.

14h

⌂

Home

▤

Schedule

◷

Avail

○

Profile

Home · pre-shift

7:12

Clocked in · Cultural Ctr 42:18

On shift.

Barista · until 11:30 · break 11:00

MR

Shift notes · 2 today

Espresso grinder noise

Flag if you hear it — service tomorrow. Safe to use.

Reid · 6:00

Out of oat milk until 10am

Delivery arriving 10:00. Apologize + offer almond.

Reid · 5:42

Quick actions

My week

Mon · BARISTA

06:30 – 11:30 · 5h

done · 5.1h

Today · BARISTA

06:30 – 11:30 · on shift

live

Wed · BARISTA

14:00 – 19:00 · 5h · Main

in 2d

⌂

Home

▤

Schedule

◷

Avail

○

Profile

Home · clocked in

9:14

Clocked in · 2:44 02:44:00

My schedule

Week of May 17 · 22 hrs

MR

11.1

Done

5.0

On now

15.5

Left

This weekRequest change

Mon May 12 · BARISTA

06:30 – 11:30 · Cultural

✓ 5.1h

Tue May 13 · OPENER

06:30 – 11:30 · Cultural

✓ 5.0h

Today · OPENER

06:30 – 11:30 · Cultural

live

Wed May 14 · BARISTA

14:00 – 19:00 · Main

in 2d

Fri May 16 · CLOSER

14:00 – 19:00 · Cultural

in 4d

Sat May 17 · BARISTA

07:00 – 12:00 · Hospital

in 5d

⌂

Home

▤

Schedule

◷

Avail

○

Profile

My schedule

9:14

Availability

Period 26 – Jun 10 · due May 20 (3d)

MR

3 days left to submit

After May 20 the schedule is locked.

Tap day to cycle · ◐ preferred · ○ available · ✕ no

MON

26

TUE

27

WED

28

THU

29

FRI

30

SAT

31

SUN

01

MON

02

TUE

03

WED

04

THU

05

FRI

06

SAT

07

SUN

08

My hard rules+ Request

Never Sundays

Approved · church commitment

✓

⌂

Home

▤

Schedule

◷

Avail

○

Profile

Availability

9:14

Assistant

Always-on · taps via mic or text

∎

starting next month I can't work Wednesdays

Got it. Setting a new availability rule:

AI · AVAIL UPDATE

Mark Wednesdays unavailable

Effective from Jun 1, 2026

Ongoing — no end date set

also let reid know thanks for covering my saturday

Sent. He'll see it in his Signal channel.

🎙

Chat · voice + text

5:08

Need coverage

Tomorrow · 06:30 – 11:30 · Cultural

MR

You called out. Find someone eligible — call or text them directly. We'll log who you tried. Ping manager when you've exhausted the list.

Eligible · 6 candidates · ranked

SK

Sam K. PREFERRED ✓

18h this week · closer tag

JT

Jordan T.

22h · marginal · barista only

Tried so far

Avery L. · no answer

tried 4:55pm

Tom B. · declined (family)

tried 5:01pm

⌂

Home

▤

Schedule

◷

Avail

○

Profile

Coverage workflow

What's deliberate on phone:

Size + weight, not whitespace. Hero number is 32px+ display weight; section labels are 11px small-caps. Almost no idle padding between elements.
Always-on clocked-in bar when employee is clocked in — bay-green, pulsing dot, running duration in mono digits, clock-out is one tap from anywhere.
Location color via 3px left stripe on every shift row — the calendar's primary scanning axis. Subtle background wash extends the stripe so it reads at a glance even when stripe is partially hidden.
Role color is a soft wash on the kraft tag — preserves the signature while letting you scan a row of tags by job type.
One bottom tab bar · 4 tabs only · the most-used pages. Chat is a swipe-up drawer, not a tab — it's accessible from any screen.
Quick-action grids instead of lists when there are 4-ish actions of equal weight (clocked-in screen).
Voice option visible wherever there's text input — availability has a "Say it out loud" button right under the save.
Coverage workflow puts the work on the employee (per owner A8 directive) — they see the eligible list, call/SMS in-app, attempts auto-log, escalation only when they've tried.

AI proposal — in the chat drawer

AI · OT RISK just now

Marco is scheduled 38h this week. Adding his Friday 5h shift pushes him to 43h (overtime threshold 40h/week in CO). I suggest moving Friday 14:00–19:00 to Sam — eligible and currently at 18h.

- shifts.id=shft-a-0517-12 · employee = Marco V.

+ shifts.id=shft-a-0517-12 · employee = Sam K.

What's deliberate here

Sidebar matches the page — no blue-vs-white split. Active item gets a thin copper rule on the left + a slightly-deeper linen background. The product feels like one continuous document, not two zones.
Stat cards are receipt lines — small-caps label, large tabular number, thin dashed under-rule. Reads like the back-of-house printout you'd hang on the wall.
Kraft tags are everywhere a label is — roles, AI proposals, location pins, AI category labels. One signature, many places.
Color = meaning — copper is action, bay is settled, amber is advisory, clay is urgent. Nothing decorative. A glance tells you what category of thing you're looking at.
Flat surfaces, no shadows — depth from minute lightness shifts. Quieter than Metronic, warmer than most SaaS. You feel layers without seeing them.
Open shifts look like empty kraft slots — dashed border on linen background. You can scan a calendar in 2 seconds for what's unstaffed.
Location color = left stripe + soft wash. 3 locations, 3 hues that fit the warm world. Scan a calendar at a glance for "all Hospital shifts" or "all Main Store shifts." Admin sets per-company.
Role color = tinted kraft tag. A subtle hue wash on the kraft brown — Barista copper, Baker amber, Roaster dark-roast, Dishwasher slate, Driver sage. Signature stays kraft; role meaning rides on top.
Runtime palette swap — try the panel bottom-right. Accent + all 3 location colors are CSS custom properties; admin writes them per-company in `companies.theme_json`. Everything structural (kraft, ink, paper) stays.

Theme · live

Accent

Main Store

Cultural

Hospital

Stored per-company in companies.theme_json. Reload to reset.