version: 1 slug: "design-portal" primary_target: "design/portal" related_targets: []
Surface brief — affiliate portal (mobile-first), design/portal
Scope: the affiliate-facing portal of tellatribe, phone first (390), desktop as a wider view of the same thing. Visitor mode: Operate. The affiliate completes a task — see what I can promote, see where I stand, take one promotional action — in a ten-second gap between other work.
Audience and job: two populations on one screen — a coach who has never promoted anything and a working creator with other dashboards. Job: get from "I should promote this" to "it is posted" without leaving the phone. Proof: real money states (pending / approved / paid, the hold, next payout date). Constraints: tellatribe owns its own identity; HealthyApp purple and booked magenta appear only as product marks; two tiers, no third; nothing on the surface may invent a commercial claim.
Memorable moment: landing on a collateral tile and watching it grow and tell you what it pays and how long it takes, with everything around it quietly getting out of the way.
Unresolved: gated vs open signup; whether customers may become affiliates; cross-product downline earning; exact rates. The home must read correctly under either answer.
Direction contract
THESIS: The portal is a catalog wall. Each product you can promote is a row; each piece of collateral is a tile; land on a tile and it tells you what it pays and how long it takes, then hands you Copy / Post / Record. It refuses the category default — stat cards over a chart over a table in a sidebar shell — and it refuses to be a feed. Standing lives where a streaming wall puts the thing you came back for: the billboard at the top.
OWN-WORLD: Deep neutral ground #0F1114, surfaces #171A1F and #1F242B, text #ECECEA / #A6ABB3 / #6E747D. One accent, electric blue #4D7CFF, spent on exactly three things: the focused tile's border, the primary action, and money figures. Held / reversed states get #FF6B57 as a word, never a fill. Collateral artwork and product marks are the only other color on the page. Display: Big Shoulders Display, caps, for the wordmark, row headings, and big figures. UI/body: Schibsted Grotesk with tabular lining figures everywhere money appears. Tiles are fixed 4:5 with 12px radius, hairline-free; the focused tile scales 1.06 and its neighbors slide aside; the active row lifts 2px and the rest of the wall dims to 60%. Elevation is shadow only — 0 8px 24px rgba(0,0,0,.45) — never a border under a shadow. Bottom tab bar with four destinations and small extent counts.
STORY: The affiliate lands and understands in one glance: the billboard says what's available and when it pays; the row headings are the products they can promote; the tiles are things they can do right now. They believe the money because every figure carries its state word and its date. They act by landing on a tile and tapping Copy, Post, or Record — one gesture to the work.
FIRST VIEWPORT (390×844): Header 56px — wordmark left in Big Shoulders caps, the affiliate's code as a chip right. Billboard 0–38%: a full-bleed surface card, AVAILABLE $412.80 in 56px tabular Big Shoulders in the accent, beneath it "pays Nov 1 · $96.40 pending until Oct 19" in 14px secondary, one primary action GET A LINK (accent fill, 48px tall). Then row 1 heading HEALTHYAPP (20px caps, product mark 20px before it, extent "6 new" small after it) with a horizontal rail of 4:5 tiles, 140px wide, 8px gap, the first tile already in focus-expanded state showing title "Monday swipe", "PAYS 25% ≈ $24/sale", "0:38 · 0:05 to copy", NEW chip, and a Use-this control. Row 2 heading GETBOOKED peeks below the fold with its rail's top edge visible. Bottom bar 64px: WALL · LINKS · STUDIO · EARNINGS, icons drawn in one 1.5px stroke, active in accent.
FORM: Streaming title-card wall, dealt as a challenger (catalog pop-culture-shelf-streaming-title-card-wall) in hand 3 and chosen by the user over the assigned Offers direction and my pick Balance. Seed key 45fa51bb, re-roll 2.
FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, DESIGN.md, and every shipping raster carrying its provenance.
Rendered from .impeccable/surfaces/design-portal.md. Edit the source, not this page.