Design notes · refinements from the v2 canvas to the prototype

Prepared 16 September 2026. Builds on the publication structure (8 Sep) and the wireframes and prototype brief (9 Sep). Each item states what changed against the v2 canvas and why; the token file and the component library carry the result.

Identity and furniture

• One wordmark per script. The v2 masthead had a logo image above a text wordmark above a tagline, so the name appeared twice. The prototype draws the name once, as an SVG outline in the script of the edition: سەکۆ (Amiri 700) in the Arabic-script editions, SEKO (Literata 600 at opsz 72) in the Latin editions. Neither mirrors. The favicon keeps the Sorani wordmark as the origin mark. The tagline sits beside the mark on one line. (Kami's direction on review, ADR 0015; an earlier bilingual lockup, ADR 0005, was withdrawn.)
• The masthead is set like a print masthead (ADR 0026, 20 Sep). Three blocks in a row: the wordmark at the start edge with the tagline beneath it, at up to 96 px; today's contents as a labelled column behind a hairline (front page, from 940 px); the dateline at the end edge behind a hairline, with the weekday, the date and the edition name and cadence. A double rule in ink closes the masthead; the section row is ruled and its items are divided by hairlines; the strap's controls are divided too. Issues are not adopted (D1 open), so there is no issue number. Numerals and date are in the edition's script; no tracked Latin labels in an Arabic-script edition.
• Editions move out of the masthead into the utility strap as one control that names the current edition and opens a scoped list. Index pages list Tier 1 and 2 editions; an article lists only the editions holding a version; Tier 3 editions appear on the editions index only. This removes the "Ar/En" dead anchors of the live site by construction.
• Section row: seven ruled cells across the measure (ADR 0029, 26 Sep), set in ink at 1 rem with 6 px colour dots; the hover and active rule and the active label take the section colour. The four indexes (dossiers, authors, topics, archive) follow as a muted group behind a hairline, so every index is one click from the masthead from 600 px; the index pages mark their own item. The row follows the masthead as its sibling and stays at the top of the viewport from 600 px. Between 600 and 940 px the cells pack from the start edge and scroll and only the dossiers link of the group is shown; below 600 px the phone menu holds the indexes and the active section is ordered first so it is pinned at the start edge. The order is otherwise the same on every page (WCAG 3.2.3). Books is violet, per the structure. Children, the structure's eighth section, is not in the prototype (ADR 0022).
• Share (ADR 0030, 26 Sep): WhatsApp, Telegram, X, copy link and, where the browser offers it, the device's share sheet, in the article aside and as a menu in the reading header; every target carries the short link. X is isolated with bdi in Arabic-script editions. Copy and the share sheet are hidden until the script shows them.
• Target sizes (ADR 0031, 26 Sep): every control and stand-alone link is at least 24 px on a fine pointer and 44 px wherever any pointer is coarse, by padding and minimum size, never by type size. Below 600 px the footer's lists run as wrapped lines and the reading header's theme and text-size controls give way to the strap and reading mode.
• Utility strap and reading header carry the search (icon and label opening a field; full-screen below 600 px), a three-state theme control (system · light · dark) that shows its state in words, and the text-size control (three steps, persisted). Both controls are hidden until the script runs so no dead control is ever shown.
• Footer: the newsletter block, then four columns (identity and policy · sections · site · social and channels) plus a rule line with the copyright and the typeface credit, and the editors of the current edition named. The newsletter opens the footer of every page as a row (heading and line at the start, field and privacy line at the end; stacked below 600 px), so a subscription path exists on every page (ADR 0028). A Tier 3 edition names the language model in that slot.

Type

• Latin: Literata alone, using its optical-size axis (opsz 72 at 600 for headlines, opsz 7–14 at 400 for body) in place of the Lora and Literata pairing whose two text serifs sat too close in colour. Vazirmatn is the Persian body face; Amiri 700 and Scheherazade New 400 stand as in v2.
• Body sizes: 1.3 rem Scheherazade New at 2.05 for Sorani (the x-height is smaller than Vazirmatn's), 1.15 rem Vazirmatn at 1.9 for Persian, 1.12 rem Literata at 1.6 for Latin.
• Four fixed heading levels on every index page: lead h1 clamp(2 rem, 4.6 vw, 3.4 rem), band h2 1.65 rem, row h3 1.3 rem, list h4 1.1 rem. The v2 canvas had three near-identical levels between 1.2 and 1.7 rem. Headline leading 1.34 for Arabic script and 1.15 for Latin.
• Nothing renders below 11 px. Meta and labels are .84 rem in Vazirmatn and .78 rem in Plex; the v2 labels at .58–.6 rem with tracking are gone. Tracking is used only on the Latin SEKO in the lockup.
• Fonts are self-hosted WOFF2 subsets with font-display: swap and a system fallback stack (Noto Naskh Arabic · Segoe UI · Tahoma for Arabic script). No runtime request to Google Fonts: part of the readership is in Iran. Vazirmatn, Literata and IBM Plex Sans ship as single variable files. The Arabic-script faces carry the letters the editions write (Sorani, Bahdini, Persian, Arabic), the digits, Arabic punctuation and Latin-1, and Vazirmatn carries its Latin in the same file, so a Sorani page loads three font files (136 KB) and an English one two or three (117–127 KB); the budget checker counts the files a page draws, as the browser does (ADR 0033). Each page preloads the display and body faces it draws (Amiri 700 and Scheherazade New 400, or Literata), so the headline and the reading text paint in their own faces instead of swapping from the fallback; the interface face follows from the stylesheet (ADR 0034).

• Share cards (ADR 0032, 30 Sep). Every article version, section and front page has its own og:image: a 1200 × 630 JPEG rendered from the card template. The article card is portrait-led like the site: the author's headshot in black and white at the end edge, the outlined wordmark over a double rule, the section label, the headline in the display face and the byline with the date, under a band in the section colour. The front card is the masthead (wordmark, tagline, the section row); the section card sets the section name large in its colour with its description. Other pages use the edition's front card. The JPEGs are committed and checked for staleness, as the icons are (ADR 0018).

Colour and themes

• Dark theme is designed, not inverted. Section colours have a dark-theme set tuned for the dark paper; the dossier band lifts to #25272C rather than merging with the page; photographs receive a 6 % darkening overlay so white edges do not glare (tested on the manuscript, the Mahabad map and the children's illustration). The docs page computes every section colour's contrast against both papers so text in section colour is used only where it passes 4.5:1.
• Four light-theme values are darkened from the brief's table so that labels set in them pass the brief's own 4.5:1 rule on paper: opinion #D0641C → #B45112 (4.96:1), history #A96F1B → #946017 (5.19:1), children #1F8A7C → #1B796D (5.12:1; no longer shipped, ADR 0022), gold #B8892E → #906A22 (4.80:1). The dark set is unchanged (all pass). The dossier band uses a separate --gold-inverse (#E3B23C) on the inverted ground in every theme. The tokens page recomputes every pair.
• Sepia is a reading-mode theme only, defined in the token file alongside light and dark; its body contrast passes 4.5:1.
• Colour discipline stands from v2: section hue on labels, rules, the progress bar and the row hover only; brand blue on links, focus and UI accents; gold on dossier labels; everything else is paper, ink and rules. Semantic ok · warn · held colours exist for editorial screens only, each with a background tint for chips.

Front page

• Lead band at 2.3 : 1. From 600 px the lead is two columns, text at the start edge and the 3:2 hero with its credit at the end edge, so the band stays short; below 600 px the hero follows the text and the headline is within the first viewport at 360 × 640. The side column carries the opinion column (2 px section rule, standfirst), the analysis row and a third row from another section, headline and meta only. A strip of four headlines, ruled between, follows the lead band (ADR 0027). The hero is the front page's own photograph, never the lead author's portrait; the author appears in the byline at 32 px (ADR 0023).
• Section band of three image rows from one section, chosen at build as the first section with three unshown articles; the columns are divided by hairlines (ADR 0027).
• Dossier band uses the --panel-inverse token with a gold label and an ordered parts list; on a Tier 3 or thin edition it lists only the parts that exist.
• Depth: after the dossier band, a latest list of twelve rows across sections, then the newsletter block and the house-promotion strip in the calls position (ADR 0028), then blocks for the sections not yet shown, two rows each, so every section appears at least once. An empty block prints the section's empty-state string rather than nothing.
• Pinned lead state renders as a separate page for review (/ckb/states/pinned-lead/).

The image is the author

• Every article's image on the live site is the author's square portrait (1000 of 1007 posts; no landscape photographs). The first build assumed 3:2 lead photographs, which the corpus does not have. The prototype is now portrait-led: the headshot leads rows (32 · 48 · 64 · 96 px), the section featured row (160 px), the article byline (96 px, with the first sentence of the bio), the dossier band and the social cards; the front-page lead is the exception, where the hero photograph is the image and the author sits in the byline (ADR 0023). Portraits are black-and-white at every size (ADR 0024). Initials appear only where the source uses the generic Seko mark. The lead-figure and image-crop components stay in the library for the corpus's inline images and future photography (ADR 0016).

Reading page

• Composition: section label with rule → headline ≤ 24 ch → standfirst ≤ 52 ch (60 ch Latin) → byline with 32 px portrait (48 px for opinion columns), date, modified date, reading time, translator line → 3:2 lead figure with caption and credit → body at 42 em with the pull quote floated to the end margin at ≥ 1100 px → tags → dossier navigation → related (three rows, dossier siblings first) → citation, newsletter, house unit → footer. The aside holds the author card, the editor's pick or current dossier, and the share block.
• Every block in the content model is drawn: paragraph, h2, h3, pull quote, block quote with citation, list, figure, table with tabular numerals and horizontal scroll, footnotes with return links, attachment block, book block (2:3 cover or typographic fallback), Q/A block with speaker labels in the UI face.
• Bidi: Latin runs inside Arabic-script paragraphs are isolated at build in the body sans at .82 em; the test paragraph in the lead essay carries a Latin title, a year, a URL and a Sorani parenthesis in one sentence.
• The in-article house-promotion slot is placed after the paragraph nearest 40 % of the body, never inside a list or quote, and suppressed on articles under 600 words.
• Reading mode removes all furniture and keeps label, headline, standfirst, byline, body, figures, footnotes, the progress bar and a control bar (bottom on small screens, end margin on large): text size in five steps, line height in three, measure in three at ≥ 940 px, theme (system · light · dark · sepia), font (Naskh · sans), exit. Escape exits; the position is retained; settings persist per device; the URL is unchanged. read.html beside every article is the script-free view.
• Print stylesheet produces headline, byline, date, body at 11/16 pt, inline pull quotes, figures with captions, footnotes at the end, the citation with URL and short link in the footer.

The language model in the interface

• Translation notice in three variants with one form (rule, sentence, link): machine on a muted ground; post-edited and human as a rule and a line, each naming the person. The byline repeats the translator credit. Machine versions are noindex and are shown only in the Tier 3 sample (German), matching the structure: Tier 2 editions publish human or post-edited versions.
• Tier 3 line under the masthead names the language model and lists the Tier 1 and 2 editions. The About page in every edition carries "How Seko uses language models".
• Corrections print in place with the date; on a translated version the note says whether the correction was to the original or to the translation.
• Editorial screens: the proposal chip is the unit of every generated field (generated · accepted · edited · held, with a distinct hue and always a reason string for held); confidence is a short bar and the number is in the provenance popover; hovering a proposal highlights its evidence span in the body; the rules table renders as switches; a switched-off agent shows its tasks as held.

Behaviour without script

• Navigation, the edition control, search (a plain form to the search page), share links, the newsletter form and the footer work as plain HTML. Theme, text size, progress, reading mode, copy controls and client-side search are enhancements added by one deferred script. The edition and search menus are <details> elements.

What the prototype does not settle

• Portraits are the contributors' own, as published on the live site; contributors without an author page carry the headshot that recurs on their articles and are marked as proposed persons for the editor. The build cleans them: the Seko mark, the card frame and the name captions removed, one face-centred framing for all (ADR 0021).
• Article text is real (32 records from the export); standfirsts are extracted from the opening paragraph and marked proposed; topics are candidate title terms; slugs are proposed transliterations. English and German versions are machine translations with the notice. مۆدێلی زمانی for "language model" is to be confirmed by the editor.
• AVIF is left to the asset pipeline; the prototype ships WebP with JPEG fallback.
• Pagination renders when a section exceeds twenty rows; the prototype corpus does not, so the component is shown in the library.
• Search is a client-side filter over the edition's index in the prototype; the build decides the production search.