How Agency Operator is designed

Vercel-style button: primary is black with white text, quiet is white with a hairline border. radius-md, 14px medium, 36px tall.

• One primary per view. It is the one thing you want clicked.
• dark is the same as primary; kept as a name. Inside a dark Callout the primary inverts to white.
• text is bare muted text, 12px, no border or fill; ink and underlined on hover. For a secondary action next to a quiet button, like Cancel beside Save. Never for a view's main action.
• icon is a 24px square with one 14px stroke icon (1.75 stroke, round caps), muted, no border or fill; on hover the square fills pill-grey and the icon goes ink. For small actions repeated on every item in a list, like edit and delete on each comment, sitting at the right end of the item's first line. Always give it aria-label and title. Never for a view's main action.
• Labels are short verbs in plain words. No arrows or icons beside a label; an icon stands alone only in the icon variant.
• The consumer provides href (renders a link) or onClick.
• Focus is a 2px outline, never removed.

The one dark surface a page may have. It asks for the one action, near the end.

• One per page. size="lg" for the closing band.
• Title says what they get, body says who it is for, button says what to do.
• The button inverts to white on the dark ground.

A bordered white card with one number and a short caption.

• Sits in a grid of cards 160px and up, gap space-3.
• The number is metric-value (28px, 600) in ink. accent is accepted and does nothing; nothing here is coloured.
• The caption says what the number means in plain words, not a unit.
• Numbers must be true. Never promise more than the product does.

The card that holds most content: white, a 1px border, radius-card, 20px padding.

• Title in card-title (14px, 600), body in body muted, key words in <strong> at 500.
• Lists use 4px ink dot bullets, never icons or emoji.
• No fill, no shadow. The hairline is the separation.
• dark is for the one panel on a page that must stand out, if the Callout is not already doing that job.

Numbered steps as cards on a vertical grey rail.

• Discs are accent; mark a step alt for a dark disc when it is a different kind of step (something you do, not the plugin).
• Titles are short actions. Body is one or two plain sentences.
• On the site each card is fixed height and fades out: show a portion, not everything.

A top-bar tab: 14px medium, muted, with a 2px ink underline when active.

• Sits in a flat nav with a hairline bottom edge. No fills, no dots, no radius.
• Labels are plain phrases: "How to use it", "What changed", never jargon.
• The consumer marks the current page with active.

Which week am I looking at, and what's around it. The selected week sits large in the middle; its neighbours line up on either side, each step further out smaller and fainter (14px at 75%, 12px at 45%, 11px at 25%), and the far ends dissolve under a mask. Every visible week is a link, so the strip is also how you move.

• Product only. It heads any page that shows one week at a time.
• No card. It is the page's heading, so it sits straight on the canvas, the one boxless thing allowed there besides headings. The mask fades to transparent, so it dissolves into whatever ground it's on.
• The date is 28px, the metric-value size (22px under 760px): the week is what the page is about.
• Future weeks leave empty slots. Don't pad with weeks that can't be opened, and don't collapse the gap: the selected week always stays centred.
• Nothing sits beside it in the bar. A button on one side pushes the strip off centre. "Back to this week" goes in the meta line under the date, as a plain underlined link.
• The meta line is two centred rows under the date. First, seven day ticks, Monday to Sunday: days gone in ink, today in ink and a little taller, days to come in field-border grey (3:1, so each can be counted). A past week is all ink. Second, the *This week* tag, or on a past week the "Back to this week" link. No *Past week* tag, and no counts; the board below says who logged.
• Each tick names itself on hover ("Thu 24 · Today"), in a small white tooltip with a hairline, below the ticks so it never covers the date. The mask clips anything outside the strip's box, so the strip carries 28px of bottom padding, given back with an equal negative margin, to leave the tooltips room. The row as a whole is labelled for screen readers ("Day 4 of 7, 3 days left"). "Today" is the UTC day, the clock the week turns over on.
• It steps down with the width: three a side on desktop, two under 1100px, one under 760px, and under 480px only the selected week, with no fade.
• Weight 600 for the date, 500 for the neighbours. Colour never changes; distance is carried by size and opacity alone.

Small status pill for the roadmap and changelog.

• now = black, next = white with an ink border, planned and internal = grey, shipped = green on its tint.
• Only one now at a time. It is the release being built.
• Text defaults to the status name; keep it to one word.

The "Runs inside Claude" platform badge in Claude's own tint.

• Used once, under the wordmark. It tells people this is a Claude plugin, not another app.
• The consumer provides the Claude mark as iconSrc; it belongs to Anthropic and is not stored in this system. Without it a Claude-coloured dot stands in.
• Claude colours stay inside this badge and the Claude strip. Never reuse them elsewhere.

A labelled text input. The product's workhorse: sign-in, the weekly log, the claim page.

• Label in label, always present and always above. No placeholder-as-label.
• The border is field-border, not border or rule. Those are hairlines at about 1.2:1 and disappear as a control edge.
• Focus draws a 2px focus-ring. Never remove it. It is the only thing a keyboard user has.
• hint sits under the field in caption muted. With invalid, the hint turns danger and the border with it, and it gets aria-describedby and aria-invalid so it is announced, not just coloured.
• A placeholder is an example of the answer, never a repeat of the label.
• Numeric fields in a table row are the exception: they lose the label and take bare, because the column header is the label.

A labelled multi-line input, for the parts of a weekly log that are sentences rather than numbers.

• Same label, border, focus and hint rules as Field. It is Field with height.
• Three rows by default. It grows, it does not scroll, until it has to.
• The placeholder asks the actual question: "What's the one thing holding the week back?" beats "Enter text".
• Never put a character counter on something a member writes for themselves.

Rows of numbers people compare. The weekly board and the funnel history.

• Headers in overline: uppercase, muted, 12px. A header may carry a target under it, which is the quieter second line.
• Rows are separated by rule, nothing else. No zebra striping, no cell borders, no outer border. The table sits on a soft card like everything else.
• An empty cell is an em dash, not a zero. A week nobody filled in has to read as blank. Zero is a claim that they did nothing, and it is usually wrong.
• highlight marks the viewer's own row: a tint and a heavier first cell. One row at most.
• The first column is the row's name and stays put when the table scrolls sideways.
• Numbers are right-aligned so digits line up. Text is left-aligned.
• On narrow screens it scrolls horizontally. It does not reflow into cards, which would destroy the comparison the table exists for.

One line telling someone what just went wrong, or what is about to.

• danger for something that failed or was refused. warning for something that will bite if ignored. info for the neutral aside. info is white with a hairline, like a card, so it reads on the canvas.
• It carries role="alert" when it appears after an action, so a screen reader says it without being asked.
• Say what happened and what to do about it. "That email isn't on the board. Use the one you joined Mastery with" beats "Authentication error".
• Never a bare server message. Signups not allowed for otp means nothing to a member and reads like their fault.
• One at a time. Two stacked alerts mean the first one was not clear enough.

The section at the bottom of any page that computes something a member sees. It says, in plain words, how the number was worked out.

• Collapsed by default, a native details, so it costs nothing until opened. Never hidden behind a role or a setting.
• Summary reads "How this is worked out". Body is numbered rules in body, with the member's own numbers substituted in: "2 ÷ 29 = 7%", not "conversations divided by reach".
• It is generated from the same constants the logic uses. If a target or a band lives in code, the explanation reads it from there. A hand-written explanation drifts from the rule the day the rule changes.
• Says what is fixed. If a sentence is one of four canned sentences, the section says so. Nothing a member sees is a black box.
• One per page, last thing before the footer. It is not a help panel; it is the working.

The explanation behind something on the page, opened from the thing itself. On the board, a Why? link under every column opens one: why that number is there, its target and source, the other numbers to jump to, and the questions to ask before logging.

• Product only. It replaced a whole page ("Why these numbers"): the reasoning lives beside the number now, not two tabs away.
• It explains, it never asks. No forms, no decisions, no primary button inside. If the page needs an answer from the member, that is a page, not a panel.
• From the right, 440px (the full width on a phone), page white with a hairline on its open edge, no shadow, over a 40% ink scrim so the page stays visible behind it.
• Three ways out, all equal: the scrim, Escape, and the icon Button in the head. Focus lands on that button when it opens and goes back to the opener when it closes; page scroll is locked while it is open.
• Head then body. A muted kicker (what kind of thing this is), an 18px title, a hairline, then the content. Sections inside are a 12px muted title over the content, 28px apart.
• The opener is a real link, and it says what it is. Under each column: a small underlined "Why?" in muted, ink on hover, 11px. Not the title, and never a tooltip: a tooltip on the title covered the very text it explained, and a dotted underline read as decoration. Everything in that header is left-aligned so title, target, blurb and link read as one block.