Style sheet · Phase 1 SpecimenExample data
FRAME/12 Style Sheet
An interface language taken from page composition and cel-animation production: ink-framed panels, gutters whose width means something, screentone instead of gradients, and motion held on twos.
The sheet
Recovered revenue
$120,054
Up 11.4% vs prior 30 days
Show 30-day specimen data table
| Date | Recovered revenue |
|---|---|
| Oct 31, 2026 | $5,654 |
| Oct 30, 2026 | $5,179 |
| Oct 29, 2026 | $4,720 |
| Oct 28, 2026 | $4,038 |
| Oct 27, 2026 | $3,998 |
| Oct 26, 2026 | $4,187 |
| Oct 25, 2026 | $5,029 |
| Oct 24, 2026 | $5,325 |
| Oct 23, 2026 | $5,065 |
| Oct 22, 2026 | $3,837 |
| Oct 21, 2026 | $3,241 |
| Oct 20, 2026 | $3,231 |
| Oct 19, 2026 | $3,127 |
| Oct 18, 2026 | $4,146 |
| Oct 17, 2026 | $4,107 |
| Oct 16, 2026 | $3,719 |
| Oct 15, 2026 | $3,756 |
| Oct 14, 2026 | $3,617 |
| Oct 13, 2026 | $3,582 |
| Oct 12, 2026 | $3,123 |
| Oct 11, 2026 | $4,276 |
| Oct 10, 2026 | $4,048 |
| Oct 9, 2026 | $3,739 |
| Oct 8, 2026 | $3,457 |
| Oct 7, 2026 | $3,499 |
| Oct 6, 2026 | $3,166 |
| Oct 5, 2026 | $3,299 |
| Oct 4, 2026 | $3,686 |
| Oct 3, 2026 | $4,351 |
| Oct 2, 2026 | $3,852 |
Incremental profit
$38,776
Up 8.7% vs prior 30 days
Margin on recovered orders, after offer costs
Daily profit
Conversion lift
+0.55 pp
0.00 pp change vs prior 30 days
Checkout conversion vs. holdout group
Daily lift
Dark: flashback gutters
Gutters turn black, the print convention for flashback pages. Shown on 7 days with one intervention selected.
Recovered revenue (7 days)
$32,805
Up 17.3% vs prior 7 days
Show 7-day dark specimen data table
| Date | Recovered revenue | Exit-intent offer |
|---|---|---|
| Oct 31, 2026 | $5,654 | $2,509 |
| Oct 30, 2026 | $5,179 | $2,003 |
| Oct 29, 2026 | $4,720 | $1,816 |
| Oct 28, 2026 | $4,038 | $1,634 |
| Oct 27, 2026 | $3,998 | $1,569 |
| Oct 26, 2026 | $4,187 | $1,807 |
| Oct 25, 2026 | $5,029 | $1,958 |
Phone: single-column reading order
Panels stack in reading order below 760px; the gutters keep their meaning.
Recovered revenue (90 days)
$331,895
Up 9.5% vs prior 90 days
Revenue by intervention
Last 90 days · stacked mobile layout
Panel grammar
Gutter width tells the reader how panels relate before any label is read. Panel size tells them what matters most.
Construction details
Panel content framed with 2.5px mitered ink.
1. Cut numbers
Set into the frame line, numbered in reading order. Visual order, reading order, and code order always match.
Profit
Conversion lift
2. Diagonal pair
Two related metrics share one slanted 12 px gutter, the visual cue for “these belong together”.
3. Screentone
Halftone dots replace gradients and transparency. Density carries emphasis; it prints and survives grayscale.
Show construction detail chart data table
| Date | Recovered revenue |
|---|---|
| Oct 31, 2026 | $5,654 |
| Oct 30, 2026 | $5,179 |
| Oct 29, 2026 | $4,720 |
| Oct 28, 2026 | $4,038 |
| Oct 27, 2026 | $3,998 |
| Oct 26, 2026 | $4,187 |
| Oct 25, 2026 | $5,029 |
4. Speech balloon
Annotations are balloons with a tail to the point they describe, not floating tooltips.
Up 11.4% vs prior 30 days
5. Marker
One flat yellow, always under ink text. It flags; it never colors a line or a chart.
6. Range control
Cells like an exposure sheet. The marker inverts what it covers, so labels stay legible at every pose. Try it.
Motion on twos
Discrete changes hold each pose for two frames at 24 fps: 12 poses a second, 83 ms each. Hover, scrolling, and typing stay immediate.
| Grammar | Timing | Used for |
|---|---|---|
| Stepped | 3–4 held poses, 250–333 ms | Range switch, list reveal, chart redraw, badge pop with a two-frame impact burst |
| Cut | Instant | Reduced-motion settings; editorial scene changes |
| Smooth | Continuous easing | Only where the hand is moving: hover, crosshair, scrolling |
Type
$120,054
--font-f-display · display numbers and titles, used sparingly
Abandoned-cart email recovered the most revenue this month.
--font-f-body · body copy and intervention names
INCREMENTAL PROFIT · CUT 02 · ▲ 8.7%
--font-f-mono · labels, cut numbers, tabular values
Palette
| Token | Light | Dark | Role |
|---|---|---|---|
Paper --f-panel | #FFFFFF | #19191A | Panels and sheet |
Ink --f-ink | #121212 | #F1F0EA | Frames, text, screentone |
Ink 2 --f-ink-2 | #4B4B4B | #B9B8B1 | Labels and secondary text |
Gutter --f-sheet | #FFFFFF | #050505 | Space between panels |
Grid --f-grid | #E3E3E3 | #2C2C2D | Chart rules, row dividers |
Marker --f-marker | #FFD60A | #FFD60A | The one accent, always under ink text |
Desk --f-desk | #E2E3E5 | #000000 | Outside the sheet |