branding: SimurgArray brand kit (mark, wordmark, lockups, icons, templates, guide)

Frontal dotted simurg on a bead grid: gold body and wings, three-dot crown,
red / gold / green channel plumes with peacock eyes. Detailed (31x27), simple
(11x10) and micro (7x7) drawings; dark, light, gold, black, white versions;
outlined Noto Sans wordmark; favicon and app icons; README banner, social
preview, avatar, featured-image template, report corner mark, CLI banner.
Checks: WCAG contrast table, protan/deutan simulation, icon sizes, family
sheet. Blog featured images regenerated with the new mark for consistency.
Geometry shared in scripts/brand/simurg_mark.py.

branding/README.md

@@ -0,0 +1,171 @@
+# SimurgArray brand guide
+
+Everything here is generated by `scripts/brand/make_brand.py` (logos, icons, templates, checks) and
+`scripts/blog/make_featured_images.py` (blog images). The mark geometry lives in one place,
+`scripts/brand/simurg_mark.py`, so every file shows exactly the same dots. Artwork is released under CC BY 4.0; the
+fonts are Noto Sans and Noto Sans Mono (SIL Open Font License 1.1).
+
+![Horizontal lockup](logo/png/lockup_horizontal_dark.png)
+
+## The story in three sentences
+
+In Attar's *Conference of the Birds*, thirty birds search for the Simurg and find that "si murg" means thirty birds:
+the Simurg was all of them together. A genotyping array is the same idea, hundreds of thousands of small beads that
+only mean something when read together. SimurgArray is the tool that reads them together, openly.
+
+Tagline: **Thirty birds, one picture.**
+
+## The mark
+
+A simurg seen from the front, wings raised, drawn only with round dots on a square grid, the way beads sit on a
+BeadChip.
+
+* **Gold body, wings and crown.** Gold is what you get when the two scanner channels meet.
+* **Three tail plumes:** red on the left (the red channel), gold in the middle, green on the right (the green
+  channel). Each ends in a round peacock eye.
+* **Three dots on the head** form a small crown. Nobody has to notice it.
+
+Three drawings of the same bird, chosen by size:
+
+* `mark` (31 x 27 dots): 100 px and larger, banners, lockups, print.
+* `mark_simple` (11 x 10 dots): 24 to 100 px, report corners, small UI.
+* `mark_micro` (7 x 7 dots): 16 px favicon only.
+
+Colour versions of each, in `logo/` as SVG and in `logo/png/` as PNG:
+
+* `dark`: gold #D4A017 with red and green plumes, for indigo or other dark backgrounds.
+* `light`: deep gold #A87A00 with red and green plumes, for paper or white.
+* `gold`, `black`, `white`: single colour, for stamps, embossing, merchandise, fax machines that still exist.
+
+The SVGs contain only circles, no embedded images and no fonts, so they render the same everywhere.
+
+### Wordmark and lockups
+
+"Simurg" in the text colour and "Array" in the accent colour, Noto Sans SemiBold, outlined to paths so no font is
+needed. On dark backgrounds the accent is gold #D4A017, on light backgrounds gold ink #8C6500.
+
+* `lockup_horizontal_*`: mark left, wordmark right. The default.
+* `lockup_stacked_*`: mark above, wordmark centred below. For square spaces.
+
+Clear space around any lockup: at least the height of the mark's head (about three dot rows) on every side.
+
+### Do
+
+* Keep the dots round and on their grid.
+* Keep the red plume on the left and the green plume on the right.
+* Use the light version on light backgrounds; plain gold on paper is too faint (contrast 2.18).
+* Scale the whole mark; pick the simple or micro drawing when the dots would get smaller than about 2 px.
+
+### Do not
+
+* Recolour the plumes, add gradients, shadows, glows or outlines.
+* Turn dots into squares or connect them with lines.
+* Rotate, mirror or stretch the mark.
+* Put the mark on busy photos.
+* Combine it with DNA helices, crosses, pills or any clinical imagery. SimurgArray is a research tool.
+* Use the logos, colours or product names of any genomics company as visual elements. Illumina and Infinium appear
+  only as plain words describing compatibility.
+
+## Colour
+
+Brand colours:
+
+* **Night indigo** #1E2240: backgrounds (most of the work happened at night). Deep indigo #12142A for gradients.
+* **Paper** #F7F5EF: light backgrounds and text on dark.
+* **Simurg gold** #D4A017: the bird, accents on dark.
+* **Gold deep** #A87A00: the bird on light backgrounds.
+* **Gold ink** #8C6500: accent text on light backgrounds.
+* **Channel red** #C8453A and **channel green** #2F8F5B: the plumes and the bead grid only. Never for text.
+* **Muted on dark** #A3A7C9 and **muted on light** #5A5E7E: secondary text.
+
+Rough proportions on a dark page: indigo 80, paper 10, gold 7, red and green 3 together.
+
+Every text colour passes WCAG AA (4.5) and every graphic colour passes 3.0 on its background. The full table with
+the computed ratios is in `checks/contrast.md`.
+
+### Charts
+
+Red against green is exactly the pair that red green colour blind readers cannot separate, and in genotyping it is
+also the most tempting pair. So charts never use the channel colours to tell data apart. Use the Okabe and Ito
+palette with a second cue:
+
+* AA: vermillion #D55E00, circles.
+* AB: bluish green #009E73, triangles.
+* BB: blue #0072B2, squares.
+
+Always add shape, position or a direct label as well as colour. `checks/colour_vision_check.png` shows the mark and
+an example cluster plot under simulated protanopia and deuteranopia (Machado et al. 2009). The bird stays readable
+because its shape carries it; the two coloured plumes become similar but keep their left and right positions; the
+chart stays readable because of the shapes.
+
+## Type
+
+* **Noto Sans** for everything people read. Headings SemiBold or Bold, body Regular.
+* **Noto Sans Mono** for anything a user might paste into a terminal, file names, and small labels such as
+  "PART 3".
+* Numbers in tables use tabular figures (`font-variant-numeric: tabular-nums`), so columns of call rates line up.
+
+Suggested sizes for the web: body 17 px with 1.6 line height, H1 40 px, H2 28 px, H3 21 px, code 15 px, table text
+15 px. Reports: 13 px tables, 12 px captions.
+
+## The dot grid
+
+New illustrations are built from the same material as the logo.
+
+* Background grid: dots every 18 px (at 1200 px width), radius 1.6 px, alternating red and green at 14 % opacity
+  over the indigo gradient.
+* Foreground dots: radius 40 % of the cell, so neighbours never touch.
+* Colour by meaning: gold for the subject, red and green only for things that come from the two channels, dimmed
+  gold or indigo mixes for "background" subjects.
+* Motion is suggested with trails of shrinking, fading dots, never with lines.
+* One subject per image. Empty space is part of the grid.
+
+## Templates
+
+In `templates/`:
+
+* `featured_template_1200x630.jpg`: WordPress featured image and social preview for posts. Title on the left in Noto
+  Sans Bold (58 px, shrinks to fit a 540 px column), "PART N" above it in gold mono, footer with three dots, the name
+  and the tagline. The five blog images in `blog/images/` follow this layout, each with its own small motif.
+* `social_preview_1280x640.png`: the repository preview image.
+* `readme_banner_1280x320.png`: the top of the README.
+* `avatar_512.png`: square avatar; the mark sits inside the central circle, so round crops are safe.
+* `report_corner_mark.svg` and `report_corner_mark.html`: the small mark for HTML QC reports. It is always shown with
+  the software version and the first 12 characters of the run manifest checksum. The bird is for recognition; the
+  checksum is what actually proves anything.
+* `cli_banner.txt`: six lines, 46 columns, plain ASCII, for `simurg --version` or a first run.
+
+Icons in `icons/`: `favicon.ico` (16, 32, 48), PNGs at 16, 32, 48, 180 (Apple touch) and 512, all on a rounded
+indigo tile. `checks/icon_sizes.png` shows them side by side.
+
+## Making a new featured image
+
+1. Add the post to `POSTS` in `scripts/blog/make_featured_images.py`: file stem, "Part N", the title with `\n`
+   where lines should break, and a motif.
+2. Reuse a motif or write a new one: draw the mark with `draw_mark`, add at most one supporting element.
+3. Run `python3 scripts/blog/make_featured_images.py`. Files come out at 1200 x 630 and about 100 KB.
+
+## Voice
+
+* Plain, exact English. Short sentences. Numbers instead of adjectives.
+* Every claim sits next to its limitation, in the same paragraph.
+* Humour only as a faint smile.
+* No em dashes, en dashes or hyphens in prose; rephrase instead. Hyphens in code, file names and options are fine.
+* Never: revolutionary, cutting edge, AI powered, next generation, seamless, unlock.
+
+Examples:
+
+* Yes: "Concordance with 30x sequencing was 99.44 %, against 99.46 % for the vendor's cluster file."
+* No: "Best in class accuracy that rivals commercial solutions."
+* Yes: "Research use only. The PGx report shows the evidence behind every call."
+* No: "Personalised medicine, unlocked."
+
+## Acceptance checks
+
+1. **Recognisable at 48 px, distinctive at 16 px:** see `checks/icon_sizes.png`. The simple and micro drawings were
+   drawn by hand for these sizes instead of scaling the detailed one down.
+2. **Contrast:** all text pairs pass AA, all graphic pairs pass 3.0 (`checks/contrast.md`); plain gold on paper is
+   the one pair that fails, and the guide forbids it.
+3. **Colour vision:** `checks/colour_vision_check.png`.
+4. **One family:** `checks/family.jpg` puts the five blog images and the templates side by side.
+5. **No dashes in prose:** this guide and all generated text were checked for em dashes, en dashes and hyphens.