brand-doc design-system product-design

MILO Brand Document

2026-08-16

Models Used

OpenAI GPT-4o Google Gemini 2.5 Flash Anthropic Claude 3.5 Sonnet

Tools Used

HTML/CSS GitHub Pages Google Fonts WeasyPrint Vision API Browser CDP

Interesting Facts

All brand tokens (colors, typography, spacing, component styles) extracted programmatically from app/globals.css and toolshelf-app.tsx.
MILO's mascot is a black Labrador named Milo – three hero illustrations exist in the app showing different poses.
Delivered as a Perspektiv-branded PDF with ruby-dot logo, ready to share with clients and stakeholders.
Includes an AI character generation playbook for consistent marketing material production.

A complete brand identity document for MILO (Methods, Instructions, Learning & Operations) – a private, local-first resource library for product managers, built by Square Circle Triangle.

Perspektiv created the brand document by analyzing the live MILO codebase, extracting every design token, and assembling them into a coherent brand system. The deliverable includes:

A full color palette with brand core colors, resource-type accent coding, and the corporate rail gradient
Typography system: Inter Variable, Redaction, and Newsreader with size/weight/letter-spacing specs
Component styling for buttons, resource cards, type pills, search band, and sidebar navigation
Media asset inventory with dimensions and UX context for all hero images and icons
MILO the black Labrador mascot – three character illustrations documented with their app placements and a generation prompt playbook for creating consistent marketing assets across eight poses

The document was delivered in two formats: a searchable HTML version and a polished Perspektiv-branded PDF suitable for client presentations.