An LED readout bolted to a steel box. One number rules the screen and a binary state says whether it's moving. Shipped in Time Warrior — web and the SwiftUI menu-bar app share this token set.

for agents

Paste this into the session that's building the UI. Do not retype token values from memory — link or vendor the stylesheet.

Build this UI in the Lucian Labs "Punch Clock" look.
Read, in order:
  https://lucianlabs.ca/branding/AGENT.md   (how to pick + what never to do)
  https://lucianlabs.ca/branding/punch-clock.md   (this look)
  https://lucianlabs.ca/branding/UX.md      (how it must behave)
Take tokens from https://lucianlabs.ca/branding/brands.json — never
retype them. On web you may link punch-clock.css directly; on any other
platform derive from the tokens and the UX contract.
Implement all seven interaction states, focus included, and use only
the five named durations. Check your output against the AGENT.md ban
list and the UX.md ship checklist before you report the work done.

the shape of a screen

act, read, then detail. Never lead with nav or explanation.

punch in

console or punch clock?

Both are dark, square-cornered, and set numerals in Micro 5. The line matters.

	console	punch clock
borders	1px hairline	2px, always
panels	translucent + blur	flat and opaque
ground	radial wash	flat #0e0e10
body face	system sans	Finlandica
signals	blue, amber when armed	green/red stoplight, cyan focus
buttons	outlined, tinted	solid fill, near-black label
a view is	many panels, none dominant	one huge figure

You are operating something in Console. You are watching a number here.

palette

the three rules

• 2px, never 1px. Every border, divider, table rule and input outline. This one value is most of the look's identity — drop to a hairline and it becomes Console.
• One figure rules the screen. 84px Micro 5, green, centred, small tracked label above. Everything else is ≤30px. Two heroes means no hero.
• Colour is state, never decoration. If you cannot say what green means on an element, that element is ink or dim.

buttons

states in motion

tap through them. the fill flips to the new state, the label arrives with it, selection travels, a confirmation returns home.

numerals are micro 5, always

client	in	out	hours	usd
nduro	09:00	12:15	3.25	$260
lucianlabs	13:00	14:30	1.50	$120
total			4.75	$380

Body sans numerals read as a database. Micro 5 reads as a readout. Prose and labels stay Finlandica and never take the display face.

motion

• Press. scale(0.96) plus an opacity dip, springing back. The big button above does this — the one house look where a transform on :active is correct.
• Live pixel. An 8px square breathing 0.35→1 over 0.9s, marking anything on the clock. Square, never round.
• Odometer. Live numerals roll rather than cut.
• Attention orb. 13px circle, 1.7s expanding ping — top right of this page. The single deliberate circle in a look that forces zero radius everywhere. At most one, only to summon the user.

transition

A look change moves the way the look you are going into moves. This is how a swap into Punch Clock arrives.

kind	duration	curve
glitch	300ms · settle	steps(1, end) per cut

Punch Clock punches in: stepped cuts through random slices, out of order, then it lands — the orb's glitch turned into an arrival. The shortest transition in the kit, because a punch is instant. The cuts re-roll every time.

Frames: seven inset() frames — empty, two random bands, the top half, a band, nearly all, all — each holding then jumping. Reduced motion: no sweep — the 600ms colour tween, so the choice still lands.

Spec: skin-swap.md · source of truth LL_LOOKS['punch-clock'].transition in /v2/ll-brand.js.

voice

native parity

The SwiftUI port at time-warrior/apps/mac/…/Theme.swift mirrors these tokens — panel(), field(), BrandButtonStyle, PulseSquare, Tile. Change a token here, change it there. Known drift: --dim is #666 on web and #cfcfd6 in Theme.swift; the web value is canonical until that's reconciled.