--- version: alpha name: tell.pawr.link description: "Paid crypto signals landing page: Equals-style broadsheet/spreadsheet surface, warm paper canvas, black rules, flat pastel cells, and x402 agent economics." colors: primary: "#000000" canvas: "#FAF9F5" ink: "#000000" body: "#646462" fog: "#CDCCC9" white: "#FFFFFF" yellow: "#FFCC00" orchid: "#B074CE" green: "#20A277" blue: "#2DCBDC" mint: "#B8EAD8" paleMint: "#C9F2E5" paleBlue: "#B9EDF4" paleOrchid: "#EAD7F4" paperWarm: "#FFFDF7" butter: "#FBF4DC" creamHighlight: "#FFF7CF" routeWash: "#FFF9DF" darkBody: "#252523" softInk: "#30302C" typography: display-serif: fontFamily: Playfair Display fontSize: 7.333rem fontWeight: 400 lineHeight: 0.88 letterSpacing: "-0.045em" section-serif: fontFamily: Playfair Display fontSize: 4.555rem fontWeight: 400 lineHeight: 0.95 letterSpacing: "-0.04em" cell-serif: fontFamily: Playfair Display fontSize: 3.222rem fontWeight: 400 lineHeight: 0.9 letterSpacing: "-0.04em" body: fontFamily: Inter fontSize: 1rem fontWeight: 500 lineHeight: 1.45 letterSpacing: "-0.005em" lede: fontFamily: Inter fontSize: 1.5rem fontWeight: 500 lineHeight: 1.24 letterSpacing: "-0.02em" mono: fontFamily: IBM Plex Mono fontSize: 0.777rem fontWeight: 500 lineHeight: 1.2 letterSpacing: "0.06em" mono-strong: fontFamily: IBM Plex Mono fontSize: 0.833rem fontWeight: 700 lineHeight: 1 letterSpacing: "0.08em" mono-data: fontFamily: IBM Plex Mono fontSize: 0.722rem fontWeight: 600 lineHeight: 1.25 letterSpacing: "-0.02em" rounded: none: 0px focus: 2px spacing: hairline: 1.5px xs: 8px sm: 14px md: 18px lg: 24px xl: 44px section: 54px components: page: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.body}" nav-rule: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body}" hero-headline: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-serif}" hero-lede: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.lede}" mono-kicker: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.mono}" command-button: backgroundColor: "{colors.white}" textColor: "{colors.ink}" typography: "{typography.mono-data}" rounded: "{rounded.none}" padding: 16px command-button-hover: backgroundColor: "{colors.yellow}" textColor: "{colors.ink}" typography: "{typography.mono-data}" rounded: "{rounded.none}" padding: 16px primary-cta: backgroundColor: "{colors.orchid}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 20px metric-cell-yellow: backgroundColor: "{colors.yellow}" textColor: "{colors.ink}" typography: "{typography.cell-serif}" rounded: "{rounded.none}" padding: 18px metric-cell-mint: backgroundColor: "{colors.mint}" textColor: "{colors.ink}" typography: "{typography.cell-serif}" rounded: "{rounded.none}" padding: 18px metric-cell-blue: backgroundColor: "{colors.paleBlue}" textColor: "{colors.ink}" typography: "{typography.cell-serif}" rounded: "{rounded.none}" padding: 18px metric-cell-orchid: backgroundColor: "{colors.paleOrchid}" textColor: "{colors.ink}" typography: "{typography.cell-serif}" rounded: "{rounded.none}" padding: 18px guardrail-yellow: backgroundColor: "{colors.yellow}" textColor: "{colors.ink}" typography: "{typography.mono-strong}" rounded: "{rounded.none}" padding: 24px guardrail-mint: backgroundColor: "{colors.paleMint}" textColor: "{colors.ink}" typography: "{typography.mono-strong}" rounded: "{rounded.none}" padding: 24px guardrail-blue: backgroundColor: "{colors.paleBlue}" textColor: "{colors.ink}" typography: "{typography.mono-strong}" rounded: "{rounded.none}" padding: 24px guardrail-orchid: backgroundColor: "{colors.paleOrchid}" textColor: "{colors.ink}" typography: "{typography.mono-strong}" rounded: "{rounded.none}" padding: 24px endpoint-workbench: backgroundColor: "{colors.white}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 0px endpoint-rail-active: backgroundColor: "{colors.yellow}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 14px endpoint-ledger: backgroundColor: "{colors.paperWarm}" textColor: "{colors.softInk}" typography: "{typography.mono-data}" rounded: "{rounded.none}" padding: 14px inspect-panel: backgroundColor: "{colors.butter}" textColor: "{colors.ink}" typography: "{typography.mono-data}" rounded: "{rounded.none}" padding: 18px detail-hero: backgroundColor: "{colors.creamHighlight}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 34px signal-card: backgroundColor: "{colors.routeWash}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 34px pricing-hit: backgroundColor: "{colors.paleMint}" textColor: "{colors.ink}" typography: "{typography.mono-strong}" rounded: "{rounded.none}" padding: 42px pricing-miss: backgroundColor: "{colors.yellow}" textColor: "{colors.ink}" typography: "{typography.mono-strong}" rounded: "{rounded.none}" padding: 42px activity-status: backgroundColor: "{colors.yellow}" textColor: "{colors.ink}" typography: "{typography.mono-strong}" rounded: "{rounded.none}" padding: 18px activity-meta: backgroundColor: "{colors.canvas}" textColor: "{colors.darkBody}" typography: "{typography.mono}" fog-divider: backgroundColor: "{colors.fog}" textColor: "{colors.ink}" rounded: "{rounded.none}" blue-square-mark: backgroundColor: "{colors.blue}" textColor: "{colors.ink}" rounded: "{rounded.none}" size: 16px green-cache-mark: backgroundColor: "{colors.green}" textColor: "{colors.ink}" rounded: "{rounded.none}" size: 16px focus-ring: backgroundColor: "{colors.ink}" textColor: "{colors.orchid}" rounded: "{rounded.focus}" --- ## Overview tell.pawr.link is the public face of Tell Signals: paid crypto, social, and onchain signals for AI agents over x402 on Base. The production landing page should feel like a financial newspaper wired into a developer console: editorial authority on top, spreadsheet utility underneath, protocol economics visible everywhere. The design is not generic SaaS and not the old dark terminal gateway. It is a light broadsheet/workbench for agents deciding whether a paid read is worth the next few cents. It combines: - **Broadsheet confidence:** oversized serif headlines, strict rule lines, direct positioning. - **Spreadsheet legibility:** flat pastel metric cells, ledger rows, endpoint tables, inspectable examples. - **Protocol truth:** exact prices, TTLs, HIT/MISS semantics, Base USDC, x402 payment boundaries. - **pawr warmth by restraint:** useful yellow/orchid/mint/blue accents, never confetti. The page has one job: make an agent or builder understand what Tell sells, how payment works, how to control spend, and where to inspect live endpoints. ### Product promise **Paid crypto signals for AI agents.** Use live x402 endpoints today; combine them into higher-level Tell workflow cards next. Every paid action stays explicit: agents cap price, see routes, inspect examples, and keep signing/execution in their own wallet. ### Operating truths that must stay visible - **MISS = paid fresh result.** - **HIT = free cached repeat inside TTL.** - **Tell returns data, quotes, and decision support; it does not sign or submit transactions.** - **Raw endpoint inspection remains available beneath the signal narrative.** - **No vendor account should be required for the buyer to understand the offer.** ## Colors The palette is intentionally small and flat. The memorable silhouette comes from warm paper, black rules, and pastel spreadsheet cells — not glow, glass, or gradients. | Token | Hex | Role | |---|---:|---| | `primary`, `ink` | `#000000` | Rules, headlines, main text, icons, grid structure. Black is the brand anchor. | | `canvas` | `#FAF9F5` | Warm paper page background. Use everywhere the page breathes. | | `body` | `#646462` | Secondary explanatory copy and navigation labels. | | `fog` | `#CDCCC9` | Internal dividers where black would overstate hierarchy. | | `white` | `#FFFFFF` | Command buttons, provider cards, endpoint rails, high-readability cells. | | `yellow` | `#FFCC00` | Active rows, command hover, MISS/paid emphasis, hero metric cells. | | `orchid` | `#B074CE` | Primary CTA and focus/final-action energy. Use sparingly. | | `green`, `mint`, `paleMint` | `#20A277`, `#B8EAD8`, `#C9F2E5` | Cache/HIT, provider count, safe/guardrail surfaces. | | `blue`, `paleBlue` | `#2DCBDC`, `#B9EDF4` | Reference accents, small square marks, saved/inspection cells. | | `paleOrchid` | `#EAD7F4` | Advisory/decision-support surfaces and cache hit-rate cells. | | `paperWarm`, `butter`, `creamHighlight`, `routeWash` | warm off-whites | Ledger, inspect panels, detail heroes, route sheets. | | `softInk`, `darkBody` | `#30302C`, `#252523` | Dense mono rows and activity copy needing more weight than gray. | ### Color rules - Paper canvas first, black rule lines second, pastel cells third. - Yellow means active/paid/important, not generic decoration. - Mint/green means cached, safe, or verified. - Orchid means primary action or focused decision, not “AI purple gradient.” - Blue is an accent/reference mark; do not let it dominate. - Avoid random neon, dark terminal palettes, glassmorphism, and orange/gold legacy styling on the production route. - Subtle warm gradients are only allowed inside detail heroes, signal cards, and pricing sheets; core layout stays flat. ## Typography Typography carries the brand more than illustration does. ### Playfair Display — editorial authority Use Playfair Display for the page's public voice: hero headline, section headers, pricing hero, metric numerals, and large signal-card titles. It should feel like a financial broadsheet that happens to expose HTTP routes. - Hero headline: `clamp(58px, 9.4vw, 132px)`, weight `400`, line-height `.88`, tracking `-.045em`. - Section headlines: `clamp(42px, 5.6vw, 82px)`, weight `400`, line-height `.95`, tracking `-.04em`. - Metric/data numerals: oversized serif, tight tracking, tabular-feeling rhythm. ### IBM Plex Mono — payment/protocol truth Use IBM Plex Mono anywhere an agent parses, pays, copies, or verifies: - Section kickers and edition labels. - Endpoint methods, routes, TTLs, prices, cache states. - CLI commands and `--max-price` examples. - Guardrail labels, recent activity rows, raw catalog links. - JSON/example payloads and parameter lists. Mono labels should be small, uppercase, and spaced (`0.06em`-`0.12em`). Do not write long marketing paragraphs in mono. ### Inter — product clarity Use Inter for navigation, ledes, explanatory body copy, card bodies, and table descriptions. Keep it medium-weight; thin copy looks weak against black rules and pastel cells. ## Layout The production page is a wide, rule-driven broadsheet workbench. Use a max-width around `1440px`, responsive side gutters (`clamp(18px, 4vw, 64px)`), and black horizontal rules between major sections. ### Canonical production sequence 1. **Nav:** Tell logo, compact links, top/bottom rules. 2. **Edition row:** `Base USDC / HTTP 402` plus endpoint/provider count. 3. **Hero grid:** oversized editorial headline, direct lede, install command, CTA, three proof bullets, four pastel metric cells. 4. **Guardrails:** payment, spend cap, keyless access, advisory boundary, no-signing boundary, health/raw catalog visibility. 5. **Signal cards:** coming-soon workflow sheets with price/source/input/output rows. 6. **Endpoint catalog:** sticky provider rail, endpoint ledger, detail hero, stats, parameters, response examples. 7. **Recent activity:** 7-day ledger with explicit `fresh = MISS` and `cached = HIT` labels. 8. **Pricing sheet:** upstream + markup, HIT/MISS split, no tiers/accounts/contracts. 9. **CLI quickstart:** worksheet terminal commands, not a dark terminal block. 10. **Flow sheet:** MISS → HIT → keep moving. 11. **Footer explainer:** what x402 is, with x402 reference links and design-token links. ### Density rules - Keep the endpoint catalog dense. It is the product, not a footnote. - Use tables/ledgers/sheets for operational data; do not turn prices and TTLs into vague cards. - Desktop can use sticky rails and scrollable panes. Mobile should become single-column readable cards. - Optimize mobile for comprehension before visual symmetry. Long mono routes must wrap. ## Elevation & Depth Depth comes from composition and rule weight, not shadows. - Use `1.5px` black outlines for primary structure. - Use `1px` fog dividers for internal separation. - Keep shadows nearly absent. A one-pixel offset is enough when needed. - Use flat fills as semantic zones: yellow = paid/active, mint = cached/safe, blue = reference, orchid = primary action/focus. - Motion should be editorial and short: rise/fade on load, tiny hover lift, active press scale. - Respect `prefers-reduced-motion`. Do not reintroduce ambient orange blobs, sunny palms, dark console grain, frosted glass, or generic crypto glow on the production route. ## Shapes The shape language is squared, gridded, and worksheet-like. - Border radius is effectively `0px` across production surfaces. - Focus outlines may use `2px` rounding for browser rendering only. - Use small square marks as accents inside headings, pricing, activity, and signal cards. - Icons use square stroke caps and miter joins. - Buttons and cards must not become pill-shaped. ## Components ### Tell mark Use the self-hosted Tell logo/icon assets (`/tell-logo.svg`, `/tell-icon.svg`) and cache-busted favicon. The current landing uses the Tell brand mark, not the old x402 gateway wordmark. ### Hero The hero is editorial first and product second: oversized Playfair headline, clear lede, copyable hosted install command (`curl -fsSL https://tell.pawr.link/tell-install.sh | bash`), CTA to browse live endpoints, and proof bullets naming live endpoint/provider counts and cache economics. ### Command button The install command is a white worksheet button with black outline and mono text. Hover can turn yellow; copy state can turn mint. It should feel copyable and operational, not like a decorative code sample. ### Metric cells Use four flat pastel cells with black borders: - endpoints / yellow - providers / mint - saved today / pale blue - cache hit rate / pale orchid Labels are mono uppercase; values are large serif. Avoid icons inside the numbers unless they add meaning. ### Guardrail cards Guardrails are trust infrastructure. Each card pairs a square-line icon with a mono uppercase title and terse body. They must make advisory/signing/payment boundaries explicit. ### Signal cards Signal cards preview workflow routes. They should look like route sheets with: - top status strip (`signal route`, `coming soon`) - large serif title - structured `dl` rows for price, sources, input, output - footer route path Never imply coming-soon workflow cards are live. ### Endpoint catalog The catalog is the live product surface. Provider rail, endpoint ledger, detail stats, parameters, response examples, docs link, raw catalog link, and filter box must remain visible and keyboard-accessible. Use an em dash (`—`) for empty hit-rate states. ### Recent activity Label it “Recent activity,” not “live,” unless freshness is proven. Current freshness window is last 7 days. Use `fresh = MISS` and `cached = HIT` labels so the payment model stays legible. ### Pricing sheet Pricing is a worksheet: `upstream + markup`, then a clear HIT/MISS split. Keep “HIT = free cached repeat inside TTL” and “MISS = paid fresh provider/workflow result” visible. ### CLI quickstart The CLI section is a formula/code sheet, not a dark terminal. Show `tell list`, `tell call`, and `tell combine`. Keep `--max-price` visible as the spend-control affordance. ## Do's and Don'ts ### Do - Lead with **“Paid crypto signals for AI agents.”** - Keep Tell CLI naming current: `@pawrlink/tell`, `tell list`, `tell call`, `tell combine`. - Preserve the light broadsheet/spreadsheet silhouette: paper canvas, black rules, flat pastel cells. - Make MISS/HIT economics visible in hero, pricing, flow, catalog, and recent activity. - Keep raw endpoint inspection available beneath higher-level signal packaging. - Use Playfair for editorial hierarchy, IBM Plex Mono for operational/payment details, and Inter for UI prose. - Keep no-account, keyless, no-custody, no-advice, and no-signing boundaries explicit. - Keep `/DESIGN.md`, `/.well-known/design.md`, `/tokens.json`, `/tailwind.theme.json`, and `/assets/design-tokens.css` discoverable. - Validate changes with `npm run design:lint`, `npm run design:export`, and the normal test/build loop. ### Don't - Do not describe the production page as the old dark terminal-native x402 gateway. - Do not bring back orange/gold as the main visual system unless explicitly building a legacy route. - Do not use rounded pills, ambient glows, frosted glass, grain, or sunny palms on the production route. - Do not call workflow signal cards live before their routes ship. - Do not hide endpoint parameters, prices, TTLs, or response examples behind vague interactions. - Do not label stale traffic as live. - Do not make cache sound like only speed; it is also spend control. - Do not edit `src/landing/client.ts` without rebuilding `public/assets/landing.client.js`. - Do not loosen payment/signing language for conversion copy. ## Agent application prompt Use this prompt with Get Shit Pretty, Codex, Claude Code, or another coding agent when applying the tell.pawr.link style to a single page: ```text Apply the tell.pawr.link design system from DESIGN.md to this page only. Preserve the page's existing routes, data loading, authentication, payment behavior, telemetry, and business logic. Restyle only the chosen page and components it directly uses. Target visual language: light financial broadsheet × spreadsheet workbench × x402 protocol surface. Use warm paper (#FAF9F5), black rules (#000000), flat pastel data cells (#FFCC00, #B8EAD8, #B9EDF4, #EAD7F4), square borders, oversized Playfair Display headlines, Inter body copy, and IBM Plex Mono for prices/routes/commands/cache/payment details. Make operational truth visible. If the page has paid calls, route paths, prices, TTLs, cache states, wallet actions, or guardrails, show them as ledgers/sheets instead of vague cards. Use HIT/MISS language where cache economics matter. Keep signing/execution/advisory boundaries explicit. Do not add rounded SaaS pills, glassmorphism, dark terminal shells, crypto neon, orange legacy branding, ambient blobs, or generic AI gradients. Do not change copy meaning unless needed for clarity. Do not hide raw data behind decorative interactions. Deliver: code changes, generated artifacts if tokens are consumed, screenshot/DOM QA notes, and verification commands run. ``` ## Public design artifacts The production site exposes the design system for humans and agents: - `/DESIGN.md` — this source of truth. - `/.well-known/design.md` — stable discovery path. - `/tokens.json` — W3C DTCG design token export. - `/tailwind.theme.json` — Tailwind theme export. - `/assets/design-tokens.css` — CSS custom properties generated from tokens. Treat these as part of the product surface. Drift between the landing page and these artifacts is a shipping bug.