{
  "name": "sidealong",
  "edition": "1",
  "date": "2026-10-28",
  "where": {
    "brand_book": "https://claude.ai/artifact/75G1NAbtRfard1YWjirYqE",
    "canvas": "https://claude.ai/artifact/PBRDQWn8Aiqt5dWb5tXsmp (project/brand/, pages logo \u00b7 final and logo \u00b7 wordmark)",
    "repo": "docs/brand/ in the sidealong repo"
  },
  "color": {
    "blue": "#2A78FF",
    "tile_top": "#3F86FF",
    "tile_bottom": "#2268F0",
    "ink": "#141416",
    "paper": "#F6F6F4",
    "white": "#FFFFFF"
  },
  "mark": {
    "shape": "the canvas, three squares, with a fourth stepped out at its lower right: the panel, sidealong sitting on top of your canvas",
    "lean_deg": 12,
    "corner_radius": "10% of one square, the canvas's outer corners 20%, rounded after the lean",
    "gap": "18% of the canvas's width, held square to the slanted edges",
    "panel_opacity": 0.57,
    "one_colour": "use the -solid marks where opacity can't print (embroidery, stamps, single-ink)",
    "aspect_w_over_h": 1.0619
  },
  "wordmark": {
    "font": "Funnel Display",
    "weight": 500,
    "letter_spacing_em": -0.03,
    "case": "lowercase",
    "text": "sidealong",
    "source": "https://fonts.google.com/specimen/Funnel+Display"
  },
  "lockup": {
    "mark_height": "1.4x the ascender of d (1.5x at 32px and under)",
    "mark_dip": "0.26 of the ascender below the baseline (0.3 at 32px and under)",
    "gap": "0.22 of the mark height",
    "clear_space": "half the mark height on every side",
    "min_size": {
      "lockup_px": 80,
      "mark_px": 12
    }
  },
  "icon": {
    "tile": "macOS 1024 grid, tile 824, linear #3F86FF to #2268F0",
    "mark_fill": "58% of the tile, a touch low and right",
    "liquid_glass": "icon/sidealong.icon: open in Icon Composer, or render with ictool; panel layer opacity 0.57",
    "icns": "the app ships Resources/sidealong.icns (16 and 32 px drawn on the pixel grid); rebuild it with iconutil from an iconset, or export from sidealong.icon in Icon Composer"
  },
  "favicon": {
    "light": "favicon/favicon-16.svg and favicon-32.svg: the two-tone blue mark, for light tabs and grounds",
    "dark": "favicon/favicon-16-white.svg and favicon-32-white.svg: the two-tone white mark, panel at 0.57, for dark tabs and grounds",
    "drawn": "on the pixel grid, so the gap stays open at 16 px"
  },
  "art_direction": {
    "idea": "one box around the thing you mean: the art comes from snap, a thin box drawn around what you point at, with a few small labels",
    "on_photos": "a white hairline box, white chips with ink text, so it stays clean on any picture",
    "on_our_grounds": "the accent, #2A78FF; in the app the box wears the theme's accent",
    "focal_point": "one box per image; everything else steps back to a thin line",
    "labels": "JetBrains Mono caps, small, +0.06 to 0.08 em; numbers on them are real measurements, never invented",
    "not": "HUD overload, neon glow, more than one accent, made-up data",
    "chapter": "brand book, art direction (2026-10-25); options explored on the canvas page art direction \u00b7 exploring"
  },
  "files": [
    "favicon/apple-touch-icon-128.png",
    "favicon/favicon-16-white.png",
    "favicon/favicon-16-white.svg",
    "favicon/favicon-16.png",
    "favicon/favicon-16.svg",
    "favicon/favicon-32-white.png",
    "favicon/favicon-32-white.svg",
    "favicon/favicon-32.png",
    "favicon/favicon-32.svg",
    "favicon/favicon.ico",
    "icon/app-icon-1024.png",
    "icon/app-icon-128.png",
    "icon/app-icon-16.png",
    "icon/app-icon-256.png",
    "icon/app-icon-32.png",
    "icon/app-icon-512.png",
    "icon/app-icon-64.png",
    "icon/app-icon-flat.svg",
    "icon/liquid-glass-1024.png",
    "icon/liquid-glass-dark-1024.png",
    "icon/sidealong.icon/Assets/1-L.svg",
    "icon/sidealong.icon/Assets/2-panel.svg",
    "icon/sidealong.icon/icon.json",
    "logo/lockup-blue.svg",
    "logo/lockup-ink.svg",
    "logo/lockup-white.svg",
    "logo/mark-blue-solid.svg",
    "logo/mark-blue.svg",
    "logo/mark-ink-solid.svg",
    "logo/mark-ink.svg",
    "logo/mark-white-solid.svg",
    "logo/mark-white.svg",
    "logo/wordmark-ink.svg",
    "logo/wordmark-white.svg"
  ]
}