Skip to content

Brand: replace placeholder logo with a designed visual identity #30

Description

@nmercogl

Summary

Replace the placeholder logo with a designed visual identity, and wire it into the docs site — which currently has no logo or favicon configured at all.

Why now

  • docs/assets/logo.png is 6,917,388 bytes (6.9 MB) and is displayed at 200 px wide. It was committed as a placeholder (docs: add logo placeholders) and never replaced. Every visitor to the docs home page and to the PyPI project page downloads it.
  • It is a raster on a black ground only, so it cannot work against the site's light palette.
  • zensical.toml sets neither theme.logo nor theme.favicon, so simulatte.dev currently serves Zensical's default book icon in the header and its stock favicon.
  • Nothing generates an og:image, so links to simulatte.dev unfurl with no preview card.

The identity

A logotype of the name set in JetBrains Mono 500, lowercase, at a shell prompt: a >, the word, and a blinking block cursor. The u doubles as a cup — three curls of steam above it, a saucer beneath. The icon is the u with the > parked against it as a handle.

Every asset is derived from the real font's metrics rather than drawn by hand, and both icons are viewBox crops of the wordmark's own geometry, so the icon cannot drift from the logo.

Decisions taken

  • Primary icon: the handled cup. The plain cup is a variant used only at 16 px, where the handle stops resolving.
  • docs/assets/logo.png keeps its path, with its bytes replaced by a small raster of the new mark. Deleting it would permanently break the images on already-published PyPI release pages, whose stored HTML points at raw.githubusercontent.com/.../main/docs/assets/logo.png.
  • Home page uses the tagline lockup, so the image adds the descriptor rather than repeating the <h1>.
  • Assets are generated by a script, scripts/brand/build_identity.py, from the JetBrains Mono TTFs via fontTools, with all text converted to outlines. The constants in that script are the specification; scripts/brand/README.md documents them. Neither is part of the site.
  • Accent colour is kept in the header icon, subject to a legibility check at header size.

Scope

PR 1 — static identity (this issue's main body of work)

  • scripts/brand/build_identity.py — generator, with the locked kerning and geometry tables
  • scripts/brand/README.md — the identity reference, repo-only, not published to the site
  • docs/assets/brand/ — wordmark, tagline lockup, both icons, favicon, PNG icon set, social card
  • docs/assets/logo.png — bytes replaced, path preserved
  • zensical.toml — set theme.logo and theme.favicon
  • overrides/partials/logo.html — inline the mark so it follows the palette toggle (an <img> cannot; overrides/partials/header.html already includes this partial, so it needs no change)
  • overrides/main.htmlextrahead block for PNG favicon fallbacks, apple-touch-icon, og:image and twitter:image
  • docs/index.md and README.md — point at the new assets
  • Docs build green, both palettes checked, link gate passing

PR 2 — motion

  • Self-contained animated SVG (SMIL, no JavaScript), used once on the docs home page hero
  • Plays in reverse of the design sequence — the icon unfolds into the wordmark, so it resolves on the lockup rather than collapsing away from it
  • prefers-reduced-motion fallback to the final frame
  • MP4 / GIF export for release announcements

Manual follow-up (requires repository admin)

  • Set the GitHub repository avatar to mark-handle
  • Set the repository social preview image

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions