Tabloto · Bento: one material → all channels → "yes"

(a) The reusable prompt (EN, brand-neutral)

Build a single-file, dark-first homepage for a product whose promise is a FLOW
("one input → many outputs → a human approves"). The page IS an interactive bento
grid: the cards do not describe the product, they perform it.

TRENDS
- Bento grid: one dominant card (the flow demo), one tall supporting card (the
  approval queue), compact utility cards (rules/guardrails, the automation share,
  privacy, keys, audience, CTA). Every card has a different job.
- Dark-first: layered neutral surfaces derived from the brand's darkest text colour
  (never #000). Light theme via prefers-color-scheme AND a remembered toggle
  (localStorage in try/catch). Same brand accent in both; a lighter accent tint
  for small text on dark so it passes AA.
- Purposeful micro-interactions: every state change explains something
  (idle → working → waiting → approved / returned → done). No decorative motion.

LAYOUT (12 columns desktop → 1 column ≤760px; HTML order = reading order)
+----------------------------------+------------------+
| HERO: huge 3-line headline,      | STEPS 1-2-3-4    |
| last word = the approval word,   | (ol, current step|
| underlined by an SVG stroke that | highlighted) +   |
| draws itself when all approved   | aria-live status |
+----------------------------------+------------------+
| FLOW (dominant, 2 rows):         | APPROVAL QUEUE   |
| source material card + 4 ghost   | (2 rows): empty  |
| channel slots (dashed). Button   | state → 4 rows   |
| "Split into channels" → source   | [Return] [Yes]   |
| compacts, tiles FLIP out of it   | counter "n of 4" |
| into the slots, each tile shows  | "Yes to all"     |
| its status line                  | → success panel  |
+-----------+-----------+----------+------------------+
| RULES     | ~90 %     | PRIVACY (local only)        |
| chips get | 10-seg bar: 9 machine, 1 human that     |
| ticked    | fills by approvals                       |
+--------+--+-----------+--------+--------------------+
| KEYS   | AUDIENCE / first users | CTA (accent card)  |
+--------+------------------------+--------------------+
footer: concept label

STATE MACHINE (one source of truth, mirrored in every card)
idle → splitting (button busy, label "Working…", tiles "checking", machine
segments fill, rule chips tick one by one) → review (queue built, tiles
"waiting for yes") → per item: yes (toggle, check-mark stroke draws, row tint
sweeps left→right) / returned (dashed border + text, never colour alone)
→ done when all yes (headline underline draws, success panel, reset button).

MUST
- Real brand content only; drop any card that has no source content.
- One h1; semantic sections with aria-labelledby; ol for steps; ul for queue.
- All states reachable by keyboard; :focus-visible ring; aria-pressed on toggles;
  aria-busy on the working button; one polite live region narrates the flow.
- [hidden]{display:none!important} so buttons with display:flex still hide.
- prefers-reduced-motion: no FLIP, no transitions, state still fully legible.
- Container query on the queue card (rows stack when the card is narrow).
- WCAG 2.2 AA in both themes (check after transitions settle); no horizontal
  scroll at 360px; self-hosted fonts; no CDN; < 1 MB without fonts.
- Optional ?stanje=pregled|gotovo URL switch that jumps to a still frame for
  gallery screenshots.

NEVER
- 12 identical cards, animation in every card, glass/purple gradients,
  information only on hover, magnetic buttons, colour as the only signal,
  invented numbers, customers, testimonials or logos.

(b) Brief for Tabloto

• Idea: the page doesn't tell Tabloto — it does it. One material unfolds into a post, video, blog and press release; the brand book ticks off the style words; drafts wait and the visitor says "yes" (or sends back for correction). When all are "yes", a line is even drawn under the "yes" in the heading.
• Heading (draft): "One material. All channels. One "yes"."
• Content by cards: content and distribution dashboard · the 4-step path · material → 4 channels (post, video, blog, press release) · the person says "yes" and decides · the voice "Simple, easy, minimal." + 4 style words · around 90% automatic · personal data — only on local AI · every client — their own keys · for organisations that publish across many channels; the first — (the first clients — not shown publicly without consent) · tabloto.eu.
• Colours: from tokens.json — #1F6FEB (accent/button), #14202E (text → becomes surface in dark theme), #F2F5F9 (secondary background → becomes text in dark theme), #4A5868 (secondary text in light theme), #FFFFFF. The dark levels (#0B131D, #1B2A3B, #22344A) and the light shade for small accent text (#7DAEFF in dark, #1A5BC4 in light) are derived from them for contrast.
• Font: Manrope (from ../_obshto/fonts/, with locl BGR) for everything. Brand labels are in JetBrains Mono, which is forbidden in the gallery — here they are Manrope 700, uppercase, spaced line, tabular figures.
• Logo: "Tabloto" typography (as suggested by the brand book) + four 2×2 squares (board), the latter as an accent — decorative, not a logo.