docs: add brand guide capturing the current site styles - #17
Merged
Conversation
We have four hand-authored web surfaces (offworldlabs.com, retina.fm, dash.retina.fm, and the dark map.retina.fm) that share a family resemblance but no stylesheet, so a new page has to reverse-engineer the colours and fonts by eye and tends to drift. This adds a descriptive brand guide plus a tokens.css starter so future pages can match what already exists instead of guessing. The guide is deliberately a snapshot of what we have, not a target: it records the shared foundations, the per-surface differences, and the places the surfaces disagree (four type systems, four blues, semantic colours that drift by a shade, the marketing-diagram vs live-map colour schemes) rather than trying to resolve them. tokens.css unifies the token naming across the four surfaces (owl/retina/dash/map body classes) and preview.html renders identical markup under each class as a proof the starter reproduces the looks. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds
docs/brand/to the org reference docs: a descriptive brand guide for the Offworld Labs / RETINA web surfaces, plus atokens.cssstarter and a preview page.Why
We have four hand-authored web surfaces that share a family resemblance but no stylesheet:
A new page currently has to reverse-engineer the colours and fonts by eye, which invites drift. This captures what already exists so future pages can match it.
What's in it
brand-guide.md— the "one family, four voices" model, then foundations, colour, typography, shape/space/motion, components, the radar-diagram motif, voice, how to use the tokens, and an advisory improvements/gaps/discrepancies section.tokens.css— the same values as CSS custom properties: a shared:rootspine plus four surface classes (.owl/.retina/.dash/.map). A page adds one class to<body>and readsvar(--ink),var(--canvas),var(--accent), etc. The.mapclass is dark, so components written against the tokens invert automatically.preview.html— renders identical component markup under each surface class, as a proof the starter reproduces the four looks.Deliberately descriptive, not prescriptive
It's a snapshot of the current state, not a target. Where the surfaces disagree (four type systems, four distinct blues, semantic colours that drift by a shade, the marketing-diagram green/amber vs the live-map teal/Doppler scheme, accessibility gaps) it records the disagreement rather than resolving it.
🤖 Generated with Claude Code