Dictionary
Score a page

Voice R · Product

Show the working.

Browser frames, spec tables, dashed accent rails, mono data. Evidence register — the product showing its working. Frames carry the evidence, rails carry the numbers, and both read the same tokens as the pitch around them.

radius --r-3 on plates, square rails · mono numerals · dashed hair-accent edges

rico/RicoHeroRProductOVERTURE

Product hero

Mock dashboard from the mock atoms; live dot and bar rise on first paint.

Rendered live

Badge oneBadge two

The product claim, beside the product

A mechanism-first overture: the frame on the right is not decoration, it is the first piece of evidence.

Primary actionSecond action
app.example.com
Dashboard
Metric one
12,438▲ 24.5%
Metric two
8,291▲ 12.1%
Metric three
24.5k▲ 18.2%
Metric four
4.8%▲ 0.6%
Weekly7d

Product heroground

Character
Mechanism-first, live, exact.
Use when
A product with a dashboard-like surface; two badges, a claim, a lead, two controls.
Avoid
A figure that is not the product; a claim over two lines.
Seam
Followed by a mark strip or a mechanism header.
Supercharge
Glow behind the frame; live dot and bar-rise on first paint only.
Portability
System-bound frame and atoms; the numbers are topic-bound.
rico/RicoProductPreviewRProductSPECIMEN

Product preview

Rendered live

Specimen

A full layout, not just sections

Sidebar, stat row and table share the same tokens as the marketing page around them, so product and pitch feel like one object.

app.example.com/dashboard

Overview

Last 30 days

Metric one48.2k+22.1%
Metric two1,284+8.4%
Metric three12.6k+5.2%
CustomerPlanStatusMRR
Tier two
Active
148
Tier three
Active
89
Tier two
Trial
49
Tier three
Active
290

Product previewground

Character
Evidentiary, whole-product.
Use when
When the product has a sidebar + table shape; otherwise restage its real screen.
Avoid
Two frames in one movement; a frame inside a plate.
Seam
Kicker + h2 open it; 10 columns wide; breathe after.
Supercharge
Replace the mock with a real screen under `.duotone`; keep the shimmer.
Portability
Mock is placeholder; frame and atoms are system-bound.
rico/RicoBrowserFrameRProductwrapper

Browser frame

A SpecTable with plate={false} inside — one chrome, not two.

Rendered live

app.example.com/rates
TokenValueSource
Hairline1pxink 12%
↳ derived from ink by color-mix; never authored
Rule1pxink 26%
Accent rail1px dashedaccent 28%
Radius0 / 6 / 12 / 20per voice
Rules4

Nesting

The frame supplies the chrome; the table drops its plate. Two rounded chromes on one artefact read as a mock-up of a mock-up.

Browser frameany

Character
Quiet chrome.
Use when
Around any evidence: a mock, a screenshot, a SpecTable with plate=false.
Avoid
Nesting a rounded plate inside (two chromes); frames narrower than 6 columns.
Seam
Its shadow separates it from any plane.
Supercharge
Mono URL that names the real route.
Portability
Topic-free.
landing/SpecTableRProductSPECIMEN

Spec table

Rendered live

Rate card

Geometry, priced.

Kicker, title and lead in the rail; the plate takes eight columns.

Rate card

Token geometry

TokenValueSource
Hairline1pxink 12%
↳ derived from ink by color-mix; never authored
Rule1pxink 26%
Accent rail1px dashedaccent 28%
Radius0 / 6 / 12 / 20per voice
Rules4
Spec tableR voice

Spec tableground · band

Character
Rate card, exact.
Use when
Rate cards, tier matrices, ledger extracts: 3–5 columns, up to ~10 rows, optional working rows and a total.
Avoid
Prose in cells; more than five columns at 1280.
Seam
Plate on ground; caption pair closes it.
Supercharge
Emphasis rows in ink; the total on a solid rule.
Portability
Topic-free recipe; data is topic-bound.
landing/StatRailRProductLEDGER

Stat rail

Rendered live

Ledger

Instruments
36
across three donors
Movements
10
Voices
03
Token file
01
tokens.css

Stat rail — numbers on a dashed rail

Stat railground · band · gate

Character
Hard numbers, dashed rail.
Use when
Three to five numbers with mono labels and optional derivation notes.
Avoid
Values over 6 characters; notes over 24 characters.
Seam
Rail top and bottom are its seams; sits beside a frame without doubling chrome.
Supercharge
Mono numerals; one note per rail at most.
Portability
Topic-free.
rico/RicoPricingRProductSPECIMEN (pricing)

Static pricing

Rendered live

Pricing

Simple, transparent pricing

Annual billing shown — save 20% compared to monthly

Tier one

Who this tier is for, in one line.

$0/ month, billed yearly
  • First entitlement
  • Second entitlement
  • Third entitlement
  • Not included here
Get started
Most popular

Tier two

The featured tier — accent ring, primary control.

$15/ month, billed yearly
  • Everything in tier one
  • Fourth entitlement
  • Fifth entitlement
  • Sixth entitlement
Start trial

Tier three

For the largest buyer; sales-led.

$39/ month, billed yearly
  • Everything in tier two
  • Seventh entitlement
  • Eighth entitlement
  • Ninth entitlement
Contact sales

Static pricingground

Character
Three plates, one ring.
Use when
Annual pricing without a toggle; a mono note explains the basis.
Avoid
Featured in the outer columns; more than seven features per plan.
Seam
Header opens; FAQ or coda follows.
Supercharge
Badge sits on the plate edge at left, not centred.
Portability
Topic-free.
rico/PricingPlansRProductSPECIMEN (pricing)

Pricing with toggle

Click the switch: prices roll, copy swaps.

Rendered live

Two periods, one plate recipe

MonthlyYearlySave 20%

Tier one

Who this tier is for, billed yearly.

$0/ month, billed yearly
  • First entitlement
  • Second entitlement
  • Third entitlement
  • Fourth entitlement
Get started
Most popular

Tier two

Who this tier is for, billed yearly.

$15/ month, billed yearly
  • First entitlement
  • Second entitlement
  • Third entitlement
  • Fourth entitlement
Start trial

Tier three

Who this tier is for, billed yearly.

$39/ month, billed yearly
  • First entitlement
  • Second entitlement
  • Third entitlement
  • Fourth entitlement
Get started

Pricing with toggleground

Character
Interactive, rolling.
Use when
Two billing periods with different copy per period.
Avoid
Prices with different character counts per period (the roll mis-aligns).
Seam
Same as static pricing.
Supercharge
Save badge in accent wash; switch reads the shared `.switch`.
Portability
Topic-free.
rico/RicoTechStackRProductPROOF (tools)

Stack cards

Card art is the caller’s; the bundled photographs stand in.

Rendered live

Proof

Built with

Astro 7
Astro 7framework
Tailwind 4
Tailwind 4utilities
Playwright
Playwrightevidence
Sharp
Sharpimages

Stack cardsground

Character
Playful, tall cards.
Use when
Four to eight tools with 200×288 art.
Avoid
Cards without art; more than eight.
Seam
Header opens it; airy.
Supercharge
Lift and accent ring on hover only.
Portability
Art is topic-bound.

Now put them in a score.

ComposeTextures