MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-1139

8.3.1 Design — Motir brand mark (logomark + wordmark + favicon/app-icon + dark variant + OG template)

Done
Description

Type: design · Executor: coding_agent · The brand mark is genuinely NEW — story 8.7 did the TEXTUAL rename only and explicitly left the visual wordmark/logomark to this story (see scripts/plan-seed/data/story-8.7.ts header: "The Motir wordmark/logomark is story 8.3's design scope").

Define the complete Motir brand-mark asset system as a design subtask, grounded in the real design system (--el-* tokens + shape/radius tokens in app/globals.css). Deliverables (the THREE-file design set under design/brand/):

  • Logomark — a buildable SVG glyph (the abstract mark). Today the only "mark" is an improvised purple M-in-a-tile in the OG images (app/(public)/explore/opengraph-image.tsx lines 44–46). Replace that ad-hoc treatment with a real, specified mark. Define geometry as buildable SVG (path + viewBox), at a single source size that scales.
  • Wordmark — the "Motir" lettering treatment (typeface/weight/tracking from the type axis), and the lockup (logomark + wordmark horizontal + stacked).
  • Dark-mode variant — the mark on dark surfaces ([data-theme='dark']); specify the inverted/accent fills (note the --el-text-inverted flip gotcha — use a colour that holds AA in both themes).
  • Favicon / app-icon set — icon.svg (modern), apple-icon.png (180), the maskable manifest icons (192/512), and the safe-zone padding for each. (Only app/favicon.ico exists today; no icon.svg, no apple-icon, no manifest.)
  • OG-image template — the social-card layout the root + section OG images render from (logomark + wordmark + tagline on the brand surface).

Draw the ACCESS PATH: each mock uses --el-* + radius tokens; the .mock.html renders the lockup, the favicon grid, the dark variant, and the OG template at shipped sizes; the .png export is the same-basename render.

NOTE — the final logomark is a CREATIVE artifact. This subtask specifies placement/usage + a buildable mark; the FINAL mark choice is a human/brand-design decision split out to 8.3.2 (decision). This subtask produces a strong default mark + the full usage system; 8.3.2 ratifies or substitutes the glyph.

Acceptance criteria

  • design/brand/brand-mark.design-notes.md + design/brand/brand-mark.mock.html + design/brand/brand-mark.png exist; mock renders the lockup, favicon grid, dark variant, and OG template from real --el-*/radius tokens.
  • Logomark + wordmark specified as buildable SVG (path/viewBox), single scalable source.
  • Favicon/app-icon set fully enumerated (icon.svg, apple-icon 180, manifest 192/512 maskable) with safe zones.
  • Dark-mode mark variant holds AA on the dark surface.
  • OG-image template layout specified at 1200x630.
  • a11y: every mark/lockup has specified alt text + accessible name; decorative vs informative usage called out.

Context refs

  • scripts/plan-seed/data/story-8.7.ts (8.7 deferred the visual mark to 8.3)
  • app/(public)/explore/opengraph-image.tsx (the ad-hoc M-tile to replace)
  • app/globals.css (--el-* colour tokens + --radius-* shape tokens)
  • design/typography/mono-technical.mock.html + .png (the THREE-file convention example)
  • app/favicon.ico (the only icon today — set is incomplete)