SimurgArray/branding

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).

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.