← Cycles
Design · c119

Logo Downloads

activedeployed 2026-10-20 — `d5a1b588b` live at /brand/logo: five masters, 195 files, 4 raster sizescreated 2026-10-20· last activity 2026-10-20· mode: formula (applying the brand's logo rules as a build step)

Downloadable logos on `/brand/logo`. Pick a logo, a format (SVG · PNG · GIF · JPG, in that order of preference) and a color (White · Black · Grape), then download a pre-built file generated from black master SVGs.

Why

The logo page describes the logo but has nothing to take away. "Always pull from the Figma master" sends everyone without Figma access to ask for a file.

Objective

A Download section on /brand/logo that serves every logo × format × color as a static file, built by one script from grape and duotone masters in brand/logos/masters/. Adding a master and re-running the script is the whole maintenance story.

Scope

  • brand/logos/masters/: grape and duotone master SVGs (source of truth)
  • scripts/build-logos.mjs, package.json (npm run logos)
  • public/brand/logos/: generated files; app/data/logo-downloads.json: the manifest the page reads
  • app/pages/brand/logo.vue: Download section, copy reconciled

Key Changes

  • kick-off (2026-10-20): cycle created; plan written with decisions D1–D8; waiting on the black master SVGs.
  • masters (2026-10-20): the masters are grape and duotone, not black. The first one is in as brand/logos/masters/stacked.svg, single-color #AB86F6, which sets the Grape download color (D1). Flattening the duotone masters to one color is D2b. The rest are still being exported from Illustrator.
  • build (2026-10-20): Mark re-exported five masters as logo-1…5.svg. All are clean paths: two in grape, three duotone (a grape mark with an unfilled wordmark, which renders black, and the two never overlap). They're saved as symbol, stacked-caps, stacked, lockup and lockup-caps; brand/logos/logos.json holds the names, labels and Drive source files. scripts/build-logos.mjs (npm run logos) builds 5 logos × 3 colors × 4 formats = 60 files, 2.1 MB, in public/brand/logos/, plus app/data/logo-downloads.json. A Download section on /brand/logo offers logo cards, a Format and a Color UxTabGroup, a preview of the actual file on its matte, and the filename, size and Download. Checked: contact sheet by eye, all 60 files serve 200 with the right MIME types, dark mode, 375 px. The site nav overflowing at phone width predates this cycle, as does a hydration warning also on /brand/colors. Uncommitted.
  • tweaks (2026-10-20): the pickers are now labelled "Select a logo / format / size / color". PNG, GIF and JPG come in four sizes, 256, 512, 1024 and 2048 px on the long edge, each rendered straight from the vector. The size picker shows only for those three formats and defaults to 1024. Files are named qpoint-<id>-<color>-<size>.<ext>; SVG keeps qpoint-<id>-<color>.svg. There are now 195 files, 3.7 MB, and all serve 200. Uncommitted.
  • ship (2026-10-20): committed d5a1b588b, staging only the c119 entry in CYCLES.md (the c115 edit there belongs to another session). npm run deploy → deploy 4da9fcbba. _deploy.json on design-f39.pages.dev shows d5a1b588b, layer 0.9.33, 25 uncommitted files from other work. /brand/logo/ serves 200 and all 195 files serve 200 with the right MIME types.

Artifacts

Qpoint Brand Style Guide