PULLOVR DESIGN SYSTEM · V0.1

A little structure.
A lot of character.

A calm, capable workspace for the people who feed the neighborhood. The visual language, components, and principles that keep every new feature feeling like PULLOVR.

Our point of view

Quiet precision. Human warmth. A little street-side personality.

Useful at a glance

Lead with what needs a decision. Keep the current stop, service state, and important actions within easy reach.

Confidence through clarity

Label sample data, estimates, and verified information. Show evidence behind recommendations and make the next action explicit.

One recognizable signature

The nine-dot mark carries the identity. Dots describe status, activity, and movement. Let the rest of the interface stay quiet.

Color, with a job to do

Forest anchors the workspace. Lime marks a purposeful highlight. Soft surfaces keep data readable.

Canvas#F7F8F5
--canvas
Ink#22352D
--ink
Forest#254C3C
--forest
Lime#DCF59B
--accent
Sage#EDF3E7
--sage
Peach#F8E5D7
--peach

Type that holds its own

Three roles. Consistent hierarchy. Operational copy stays readable.

SPACE GROTESK
Headlines · 500
Good food. Good momentum.
DM SANS
Body · 400–600
Your next service is at Fort Mason. Check your prep, update the schedule, and keep the day moving.
DM MONO
IDs & utility · 400
ORDER #1048 · 12:42 PM · $23.00

Actions & states

Component specimens below share the exact primitives used in the product. These buttons are visual examples.

Ready Preparing New orderSample data

Composition & rhythm

Space

Use a 4px base. Compact gaps use 8–12px; related groups use 16–24px; major sections use 32–48px.

Shape

8px controls, 12px panels, 16px dialogs. Use soft borders for separation and restrained shadows for elevation.

Motion

150–200ms for feedback. No ambient animation during service. Respect reduced motion and keep focus visible.

Writing like a good teammate

Say what happens

“Save stock.” “Pause orders.” “Extend lunch to 3:00 PM.” A button describes the result of pressing it.

Give the evidence

A forecast states the period, source, confidence, and limits. When history is missing, explain what data is needed.

Help people recover

Tell people what went wrong, preserve their work, and offer a clear next step. Never replace a failed action with a success toast.

Maps that tell the truth

Today’s route

Sample data
Loading map…
  • Live now
  • Stop (numbered in time order)
  • General area customers see

Plot only what the viewer may see. Approximate sharing is an area, never a pin; distances say “straight-line”.