Punch Clock — Lucian Labs Branding

⏱ PUNCH CLOCK · LOOK C

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 https://lucianlabs.ca/branding/AGENT.md and
https://lucianlabs.ca/branding/punch-clock.md before writing any CSS.
Link https://lucianlabs.ca/branding/punch-clock.css and use its tokens
and components. Every colour must be a var(--token) from that file.
Follow the ban list in AGENT.md — check your output against it before
you report the work done.

the shape of a screen

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

total earned · 3.25 h

$260.00

running · nduro · $80/hr

gross earned

$260

− expenses

$34

tax set-aside

$68

yours to keep

$158

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

--bg

#0e0e10

--panel

#1a1a1e

--panel-2

#232329

--line

#33333a

--ink

#ededf0

--dim

#666666

--green

money / running

--red

stop / delete

--cyan

focus

--orange

owed / warning

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

neutral until hover

solid = commits

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.

voice

write

punch in
export csv
total earned
yours to keep
$1,240.00 · 3.25 h · 30%

never

Start Tracking Now
Export Your Data
Total Earnings 💰
You're doing great!
Let's get started!

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.