Components — Lawagon POS

Everything the POS is built from, on one page. Same tokens as the marketing site, plus the pieces a till needs that a marketing page never did. Use this to check a new screen before building it.

Colour Type Buttons Badges Forms Surfaces Data Charts Overlays

Colour

Grounds and type, straight from the website

night

--night · #0B0A08

Page ground. Black with a warm cast so cream never goes blue.

night-soft

--night-soft · #12100C

Cards and the rail.

surface

--surface · #1A1711

Raised — buttons, hover states.

hairline

--hairline · #2C2720

Every divider. One pixel, never a shadow.

cream

--cream · #F4EDE1

Type. The logo's white, warmed.

muted

--muted · #9A9085

Secondary type.

amber

--amber · #E8A33D

The brand accent. Means press this.

gold

--gold · #F5C563

Hover and focus.

State

Deliberately outside the brand

--go · #7FA662

Paid, ready, passing, open.

wait

--wait · #6D92C4

Placed, waiting, impersonating.

stop

--stop · #CD5F52

Voided, failed, below reorder.

Why state has its own scale. Amber already means “press this” in this brand. In most POS software amber means “waiting, check this”. Both cannot be true on one screen, so order state uses three tones that appear nowhere else — and every one is paired with a word, never colour alone.

Daylight is the same tokens, redefined. The switch in every topbar swaps them at the :root, so nothing below has to know. Amber darkens to ember there, because amber on white fails contrast.

Type

Four faces, three of them shared with the website

.headline · Outfit 700 uppercase

Coffee under an open sky

.eyebrow · Outfit 400, 0.3em tracking

Order queue

body · Inter 400/500/600

Brick paths, folding chairs on cut grass, and four strings of bulbs that come on around six. Espresso from the hut at the end of the path.

.mono · IBM Plex Mono, tabular

₱6,480.00 · 038 · 18:44:12 · lw_live_••••3f9c

.script · Dancing Script — customer-facing only

“Take the long way home tonight.”

The script face never appears on a control. It is the shop's voice to a customer — receipts and the order page — not a label on a button a barista presses a hundred times a shift.

Buttons

44px minimum — outdoors, at night, wet hands

One primary per screen. If two things are amber, neither is the thing to press.

Badges and pills

Paid Placed Making Voided Draft

Plain, no dot Signature QR 4 6 Prototype only

The dot exists so state reads at a glance from a metre away. The plain variant is for labels that are not state — a tag, a channel, a count.

Forms

Text

Select

Option group

On the board Sold out

Due₱485.00

Change₱15.00

The keypad is on screen because the tablet's own keyboard covers half the till. Every key is 54px.

Surfaces

Takings₱6,480+18%

Orders3814 counter · 24 QR

Waiting4Longest 6 min

Variance₱0Counted blind

Notice — amber. Something worth reading.

Notice — go. Something that went right.

Notice — wait. Something in progress.

Notice — stop. A risk, a cost, or a thing that cannot be undone.

Not everything is a card. Border, fill and radius each say “separate object”. Spend them on the thing that needs lifting.

Data

No.	Spot	Channel	Total	State
038	The Shade	QR	₱230.00	Closed
037	The Lawn	Counter	₱300.00	Closed
034	The Rail	Counter	₱160.00	Voided

Opening float: ₱1,500.00
Cash sales: +₱1,650.00
Expected: ₱3,470.00

Money is right-aligned and tabular everywhere. Columns of figures that do not line up are harder to read than they look.

Order ticket

039 Making

The Lawn · counter · 6m

2×Mocha Latte · iced, oat 1×Cinnamon Toast

No sugar on the toast — allergy

Charts

Hand-drawn — no library anywhere in this app

Bars

Americano142

Mocha Latte115

Cinnamon Toast105

Below reorder86 / 100

Sparkline Split

Heatmap

Fri

Sat

10111212 34567

Grey is closed, not quiet. Saturday opens at two — four empty cells that would otherwise read as a dead morning.

Overlays

Open a modal Open a destructive one

Modals are driven by :target, not JavaScript. The back button closes them and every one is deep-linkable — staff.shift.html#m-close opens the close-shift dialog directly. That is a prototype convenience that happens to be good behaviour worth keeping.

A destructive modal states what is lost, in figures, before it offers the button. “Are you sure?” is not a warning.

Rules worth keeping

44px minimum on anything tappable.
One primary per screen.
Colour is never alone — always paired with a word.
Money is tabular and right-aligned.

Hairlines over shadows.
No script face on a control.
Motion is atmosphere on the website; on a till it is latency.
Say what a thing costs before the button that does it.