Cats of Kochi — the Airbnb-faithful system

Labelled catsofkochi-airbnb-design-system-2026-08-09 — a different system from the earlier Guardian-era one (guardian-design-system-v1), stated here so nobody reviews the wrong one by name. 13 pages, one shared faces file per font family, no build step and no JavaScript. 12 of the 13 kits now show the current typeface, Figtree. One does not, deliberately — read the gap below before judging its type.

Known gaps — read this before reviewing

• ⛔ facts_strip is three competing proposals, not a decision. Every other page here shows one settled design. That one shows A, B and C as alternatives to the same problem, and the owner has not picked one (AIK-90 is open). ⚠️ Do not review it as if B were the plan — B is only the recommendation, argued for at the foot of the page. It also contains the one deliberately fictional thing on this site: a "we went and the board was right" specimen, labelled as made up, because no venue has ever been in that state.
• ⭐ type_before_after still shows Noticia Text, and stays that way on purpose. The owner decided, 9 August 2026: Cats of Kochi is Figtree, all-sans — no second family (the other twelve kits carry that decision as of today; they were rebuilt from the Guardian-era serif this same day). This one kit is different in kind, not just behind: it is a dated 5 August essay arguing for Noticia Text — file-size measurements against eight fonts, a check for the ₹ glyph, a Guardian-line-spacing table — not a live specimen. Repointing its face without rewriting that whole argument would make the essay describe a font it no longer shows, which is worse than leaving it as history. Its listing below says so.
• The Android fallback arm is unverified by rendering. Fallback metrics for Noto Serif and Roboto are derived from @capsizecss's published metrics, not measured on an Android device — nobody here has one to measure against.
• This site renders in standards mode; the Claude Design preview does not. Every kit published there reports document.compatMode: "BackCompat" (quirks) because that host's serve wrapper injects markup ahead of the doctype — not our markup, not fixable there. Where the two differ, trust this one.

Changelog

• 9 Aug 2026 (latest) — a new page, facts_strip, awaiting a decision. The trust signal the site does not have yet: how a fact says who checked it, when, and whether the posted board disagrees. Three shapes, drawn on the two real records that carry hours — Bastion Bungalow (observed_contradicts_official, the site's only instance of the moat) and Paradesi Synagogue (official_only, read from the venue's own site). Built on the Airbnb trust-card grammar and explicitly not its machinery: no stars, no review counts, no "Guest favourite", because there is no crowd here to average.
  • The two verbs are ranked, and only one is amber. "We went and looked" is a stamp — two or three words, a date, an amber fill, once per place. "We read their own site" is a citation — 14px, secondary grey, no fill, the same .v-checked register venue.html already ships. This follows the owner's own 9 Aug correction that provenance was "too loud"; the weaker claim does not get the stronger one's clothes.
  • The refusal is designed for first, not last. 23 of the 26 place records have no hours, so the page shows all four states and sets the refusal at body size in primary ink — the same weight as the facts around it.
  • ⚠️ A measurement that counts against variant A: three trust-card cells leave about 109px each in a 327px column, so the cell labels and the date wrap to two lines. Airbnb carry the same component at 10–12px labels; this system's floor is 14px.
  Verified in real Chrome at 375px before publishing: document.compatMode === "CSS1Compat", zero horizontal overflow, all 7 links at least 44px on both axes, tokens resolving from their definitions rather than their fallbacks, and the type confirmed as real Figtree against a negative control (1143.92px vs 1027.83px for a family nothing declares). ⛔ Not verified: nobody has read it on a phone in Kerala sun.
• ⭐ 9 Aug 2026 (later) — the colour-usage review, part two: links, the payment button, red, and the checked stamp. Five more findings from the same owner review, fixed across every kit, the shared components and tokens/theme.css, then reconciled onto the live site (src/styles/global.css):
  • Amber removed from every ordinary link — nine kits had a { color: var(--amber-ink) }, which painted every link amber and stopped the colour meaning anything. Now a two-tier ladder ranked by underline weight, not hue: ordinary links get a 1px grey underline; the one link per screen that genuinely advances a decision gets a 2px amber one, capped at two. The live site's global.css had the same one-tier bug on its own a{} rule and now carries the identical contract, plus a .link--decision class for the amber tier (unused today — no correction/"report a change" link is built on the live site yet).
  • Pay ₹0,000 in the itinerary kit was amber-filled — the newsletter signup's colour, on the highest-stakes click on the site. Now ink, matching --action-primary-bg; rank stays legible without colour because both buttons are the same 52px pill height.
  • Red removed from non-error states, including an honest refusal — red is the grammar of an error, and "we don't know" or "shuts in 40 minutes" are not errors.
  • The "Checked" stamp and a provenance/source-citation line no longer share one amber fill — they were competing for the same signal. The citation now supports the stamp (ink text, underline) instead of duplicating it.
  • A landmark split: data-source-checked now marks a source-citation sentence separately from data-checked-on, which marks only a short, columnar date stamp — so an accessibility scorer checking tabular figures doesn't conflate "when we visited" with "when we read a citation."
  • Homepage's "Getting around" and "today" link-rows were showing a persistent underline under the link text stacked a few px above the row's own divider line — two grey lines read as clutter on every row. The divider already carries the separation; the underline now shows on hover only.
  Verified: npm run build and node scripts/check-kits.mjs — 177 passed, 0 failed, 31 documented skips.
• ⭐ 9 Aug 2026 — a decorative amber wash, removed from every kit. The owner caught it live on this site: a facts block sitting in a solid amber-fill panel with a 4px amber border, next to a specimen arguing for Airbnb's actual style — near-white cards, thin grey hairlines, colour spent almost nowhere. It was real and repo-wide, not one kit's mistake: 12 instances across every page here, plus the live site's own .cat-line byline and call-to-action card, which carried the same fill (a milder, borderless form, but shipping). All now render background:var(--paper); border:1px solid var(--rule) — no wash, no accent border. The one deliberate amber fill that stays is the "Checked" stamp — a real verification signal, the one case theme.css's own rules call out as legitimate, and it reads clearly on the new near-white background where it nearly vanished on the old tinted one.

System reference

• System Every token, face and component in one specimen sheet — start here.
• Type change, before and after The 5 Aug argument for Noticia Text, over the earlier system serif — dated history now, since Figtree superseded Noticia the next day. See the known gap above.
• Controls & furniture Buttons, links, form controls and chrome, isolated from any one page.

Listing pages

• Homepage The site's front door.
• Index & browse The full-listing browse mode.
• Today in Fort Kochi The free daily page.
• The paid itinerary The itinerary-engine-backed page.

Venue pages

• Venue page Paradesi Synagogue — the Airbnb-faithful venue page, with the real hero photograph and the posted-vs-observed hours moat.
• Venue page (UI kit) The component-level venue kit.
• Venue pages — three shapes Known/missing/contradicted-hours states, side by side.
• The checked-on stamp — three ways How a fact says who checked it, when, and whether the posted board is wrong — drawn three ways on two real records, plus all four states the component has to hold (23 of 26 places have no hours at all). Pending owner approval: A, B and C, none picked.

Told pages

• A told page "The mutton walk" — the full editorial article shape.
• Told page — listing mode Told pages as they appear in a list.

Answer pages

• Answer page Kochi Water Metro — the direct-answer page shape.