Palette
- Ink
- #0d0d0d
- Blood
- #d92323
- Maroon
- #732424
- Smoke
- #7b7b7b
- Paper
- #ffffff
Ink is the stage, blood is the voice, paper carries the words. Maroon and smoke stay in supporting roles — borders, panels, secondary text.
Typography
- title · ransomTake Over
- 2xl · 700 italicSection voice
- lg · 700Sub-heading and strip titles
- base · 400Body text — Arsenal, 1rem, roomy leading for light-on-dark.
- sm · 400Table data and notes sit one step down.
- xs · 700 capsColumn headers and tags
One ransom-note title per page, hand-dealt from paper, ink and blood cut-outs. Everything below it is plain Arsenal — the loud frame ends where the data begins.
Buttons
The P5R parallelogram: the shape slants, the label stays level. Hover flips to paper; focus draws the white outline (try Tab).
Filters
Chips toggle; pressed chips fill blood. Every tool shares this bar so filtering feels the same everywhere.
Data Table
| Shadow | Persona | Lv | Weak | Drops |
|---|---|---|---|---|
| Bedside Brute | Bicorn | 4 | Nuke | Horn of Lechery |
| Calm-Faced Puppet | Jack-o'-Lantern | 2 | Ice, Wind | Burnt Remains |
| Cavorting Genie | Pixie | 2 | Gun, Nuke | Faint Wing |
The calm content: level rows, tabular numerals, no tilt. Wide tables scroll sideways inside their own rail instead of breaking the page.
Checklist & Sync
This list is really saved: it writes through the same sync system the tools will use. Tick a box, watch the badge in the strip pulse, then open this page on your phone — the ticks follow within a minute. The counter in the strip rolls as you go.
Save Badge
The four states, always in the strip's right corner. The live one above is real — tap it for plain-language detail, last-sync time, and the Export / Import backup buttons.
Motion
- EntranceStrip drops, letters stamp, sections rise — done in under a second.
expo.out - FeedbackStrikes, rolling counters, badge pulse — motion rewards actions.
120–380ms - RespectPhones get trimmed durations; “reduce motion” devices get none.
prefers-reduced-motion