Branding
How MoonCellar looks and sounds wherever it appears: the site, the documentation, Storybook, social previews and anything built next. The rules here are short on purpose — the brand is a small set of files, colours and words, and it stays recognisable only if every surface uses the same ones.
Name
- Write the product name as MoonCellar — one word, capital M and capital C — in every sentence, title, label,
alttext and metadata. - The wordmark image is drawn as "Mooncellar". That is lettering, not spelling: never type the name that way.
- The domain is
mooncellar.space. Page titles follow the template%s | MoonCellar; the default title is MoonCellar — Game Tracker & Database. - Feature names are proper nouns and keep their capital: the Gauntlet, Favourite games, Lists.
Logos
Three images, each with one job. The originals live in apps/web/public/images; the documentation site serves copies from docs/public/images (see the root CLAUDE.md).
| Mark | File | Use it for |
|---|---|---|
 | logo-icon.png | Favicon and any small square slot: browser tab, app icon, avatar placeholder. |
 | logo-text.png | Header and navigation bars, sized by height. Never followed by the name typed as text. |
 | logo-full.png | Hero or banner of a home or landing page — the documentation home, a splash, a launch post. |
Each has a -black variant (logo-icon-black.png, logo-text-black.png, logo-full-black.png) for light backgrounds. The default variants are for dark backgrounds, which is every MoonCellar surface today.
Do not:
- recolour, outline, add shadows or glows, or put the mark inside another shape;
- stretch or squash it — scale by one dimension and keep the aspect ratio;
- rebuild the wordmark in a font, or pair the wordmark with the name typed next to it;
- place the default (light) variant on a light background, or a
-blackone on a dark one; - crowd it: leave clear space of at least the height of the wordmark's "o" around the mark.
Colours
The palette is defined once, in apps/web/src/lib/app/styles/vars/_colors.scss, and exported to docs/design-tokens.css by bun --filter web sync:tokens. Code always uses the token (var(--color-accent)), never the hex; the hex values below are for reference and for tools that cannot read CSS variables (Storybook's manager theme, image editors).
Brand
| Swatch | Token | Hex | Role |
|---|---|---|---|
--color-accent | #6951ee | The MoonCellar violet: primary actions, active states, links, the moon's crescent. |
Surfaces
| Swatch | Token | Hex | Role |
|---|---|---|---|
--color-bg-primary | #191d24 | Page background, inputs and fields. | |
--color-bg-secondary | #212731 | Panels (Box), the surface most components sit on. | |
--color-bg-tertiary | #2c3340 | Raised elements inside a panel: cards, rows, chips. | |
--color-bg-hover | #374151 | Hover and selected backgrounds. |
Text
| Swatch | Token | Hex | Role |
|---|---|---|---|
--color-text-primary | #ffffff | Headings and main copy. | |
--color-text-secondary | #d9d9d9 | Body text, intro paragraphs. | |
--color-text-muted | #b0b2bc | Captions, metadata, breadcrumbs. |
Status
| Swatch | Token | Hex | Role |
|---|---|---|---|
--color-positive | #00c292 | Success, "Completed", confirm actions. | |
--color-negative | #d02729 | Errors, destructive actions. | |
--color-attention | #ffc451 | Waiting, warnings, things that need a look. |
The violet is the only brand colour. Other hues in the palette (--color-blue, --color-pink, …) are for data — statuses, charts, badges — and never stand in for the accent.
Typography
| Face | Variable | Weights | Use |
|---|---|---|---|
| ApercuPro | --font-general | 400, 500, 700 | Everything in the interface: text, labels, buttons, headings. |
| Pentagra | --font-pentagra | 400 | Display headlines only — the home page hero, hubs, the Gauntlet wheel. |
Both are licensed local files loaded through next/font/local in apps/web/src/app/layout.tsx and cannot be served from anywhere else. Mockups and other published pages substitute Hanken Grotesk from Google Fonts and say so on the page (see Design system).
Copy
- English only, in the product and in everything published about it.
- Plain and direct: say what the feature does for the player, not how impressive it is.
- Descriptions in use, to quote rather than reinvent:
- Site: Track your game library, rate and review titles, unlock achievements, and find your next game with the Gauntlet — all in one place on MoonCellar.
- Home page: The ultimate games tracker and games database — manage your collection of thousands of games across all platforms. Track progress, discover new titles, and challenge the Gauntlet.
Social preview
apps/web/public/images/og-default.png (1200 × 630) is the default Open Graph image for every page that has no image of its own; game pages use the game's cover instead.
Where the brand is applied
| Surface | Favicon | Header | Banner |
|---|---|---|---|
Site (apps/web) | logo-icon.png | logo-text.png | — |
| Documentation (port 4333) | logo-icon.png | logo-text.png | logo-full.png |
| Storybook (port 4222) | logo-icon.png | logo-text.png | — |
A new surface gets a row here when it ships.