The visual system from the approved homepage design, written down so every page uses the same one. This guide covers the look only. Each page keeps its own content, its own copy, and its own job.
The rules Brian set: gold never darkens in light mode, one gold in both themes, and text on gold is always the dark #241800. Boxes are never flat black on black: cards use the product's #1C1C1E over the #000 page so they read at a glance.
Subs are the muted secondary color, 16 to 17px, line-height 1.6, max width around 480px. One sub per screen.
Money is always tabular numerals, 900 weight, gold when it is the point of the screen, plain text when it is a detail. SF only, no second typeface.
One glowing primary per screen. The gold pill carries the glow (30px gold shadow) and flips to white on hover with a 1px lift. Secondary is the outlined gold rectangle-radius button. Everything else stays quiet. Minimum touch height 48px.
Status notices sit on the card surface with a 3px gold left edge. Never a gold-tinted wash across the page: tinted full-width stripes read as mud on black.
18px radius, hairline border, deep soft shadow. Cards sit on black and hold one job each.
Fields live inside the card surface with a 1.5px hairline that turns gold on focus. Text is 16px minimum so phones never zoom. Paste always works. Numeric fields raise the number pad.
Use the width. Desktop is not a phone column floating in black: containers run 1100 to 1240px, stat rows span the page, and working screens split into two real columns. Mobile re-composes to a single stack; desktop never just centers it.
The formatting reference is the live product. When a live page and a mockup disagree on structure, the live page wins: full-width section cards, editable rows with their controls inline, day chips as single letters, a header where the avatar rides the title line. Mock the skin onto that structure, don't reinvent the structure.
One entrance per screen, then stillness. Elements may drop in once (12px rise, 450ms, staggered) the way the homepage cards do. No looping animation, no hover theatrics beyond the button flip. Reduced-motion gets the finished state instantly.