Docs

Background

misomoon brand: "Miso Print"

The repo had no existing brand, so this defines it. Tokens live in packages/brand/tokens.css; both apps import them.

Idea. A risograph poster, not a glowing SaaS page. Warm newsprint, heavy ink, and one loud vermilion, with cobalt, leaf, plum and mustard as spot colours. Everything looks printed: solid ink edges, hard offset shadows (never blurred), halftone dots instead of gradients. The moon is a halftone disc whose phase follows the light.

Type

RoleFaceNotes
DisplayArchivo, 68% width, 800Uppercase, tight (.display / .serif). Emphasis is vermilion, never italic.
UIArchivo, 100% width13–15px in the dashboard; numbers tabular, 700 for KPI values.
MonoMartian Mono, 87.5% widthLabels, eyebrows ([01] COLLECT), code, receipts, tickers.

Colour

  • Paper is the default theme (:root); Ink is :root[data-theme='dark'].
  • Spot inks: vermilion #E8461A (brand, primary action), cobalt #2B45E0, leaf #0E8A55, plum #B0389B, mustard #F2B416, paper #F2ECDF, ink #17140F.
  • Text on vermilion (primary buttons, the selected tab or choice) is white, --on-vermilion, in both themes.
  • Highlighter --highlight for marked phrases; status good/warn/bad reuse leaf, mustard and a red, always with a label or icon.
  • Categorical chart order, validated (CVD separation, lightness band, contrast) with the dataviz validator:
    • Paper (on #FBF7EE): #E8461A #2B45E0 #0E8A55 #B0389B #B98300
    • Ink (on #1C1915): #EE5526 #6077F5 #1F9C62 #C952B2 #B98510

Marks

  • Logo: "Reflection". A vermilion half moon rises on an ink horizon line, and its reflection breaks into rows of dots below, fading with depth: moonlight on water, and a dot plot. At 28px and under the mark switches to a compact cut (5, 3, 1 larger dots) so it holds as a favicon. The wordmark "misomoon" (Archivo 800) draws the two o's of "moon" as a moon rising on the horizon, then full. Files in packages/brand/ (mark.svg, logo.svg); earlier explorations are in packages/brand/explorations/.
  • Hero: the same idea at full size. Tonight's real moon phase (computed from the date in apps/landing/src/lib/edition.ts) rises over the horizon, and the reflection is misomoon's own visitors for the last 30 days, one column per day, hoverable.
  • Cards: 1.5–2px ink edge, --shadow = 3px 3px 0 ink (6px for overlays). Buttons press down into their shadow on click.
  • Charts: 2–2.5px vermilion line over a halftone dot fill, dashed previous period.
  • Landing devices: the page is a daily edition. An edition strip (issue number, date, tonight's moon, countdown to the next edition at midnight UTC) and a "yesterday" line written from the site's real numbers. Plus a thermal receipt and perforated shard tickets. Avoid generic template moves (marquee tickers, spinning stickers, tape bands): every decorative element should carry real data or a real fact.

Search every page and heading. ↑ ↓ to move, enter to open.