tellatribe

Enter the access code to read the project documents.

tellatribe Docs Status: All modules built and live · Oct 19: Creator Campaigns Part B shipped (briefs, applications, deals, verification → bounties, brand balance + Stripe funding, disputes, reports) on top of the tax-identity gate and annual statements · awaiting owner inputs: tellatribe Stripe account (payments + Connect + funding webhook), HealthyApp webhook secret, Ayrshare key

Design · DESIGN.md

name: tellatribe Portal description: A dark catalog wall where every tile tells you what it pays and how long it takes, then hands you Copy, Post, or Record. colors: ground: "#0F1114" surface: "#171A1F" surface-2: "#1F242B" surface-3: "#272D36" line: "#2A3039" fg: "#ECECEA" fg-2: "#A6ABB3" fg-3: "#7F858F" accent: "#4D7CFF" accent-fill: "#3761E0" warn: "#FF6B57" ink: "#111111" paper: "#F6F1E7" paper-rule: "#D9D2C3" camera-red: "#FF3B30" mark-healthyapp: "#5F3FAB" mark-booked: "#C2007B" mark-whohire: "#3A4452" tint-healthyapp-a: "#3B2A6E" tint-healthyapp-b: "#4A2F8A" tint-booked-a: "#5A0D3E" tint-booked-b: "#6B0F49" tint-booked-c: "#82145B" tint-locked: "#2C3440" typography: display: fontFamily: "Big Shoulders Display, Archivo Narrow, Arial Narrow, Impact, sans-serif" fontSize: "44px" fontWeight: 700 lineHeight: 0.95 letterSpacing: "0.005em" poster: fontFamily: "Big Shoulders Display, Archivo Narrow, Arial Narrow, Impact, sans-serif" fontSize: "27px" fontWeight: 800 lineHeight: 0.9 letterSpacing: "0.01em" headline: fontFamily: "Big Shoulders Display, Archivo Narrow, Arial Narrow, Impact, sans-serif" fontSize: "22px" fontWeight: 700 lineHeight: 1 letterSpacing: "0.03em" wordmark: fontFamily: "Big Shoulders Display, Archivo Narrow, Arial Narrow, Impact, sans-serif" fontSize: "24px" fontWeight: 700 lineHeight: 1 letterSpacing: "0.03em" title: fontFamily: "Schibsted Grotesk, Helvetica Neue, Arial, sans-serif" fontSize: "14px" fontWeight: 600 lineHeight: 1.2 body: fontFamily: "Schibsted Grotesk, Helvetica Neue, Arial, sans-serif" fontSize: "15px" fontWeight: 400 lineHeight: 1.4 secondary: fontFamily: "Schibsted Grotesk, Helvetica Neue, Arial, sans-serif" fontSize: "14px" fontWeight: 400 lineHeight: 1.4 prompter: fontFamily: "Schibsted Grotesk, Helvetica Neue, Arial, sans-serif" fontSize: "28px" fontWeight: 600 lineHeight: 1.35 label: fontFamily: "Schibsted Grotesk, Helvetica Neue, Arial, sans-serif" fontSize: "11px" fontWeight: 600 letterSpacing: "0.1em" state: fontFamily: "Schibsted Grotesk, Helvetica Neue, Arial, sans-serif" fontSize: "11px" fontWeight: 700 letterSpacing: "0.08em" mono: fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" fontSize: "12px" fontWeight: 400 rounded: mark: "5px" chip: "8px" control: "9px" input: "10px" tile: "12px" card: "16px" sheet: "20px" pill: "999px" spacing: xs: "4px" sm: "8px" md: "12px" gutter: "16px" row: "22px" desktop-pad: "28px" desktop-gutter: "32px" column-gap: "36px" components: button-primary: backgroundColor: "{colors.accent-fill}" textColor: "#FFFFFF" rounded: "{rounded.tile}" height: "48px" padding: "0 18px" button-ghost: backgroundColor: "{colors.surface-2}" textColor: "{colors.fg}" rounded: "{rounded.tile}" height: "48px" padding: "0 18px" button-ghost-hover: backgroundColor: "{colors.surface-3}" button-quiet: backgroundColor: "transparent" textColor: "{colors.fg-2}" typography: "{typography.secondary}" button-use-this: backgroundColor: "{colors.fg}" textColor: "{colors.ink}" rounded: "{rounded.control}" height: "36px" icon-button: backgroundColor: "{colors.surface-2}" textColor: "{colors.fg}" rounded: "{rounded.input}" size: "40px" code-chip: backgroundColor: "{colors.surface-2}" textColor: "{colors.fg-2}" rounded: "{rounded.pill}" height: "30px" padding: "0 10px" billboard: backgroundColor: "{colors.surface}" textColor: "{colors.fg}" rounded: "{rounded.card}" padding: "20px 18px 18px" tile: backgroundColor: "{colors.tint-healthyapp-a}" textColor: "#FFFFFF" rounded: "{rounded.tile}" width: "136px" tile-focus: width: "216px" tile-page: backgroundColor: "{colors.paper}" rounded: "{rounded.tile}" foot-chip: backgroundColor: "rgba(0,0,0,.45)" textColor: "#FFFFFF" rounded: "6px" height: "20px" padding: "0 7px" new-chip: backgroundColor: "rgba(255,255,255,.16)" textColor: "#FFFFFF" rounded: "{rounded.pill}" height: "18px" padding: "0 6px" product-mark: textColor: "#FFFFFF" rounded: "{rounded.mark}" size: "20px" item-row: backgroundColor: "{colors.surface}" textColor: "{colors.fg}" rounded: "{rounded.tile}" height: "60px" padding: "10px 12px" item-row-outline: backgroundColor: "transparent" rounded: "{rounded.tile}" ledger-row: backgroundColor: "{colors.surface}" textColor: "{colors.fg}" rounded: "{rounded.tile}" height: "56px" padding: "0 12px" pill: backgroundColor: "{colors.surface-2}" textColor: "{colors.fg-2}" rounded: "{rounded.pill}" height: "22px" padding: "0 8px" pill-ok: backgroundColor: "{colors.surface-3}" textColor: "{colors.fg}" chip: backgroundColor: "{colors.surface-3}" textColor: "{colors.fg-2}" rounded: "{rounded.chip}" height: "30px" padding: "0 10px" chip-on: backgroundColor: "{colors.fg}" textColor: "{colors.ink}" segmented: backgroundColor: "{colors.surface}" rounded: "11px" padding: "3px" segmented-on: backgroundColor: "{colors.surface-3}" textColor: "{colors.fg}" rounded: "{rounded.control}" height: "34px" empty-state: backgroundColor: "transparent" textColor: "{colors.fg-2}" rounded: "{rounded.tile}" padding: "16px" sheet: backgroundColor: "{colors.surface-2}" rounded: "20px 20px 0 0" height: "88%" caption-block: backgroundColor: "{colors.surface}" textColor: "{colors.fg}" rounded: "{rounded.tile}" padding: "14px" toast: backgroundColor: "{colors.fg}" textColor: "{colors.ink}" rounded: "{rounded.tile}" padding: "10px 14px" tab-active: textColor: "{colors.accent}" tab-count: backgroundColor: "{colors.surface-3}" textColor: "{colors.fg}" rounded: "{rounded.pill}" height: "17px"

Design System: tellatribe Portal

Overview

Creative North Star: "The Title-Card Wall"

The portal is a catalog wall in the manner of a streaming service, not a dashboard. The thing the affiliate came back for — standing — sits on a billboard at the top as a sentence, not a labeled figure: a tabular money figure in the one accent, followed by the date it pays. Below it, every product the affiliate may promote is a row, and every piece of collateral is a 4:5 title-card tile in a horizontal rail. Landing on a tile is the authored moment: it grows, its neighbors slide aside, the row lifts and the rest of the wall dims, and the tile tells you what it pays and how long it takes before handing you one control. This is the whole thesis: one glance to understand, one gesture to act.

The world is deep, flat and dark. Ground, three surfaces and a hairline carry all structure; there are no borders under shadows and no chrome colored for a product. One electric blue is spent on exactly three things — the focus ring (and its stand-ins: active tab, prompter reading band, slider), the filled primary action, and money — and a coral word marks held or reversed money. Everything else that is colored on the page is either a product mark or collateral artwork: the HealthyApp purple and booked magenta tint the posters and the 20px marks and go nowhere else. Type is a compressed caps display face for the wordmark, headings, poster art and big figures, over a high-x-height grotesk for everything that must be read.

Visual rejections confirmed by the build and its review: no stat-card grid (density is one tabular sentence), no kicker or eyebrow labels above headlines (the category lives in the tile's foot chip), no imitation sheen on tiles, no border-under-shadow, no color-coded status without its word.

Key Characteristics:

  • Deep neutral ground (#0F1114) with three tonal surfaces; depth by shadow and tone, never by border.
  • One accent (#4D7CFF) spent on focus, primary action and money only; a darker fill (#3761E0) under white button text.
  • Big Shoulders Display caps for the wordmark, headings, poster art and the billboard figure; Schibsted Grotesk for UI.
  • Tabular lining figures wherever money appears; proportional lining figures for counts.
  • Fixed 4:5 tiles at 12px radius; the focused tile scales 1.06 and widens from 136 to 216px.
  • Commission states are words in a grey-to-white ladder, coral for held and reversed, never a fill.
  • Phone first at 390; at 720 and above the same DOM becomes a left tab rail, a billboard column and long rails.

Colors

A near-black neutral family carries structure; a single electric blue carries meaning; product color exists only as marks and tints on collateral.

Primary

  • Electric Blue ({colors.accent} #4D7CFF): the focus ring on the focused tile and on :focus-visible, the billboard money figure, the active tab, the prompter reading band, the speed slider, and text selection. It is the only color that means "yours / act here".
  • Pressed Blue ({colors.accent-fill} #3761E0): the fill of every primary button (Get a link, New link, Copy caption). Darker than the accent so 15px white text clears contrast; hover brightens it 8%. Departure from contract: the contract named one accent for everything; the build splits fill from ring/money.

Secondary

  • Coral Warning ({colors.warn} #FF6B57): the word HELD or REVERSED in the ledger, a negative amount, and the pill.warn text. Always a word or figure, never a background.

Tertiary (product marks and collateral tints)

  • HealthyApp Purple ({colors.mark-healthyapp} #5F3FAB) and booked Magenta ({colors.mark-booked} #C2007B): 20px rounded marks before row headings, 28px marks in item rows, 22px in ledger rows, and the sheet header. They are the products' own colors and never touch tellatribe chrome.
  • WhoHire Slate ({colors.mark-whohire} #3A4452): placeholder mark for the not-yet-joined product. A neutral stand-in, not a brand color.
  • Poster tints: HealthyApp posters #3B2A6E and #4A2F8A; booked posters #5A0D3E, #6B0F49, #82145B; locked tiles #2C3440. Each tile sets --tint inline and the tile paints a top-light-to-dark ramp over it (white 7% at top fading by 40%; black 72% from the bottom to 55%).
  • Paper ({colors.paper} #F6F1E7) with Paper Rule ({colors.paper-rule} #D9D2C3): the one-pager tile and poster, a cream page with 2px rule lines standing in for a PDF thumbnail.
  • Camera Red ({colors.camera-red} #FF3B30): the record button disc and the live tally dot, prompter only. A camera-surface convention; not part of the contract palette.

Neutral

  • Ground ({colors.ground} #0F1114): page and tab-bar background; also the review screen.
  • Surface ({colors.surface} #171A1F): billboard, item rows, ledger rows, caption and script blocks, segmented-control track, facts, the active desktop tab.
  • Surface 2 ({colors.surface-2} #1F242B): the sheet, ghost buttons, icon buttons, code chip, pills, the default tile ground when no tint is set.
  • Surface 3 ({colors.surface-3} #272D36): chips, the selected segment, pill.ok, tab-count badges, the scrollbar thumb, ghost-button hover.
  • Hairline ({colors.line} #2A3039): the only border in the system — tab-bar top, detail/why panel top, desktop header bottom and rail right, the inset ring on item.outline, and dashed on join cards and empty states.
  • Text ({colors.fg} #ECECEA), Secondary Text ({colors.fg-2} #A6ABB3), Tertiary Text ({colors.fg-3} #7F858F): three steps. fg-3 is #7F858F rather than the contract's #6E747D because #6E747D on the ground measured ≈3.9:1 and failed the body floor.
  • Ink ({colors.ink} #111111): text and icons on the white Use-this button, the selected chip and the toast.

Named Rules

The Three Spends Rule. The accent appears on the focus ring (and its surface-local stand-ins: active tab, reading band, slider), the primary action, and money. Nothing else — not counts, not "new" badges, not links, not approved states.

The Word Not Fill Rule. A commission state is a letterspaced word in the ladder pending #7F858F → approved #ECECEA → paid #A6ABB3, with held and reversed in #FF6B57. No state is a colored background, and no state is carried by color alone.

The Marks Only Rule. HealthyApp purple and booked magenta appear as 20–28px product marks and as the tint of that product's collateral posters. They never color a button, tab, heading or surface of tellatribe itself.

Typography

Display Font: Big Shoulders Display (with Archivo Narrow, Arial Narrow, Impact) Body Font: Schibsted Grotesk (with Helvetica Neue, Arial) Label/Mono Font: ui-monospace / SFMono-Regular / Menlo for URLs only

Loaded weights: Big Shoulders Display 500, 600, 700, 800; Schibsted Grotesk 400, 500, 600, 700. The build uses display at 700 and 800 only.

Character: A compressed, all-caps title-card voice set against a wide, high-x-height grotesk. The display face shouts the few things worth shouting (the figure, the product, the poster line); the grotesk does the reading, with tabular figures where money is being counted.

Hierarchy

  • Display (700, 44px phone / 60px desktop, line-height .95, letter-spacing .005em, caps, text-wrap: balance): the billboard sentence only; the money span inside it is accent and tabular.
  • Countdown (800, 160px, caps): the 3-2-1 before recording, white with a 40px shadow.
  • Poster (800, 27px at rest / 22px in focus, line-height .9, caps, word-break: break-word): the tile's artwork line, max 54% of tile height (34% in focus). Sheet poster at 26px.
  • Headline (700, 22px, line-height 1, .03em, caps): row headings and section headings; sheet title 26px; review title 24px.
  • Wordmark (700, 24px phone / 26px desktop, .03em, caps): tellatribe with the dot in secondary text.
  • Title (600, 13–14px, line-height 1.2): tile titles (13px; 16px when focused), item-row titles (14px), ledger titles (13.5px).
  • Body (400, 15px, line-height 1.4): the base. Billboard and section leads are 14px secondary with a 34–38ch measure; caption blocks 14.5px/1.5; scripts 14.5px/1.6; prompter lines 28px/1.35 at 600, centered, with a 12px text shadow.
  • Label (600, 11px, .1–.12em, caps): tab labels, the PAYS / TAKES keys in the focused tile (white at 70%), fact keys.
  • State (700, 11px, .08em, caps): the commission-state word at the right of a ledger row; the "New" chip (.08em) and tally (.12em) share the weight.
  • Mono (12–12.5px): tracked URLs in item rows, sheet carry line and link details; word-break: break-all in detail panels.

Named Rules

The Tabular Money Rule. font-variant-numeric: tabular-nums lining-nums is applied only where money or time is being counted — the billboard figure, ledger amounts, the prompter clock and take length. Counts like "1,204 clicks" use proportional lining figures so the comma does not take a full figure advance.

The Caps Are Display Rule. Uppercase belongs to Big Shoulders Display and to the 11px label/state tier of the grotesk. Running text, titles and buttons are sentence case.

Layout

Phone first at 390×844: a column of header (56px, env(safe-area-inset-top) added), a scrolling main, and a four-tab bar (6px top padding, 8px bottom plus safe-area-inset-bottom). The page gutter is 16px. The billboard sits 8px below the header inside the gutter; rows follow at 22px spacing. Each row is a heading line (mark · name · rate · extent, 8px above the rail) and a horizontal rail with 8px gaps, scroll-snap-type: x proximity, 16px scroll padding, 14px top and 18px bottom padding so the focused tile's shadow is not clipped, and an 8px end spacer. Tiles are 136px wide at 4:5; the focused tile widens to 216px. Section views (Links, Studio, Earnings) stack .sec blocks at 14px top padding with 8px list gaps (6px for the ledger). Foot-notes sit 26px below the last block in tertiary text.

The sheet rises from the bottom to 88% height; the prompter and review cover the full phone; the toast floats 84px above the bottom edge.

At 720px and above the same DOM is recomposed as a grid: a 96px left rail of tabs (each 10px padding, 10px radius, active one on surface) and a main column with 28px/32px padding; the header grows to 64px with a hairline below and 28px side padding. The wall becomes two columns — the billboard in a minmax(320px, 420px) left column with the foot-note beneath it, the rows in the right column with 26px spacing, 36px column gap, and a 32px end spacer on each rail. Tiles grow to 168px (262px focused). Section views cap at 820px. The sheet becomes a 520px right panel over the dimmed wall; the prompter and review are 480px right panels; the toast anchors to the lower right at 32px.

Named Rules

The Same DOM Rule. Desktop is a wider view of the same thing: the phone markup is re-gridded, never duplicated. A tab bar becomes a rail; a bottom sheet becomes a right panel; the billboard becomes a column.

The Phone Gutter Rule. 16px on the phone, 28–32px on desktop. The focused tile scales from left center so its ring lands on the gutter line rather than crossing it.

Elevation & Depth

Depth is shadow and tone. Resting cards (billboard, item and ledger rows) are a lighter surface on the ground with no shadow and no border; the billboard, the focused tile and the toast carry one ambient shadow; the sheet carries a heavier upward shadow. The only borders are hairlines used as dividers (tab bar, panel tops, desktop header and rail) or as the single inset ring on the outlined item and the dashed outline of join cards and empty states. Nothing stacks a border under a shadow. Overlays dim what is beneath them: the scrim is black at 55%; the inactive rows of the wall drop to 60% opacity while a tile is focused by gesture.

Shadow Vocabulary

  • Ambient (box-shadow: 0 8px 24px rgba(0,0,0,.45)): the billboard at rest, the toast, and the focused tile (where it is paired with the ring).
  • Focus ring (0 0 0 2px #4D7CFF, as a box-shadow layer): the focused tile only; :focus-visible uses a 2px outline at 2px offset instead.
  • Sheet (0 -12px 40px rgba(0,0,0,.5)): the bottom sheet.
  • Inset hairline (inset 0 0 0 1px #2A3039): the outlined item row (the recruiting link).
  • Glass (backdrop-filter: blur(6–8px) over black 45–50% or white 14–16%): foot chips, "New" chips, prompter tally/clock/round buttons, the review play button.

Named Rules

The No Border Under Shadow Rule. A surface is either lifted by shadow or divided by a hairline, never both. Cards have no border; dividers have no shadow.

The Dim Not Hide Rule. Context steps back by opacity — 60% for inactive rows, 55% scrim, 55% locked tiles at 30% saturation — rather than disappearing.

Shapes

Soft-cornered rectangles throughout, scaled to the element: 5–7px on product marks, 6px on the foot chip, 8px on chips, 9px on inner controls (Use this, segment buttons, join button), 10px on icon buttons and detail actions, 12px on tiles, buttons, rows, caption/script blocks and the toast, 16px on the billboard and the take preview, 20px on the sheet's top corners, and full pills (999px) on the code chip, status pills, tab counts, "New" chips and prompter indicators. Tiles are a fixed 4:5 with overflow: hidden; the story asset letterboxes inside it. Circles are reserved for the camera: 36px close, 48px flip/retake, 76px record ring with a 60px disc that morphs to a 28px 7px-radius square while recording, and the 22px "used" check. The dashed hairline marks places that are empty or not yet joined.

Components

Billboard

A sentence, not a labeled figure. surface card at 16px radius with the ambient shadow; 20/18/18px padding (28/26/26 on desktop). The h1 is Display with the money span in accent; a 14px secondary paragraph beneath carries the pending amount and its date; an action line holds one primary button and one quiet underlined link, 16px apart. Departure from contract: the contract specified "AVAILABLE $412.80" at 56px with a 14px state line; the build renders "$412.80 is yours on Nov 1." at 44px.

Buttons

  • Shape: 12px radius, 48px tall, 18px side padding, 600 weight 15px, 18px icon at 8px gap. Scale to .98 on press (150ms).
  • Primary: accent-fill with white text; hover brightens 8%.
  • Ghost: surface-2 with fg; hover surface-3.
  • Quiet: no box, secondary text, underlined with 3px offset; hover to fg.
  • Use this: 36px tall, 9px radius, white (fg) with ink text at 13px; full width of the focused tile's foot.
  • Icon button: 40px square, 10px radius, surface-2, 18px 1.5px-stroke icon.

Product row heading

Baseline-aligned line: 20px mark (5px radius, Display 700 13px white letter on the product color), Headline product name, secondary 13px rate ("25% for 12 months", ellipsized), and a right-aligned 12px 600 extent ("6 new"; .muted in fg-3 for "Not enrolled").

Tile

  • Rest: 136px × 4:5, 12px radius, --tint ground with the light-to-dark ramp, poster line at top-left (10/12px inset), foot pinned to the bottom with a 26px top-fade into black 88%: title (13px 600) above a foot chip (20px tall, 6px radius, black 45% glass, 11px 600, 12px icon) reading category · duration — "Script · 0:28", "Caption · 0:05", "Image · 4:5", "One-pager · PDF". An optional New chip (18px pill, white 16% glass, 11px 700 .08em) sits top-right and pushes the poster line down to 38px.
  • Focus: flex-basis 216px, scale(1.06) from left center, ambient shadow plus the 2px accent ring; poster line shrinks to 22px and 34% height; the foot deepens (34px top fade to black 96%) and the title grows to 16px; the foot chip hides and a two-column meta grid appears — PAYS / TAKES labels (11px .12em caps, white 70%) against 15px 600 values — followed by the full-width Use-this button.
  • Image tile: background-image cover, top-anchored; poster line hidden. Page tile: paper ground with a 72%-wide wordmark and three rule lines. Locked: 55% opacity, 30% saturation, aria-hidden. Used: a 22px white circle with an ink check at the lower right, hidden while focused.
  • Join card: same footprint, dashed hairline, bottom-aligned copy and a 36px ghost button.
  • Open-call tile (campaigns): the same footprint and ramp, tinted with the product mark mixed 45 % into ground; the poster line is what it pays ("$150 + 25%", "Bid up to $300", "Gift · $89"), the foot chip is what it asks ("1 Reel · by Nov 2"); an Invited pill or the applied state ("Applied", "Accepted") sits where New would. Ineligible: opacity .45, no focus ring, still tappable to read the brief, with the one reason under the title ("needs 1,000 followers on Instagram") — honest, never hidden.

Deal card (Studio → Deals)

An item row at 60px minimum: 28px product mark; the brief title (14px 600) over "fee · gift" in secondary; a status pill in the right slot; beneath it the next-action line at 13px — in fg when the move is the creator's ("Upload draft", "Post by Thursday", "Accept the agreement"), in fg-2 when it is the brand's or ours ("Draft with the brand · auto-approves Nov 4", "We're checking the post"). The sheet it opens carries the SOW, each deliverable's draft and reviews, the disclosure checkbox and the three posting modes.

Tabs

Four destinations in an 11px 600 .1em caps label under a 22px 1.5px-stroke icon, 4px gap; fg-3 at rest, accent when active. A count badge (17px pill, surface-3, fg, 11px) sits at top:-2px; left: calc(50% + 11px); it does not change color on the active tab. Hairline above on the phone; on desktop the tabs stack in a 96px rail, each 10px radius, the active one on surface.

Section heading

Headline with an inline .ext pushed right (12px 600 fg-3, sentence case, grotesk) carrying the extent or hint — "Tap a row for its QR", "0 taken", "Example rules". A 14px secondary lead with a 38ch measure follows.

Item row

Grid 28px 1fr auto, 60px minimum, 12px radius, surface, 10/12px padding, 12px gap: 28px product mark, title (14px 600) over a 12.5px secondary sub (tracked URLs in mono fg), and a right block (14px 600 figure over 12.5px secondary). item.outline is transparent with the inset hairline for the recruiting link. A detail panel opens beneath, flush (−4px), with 0 0 12 12 radii, a hairline top, a 120px white QR tile at 10px radius, a mono URL and 40px actions. A pill (22px, surface-2/fg-2; .ok is surface-3/fg; .warn is coral text) sits in the right slot for Queued / On / Connect.

Segmented control and period line

Track on surface at 11px radius with 3px padding and 2px gaps; buttons 34px, 9px radius, 12.5px 600 secondary; the selected one on surface-3 in fg. Below it a 13px period line ("Last 30 days · all products") with a 40px icon button.

Facts line

Density as one sentence: "1,804 clicks · 1,412 visitors · 26 sales · $0.34 EPC" at 14px/1.5, figures in fg 600, words in fg-2. Replaces any stat-card grid.

Ledger row

Fixed geometry: 56px tall, grid 22px 1fr 72px 74px, 10px gap, 12px side padding, 12px radius, surface. A 22px product mark; a 13.5px 600 title over a 12px secondary sub, both single-line ellipsized; a right-aligned tabular 14px 600 amount (coral when negative); and the state word at 11px 700 .08em caps in its ladder color. Tapping opens a why panel beneath (hairline top, 13px/1.45 secondary with fg emphasis) that says why it is that amount and when it pays.

Empty state

Dashed hairline box at 12px radius, 16px padding, 13.5px/1.45 secondary with a bold fg lead ("Nothing taken yet. Land on a tile on the wall and tap Use this.").

Sheet

surface-2, 20px top radii, 88% height, upward shadow, over a 55% scrim. A 40×4px grab bar; a header with the Headline title (26px), a sub line of mark · product · category and a Pays pill, and a 40px close. The body scrolls: a 120px 1fr preview (a 4:5 poster mirroring the tile, beside network chips — 30px, 8px radius, surface-3; the selected chip white with ink text), a caption block (surface, 14px padding, 14.5px/1.5, link in fg underlined, a dotted disclosure line in secondary), a carry line in tertiary with the mono link, and a two-column action grid of 48px buttons. Scripts render the same way with a script block at 1.6 line-height and a trailing tertiary cue. On desktop it is a 520px right panel.

Prompter

A black camera surface. Top: a tally pill (black 50% glass, 11px 700 .12em caps, 8px dot — fg-3 in standby, camera red pulsing at 1.1s while recording), a clock pill (tabular 13px, estimate in white 55%), and a 36px close. The script scrolls in 28px/1.35 600 centered white with a 12px text shadow, masked to fade in at 12–30% and out at 62–80% of the height; a 2px accent reading band with triangular end caps sits at 46%. Bottom, over a 75% black fade: a speed row (12px .06em labels at white 75%, range input with accent thumb, tabular "150 wpm" output) and a three-cell control row of 48px glass rounds (flip, retake) around the 76px record ring. A 3-2-1 countdown in Display 800 at 160px pops in and fades. A caption-safe hairline at 210px from the bottom shows in standby only.

Review

Ground-colored, slides in from the right. Headline "Take N" with a close; a 16px-radius take preview filling the height with a 64px glass play button, a tabular length pill at lower left and a secondary note at the top ("Disclosure burned into the first 3 seconds."); a two-column action grid at the bottom with a full-width span.

Toast

White (fg) on ink, 12px radius, 10/14px padding, 14px 600 with a 16px check, ambient shadow; rises 16px into place over 300ms and fades after 1.8s. Bottom center on the phone, lower right on desktop.

Motion

One easing, cubic-bezier(.2,.8,.2,1). The authored moment is the tile: flex-basis, transform and shadow over 350ms, the row lifting 2px and the wall dimming over 300ms (dimming is applied on gesture, not on landing, so all products arrive at full strength). Everything else is transit — buttons 150ms, scrim 250ms, sheet 380ms, prompter 400ms, review 350ms, toast 200/300ms, record disc morph 250ms, countdown pop 900ms, tally pulse 1.1s. prefers-reduced-motion collapses every transition and animation to .01ms.

Browser surface

color-scheme: dark. Selection is accent with white text. :focus-visible is a 2px accent outline at 2px offset with an 8px radius. The main scroller uses a thin surface-3 scrollbar on transparent (4px WebKit thumb at 4px radius); rails hide theirs. Tap highlight is transparent; the range input takes accent-color.

Do's and Don'ts

Do:

  • Do spend #4D7CFF on the focus ring, the primary action and money, and nothing else; use #3761E0 as the fill under white button text.
  • Do write a commission state as an 11px 700 .08em caps word in the ladder pending #7F858F → approved #ECECEA → paid #A6ABB3, held/reversed #FF6B57.
  • Do keep tiles at 4:5, 136px (168px desktop), 12px radius, no border; focus by scale(1.06) from left center, a 2px accent ring and the ambient shadow.
  • Do put the category in the foot chip as "Category · duration" and the pay/time facts in the focused tile's PAYS / TAKES grid.
  • Do give money and durations tabular-nums lining-nums; give counts proportional lining figures.
  • Do carry product color only as 20–28px marks and as a collateral tint; set the tint per tile with --tint.
  • Do keep the ledger row at 56px with the 22px 1fr 72px 74px grid and single-line ellipsized text.
  • Do label every example figure with a tertiary foot-note ("Prototype. Example data and example rates.").
  • Do recompose the same DOM at ≥720px: 96px tab rail, billboard column minmax(320px, 420px), 36px column gap, right-side panels for sheet (520px) and prompter/review (480px).

Don't:

  • Don't add a stat-card grid; density is one facts line.
  • Don't place a kicker, eyebrow or letterspaced category above a headline or poster line.
  • Don't put a border under a shadow, or a shadow on a hairline-divided surface.
  • Don't color a count, badge, link or the approved state with the accent.
  • Don't let HealthyApp purple or booked magenta touch a button, tab, heading or surface of the portal chrome.
  • Don't paint a diagonal sheen or wedge on a tile; the only overlay is the top-light-to-dark ramp.
  • Don't dim the wall on landing; has-active is added only by gesture.
  • Don't carry status by color alone; the word is always present.

What to replace with real material

  • The three example thumbnails embedded as data URIs: checkins.webp (HealthyApp check-ins screen, tile before-after), story.webp (HealthyApp check-in video poster, tile story), booked-wordmark.webp (booked.coach wordmark on the one-pager page tile). Provenance in design/prototype/assets/README.md and the .webp.json sidecars; all are resized product material, none generated.
  • Example figures and rates: $412.80 / $96.40 / Nov 1 / Oct 19 on the billboard; 25% and 20% for 12 months; the 5% override; every ledger amount, date and state; 1,804 / 1,412 / 26 / $0.34; link click and sale counts. PRODUCT.md lists rates and threshold as undecided.
  • Placeholder product marks: the single letters "h" and "b" in Display 700 on product color, and the "w" on slate #3A4452, stand in for the real HealthyApp, booked.coach and WhoHire marks.
  • The simulated camera viewfinder: .cam .sim is a radial gradient (#2a2f38 → #15181d → #0b0d10) with a "Camera preview" caption; the real surface is the mirrored <video> already in the markup.
  • The take preview in the review screen reuses the same gradient in place of the recorded clip.

Rendered from DESIGN.md. Edit the source, not this page.