Admin Dashboard: a brief for Claude Design

Paste everything from "Start of brief" down. It is self-contained: it carries the real tokens, the real geometry and the real content, so nothing has to be guessed at.

Attach screens/dash-polish-1440-viewport.png and screens/dash-polish-1440-full.png when you send it.

---

Start of brief

I need a visual design for an admin dashboard. The information architecture is settled and correct; what I need is the visual craft on top of it. Please do not redesign the structure.

What the product is

Lantern is an anonymous, real-time app for meeting people at physical venues. Someone "lights a lantern" at a bar or cafe to signal they are there and open to meeting. This dashboard is the internal admin portal, used by the founder and a small team, not by end users.

What this screen is for

It answers three questions, in this order:

1. What are we? A standing orientation block: what the product is, and which launch stage we are in.
2. What is being announced? Release notes read out of the repo's changelogs, plus a placeholder for announcements someone writes by hand (not built yet).
3. What is happening right now? Live counts, in a narrow rail down the right.

The layout, which is FIXED

• A two-column split inside the page body: a reading column and a status rail.
• Real measurements at a 1440px window: page body 1130px wide with 48px padding, split 1034px, reading column 698px, gap 32px, rail 304px. The rail is sticky and currently 544px tall against a reading column of about 3900px.
• The rail is a NARROW TRACK on purpose. Do not turn it into a second content column.
• Below a 1270px window the rail moves under the reading column and spreads into a horizontal strip.

The design system, which is also FIXED

Everything below is a real token. Please do not introduce a colour, a radius or a spacing value that is not in these lists. If something genuinely needs a value that is not here, call it out as a question rather than inventing one.

The page sits on pure black, #000000. The left nav sidebar is #18181b.

Surfaces, and the rules attached to them matter as much as the values:

Token	Value	What it means
--surface	#18181b	Every card background. Same as the sidebar. This is a hard rule
--surface-dark	#131316	Title bands, and any strip that breaks a card up
--surface-2	#222222	Hovers, small raised indicators
--surface-elevated --surface-0 --surface-1 --surface-3	#1e1e1e #111111 #1a1a1a #2a2a2a	Exist, but are NOT card colours. Please avoid

Text:

Token	Value
--text	#e6eef8
--text-secondary	#8a94a0
--text-tertiary	#96a3b0
--muted	#9aa6b2

Borders: --border rgba(255,255,255,0.08), --border-soft rgba(255,255,255,0.05), --border-focus rgba(245,158,11,0.5), --muted-dark rgba(255,255,255,0.2) (used for dashed edges).

Brand:

Token	Value	Rule
--accent-500	#f59e0b	Amber. The primary brand colour. On this page amber means a LINK. Do not use it for headings, because it makes the links stop reading as links. Use it for wayfinding (the current launch stage) and for links
--accent-400	#fb923c
--accent-600	#d97706
--secondary-accent-blue-400	#00A6FB	Secondary, admin only
--secondary-accent-blue-500	#0582CA
--success-text	#00bc7d
--danger-text	#ff637e
--warning	#f59e0b
--info	#06b6d4

There is no purple or indigo in this system. If you reach for #6366f1 or similar, that is out of bounds.

Spacing: 4px 8px 16px 24px 32px 40px 64px. Radii: 4px 8px 12px 16px 20px.

Type: Inter, and only Inter. Self-hosted variable font, weights 400 through 700 in use. No serif anywhere, for any reason, including an "editorial" moment. Express emphasis through weight (700 to 900), tighter tracking (about -0.01 to -0.025em), scale, leading, or warm amber. Never through a second typeface.

Icons: Lucide only. No emoji in chrome (nav, headers, tabs, buttons).

Accessibility, which is not negotiable

• WCAG AA: 4.5:1 for normal text, 3:1 for large (24px, or 18.66px bold) and non-text. The page currently passes with zero axe violations and zero unmeasured nodes, and it has to stay there.
• Two traps that have already cost real failures here, so please avoid both:
  • Do not dim text with opacity. It composites the text toward the surface behind it, so a passing token silently fails. --muted at full strength is 7.15:1 on --surface; at opacity: 0.55 it is 3.06:1 and fails. If something should be quieter, use a quieter TOKEN.
  • Do not put gradients, scrims or overlays on top of text. An automated contrast checker cannot compute a ratio through them, so it reports the node "incomplete" and the check passes without ever measuring. A gradient fade and two pseudo-element decorations here caused 14 unmeasured nodes.

What is on the page, with the real content

Panel 1, "What we are". A title band, then:

• One paragraph: "Lantern is an anonymous, real time way to meet people at real places. Someone lights a lantern at a venue to say they are there and open to meeting, and that signal plus a few shared interests is all anyone else sees."
• A launch stage timeline: four stages on a connecting track, with the current one marked. It must SCROLL horizontally, because stages get added over time.

Stage	Target	Its goal
Prototype (current)	Now, continuous	Test if an idea works, behaves, or feels right
Alpha	December 2026	Build and test the foundational, working core
Beta	Summer 2027	Find edge-case bugs, balance performance, refine usability
1.0	Unscheduled	Deliver the final, polished product

• A Documents group: four external links, each with a one-line note. About Lantern ("What the product is, in full"), Launch plan ("The four stages and the work inside each"), Business docs ("Market, economics and governance"), Docs home ("Everything else the repo documents").

Panel 2, "Announcements". Currently a placeholder that says plainly it is not built yet, with an inert sample of what one announcement would look like, and a line reading "Scaffolded 2026-08-28, wiring tracked in #992". It must never look like a working feature.

Panel 3, "Releases". Newest day first, six days. Each day has a date heading, a version, and a list of entries. Each entry has a kind chip (Added / Fixed / Changed / Removed / Security, each with its own colour), a bold title, a paragraph of body text, and a pull-request number that links out. There is an "All changelogs" action in the title band.

The rail, "Right now". A refresh button in its title band, then seven rows, each a label above a large tabular number, each linking to the screen that owns it. Lanterns lit now 0, Waves pending 0, Venues 22,636, Users 35, New signups 24h 0, Merchant applications 0, Offers to review "Not available". A footer strip reads "Read at 9:45 AM". A real zero is data and stays a number; a service that did not answer says "Not available" and must never render as 0.

What I actually want from you

The page is structurally right and visually flat. It reads as grey boxes on black. I want it to feel considered and finished, like a product someone designed rather than assembled, while staying inside every constraint above.

Specifically, I would like your eye on:

1. Hierarchy and rhythm. Three stacked panels of very different heights, and a rail that is one seventh the height of the column beside it. The proportions feel wrong and I do not have a fix.
2. The launch timeline. It is the most distinctive thing on the page and currently the least designed. It has been a recessed dark well, a lighter raised strip, and a bordered box, and none of them looked right.
3. The empty right-hand side. Below the sticky rail there is a lot of black. That may be fine, or it may want something.
4. One open question I would like you to answer: should the four Documents links stay as a list, become four small cards, or be removed entirely so Announcements gets more prominence? They are all reachable from the sidebar anyway.

Please give me: the visual design, the reasoning behind the key choices, and the specific token values you used from the lists above. If a choice needs a value that is not in the system, say so explicitly and explain why, rather than slipping it in.

End of brief