# Clanker Docs brand

Version 1.0.0 · Blueprint · Approved identity

The live reference is `/brand`. The brand combines Blueprint’s typography, palette, precise line work, and direct language with the selected Paper Visor logo family.

## Sources

- `apps/web/src/lib/brand/brand.json`: approved palette, messaging, logo names, roles, and version.
- `apps/web/public/brand/logos/`: the twelve master logos. Edit the SVG masters here; preserve the approved PNG material renders.
- `apps/web/src/components/brand/`: shared marks, lockups, reference page, and visual treatments.
- `apps/web/src/styles.css`: semantic product tokens for light and dark themes.
- `apps/web/src/lib/brand/tokens.css`: generated palette variables and Tailwind color mappings.
- `docs/design/logo-winners/`: material generation prompts and provenance.

Run `pnpm brand:generate` after changing masters, the brand manifest, or this guide. It generates palette CSS, browser/app icons, color exports, portable SVG lockups with Inter converted to paths, the asset manifest, a social preview, and `/brand/clanker-docs-brand-kit.zip`. Node, pnpm dependencies, and the system `zip` command are required. Generated assets are committed with their sources. Application components use `BrandMark` and `BrandLockup` from the shared module.

## Positioning and language

Clanker Docs gives coding agents tools to create rich visual documents. Developers review, comment, and direct revisions. Agents author; humans remain in control of the explanation.

**Headline:** Beautiful documents. Created by your agent.

**Description:** Give your coding agent tools to explain systems with clear writing and rich diagrams. Review the document, leave comments, and have your agent make the changes.

Use familiar nouns, active verbs, and concrete product capabilities. Compare workflows using Markdown, Google Docs, and other document tools accurately. Describe capabilities that are available; label future demonstrations clearly. Let well-made documents and visuals establish the premium character.

## Logo hierarchy

- **Solid and Outline:** the two primary marks, using the Soft Corners face. Solid is the default in compact product placements; Outline is an equally primary alternative.
- **Blueprint:** the core color variant. Its Mist page, Rule grid, Cobalt outline and visor, Ink text lines, and white eyes are part of the SVG.
- **Paper, Glass, LCD:** larger brand illustrations with the winning navy screen, square blue pixels, and softly glowing eyes. Use from 128px upward when material detail matters. Glass and LCD have transparent backgrounds; the LCD panel is translucent.
- **Pill, Round, Squint:** supporting expressions in solid and outline versions. Keep the main Soft Corners expression for the persistent product identity.

The mark contains no letters. A lockup places the mark beside the product name, “Clanker Docs,” in Inter Semibold. Keep the name in title case. The shared component uses compact spacing suited to product text. Exported lockups use 32-unit type and a tightly cropped canvas around the complete mark and wordmark. Keep these supplied proportions when using an export.

## Geometry, size, and clear space

Vector masters use `viewBox="10 5 44 54"`, tightly fitted to the artwork including outline strokes. The page occupies x=10–54 and y=5–59. The visor is 26 × 14, radius 5.5, centered at (32, 25.625). The page has no fold. Three equal-height text bars sit below the visor, with a shorter final line. Side and bottom content margins inside the page are nine units.

SVG viewBoxes fit the visible artwork without built-in outer margins. Add clear space in the surrounding layout. Scale the complete mark uniformly with its 44:54 aspect ratio. Preserve the page, visor, eye shapes, and relative spacing when recoloring.

Use the full core mark at 16, 20, 24, 32, 48, 64, and 128 CSS pixels. At 16px, favor Solid for its stronger silhouette. Detailed color and material treatments are best judged at larger sizes. Logo PNGs use cropped artwork bounds, retaining their original proportions and pixels. Generated logo PNG exports are 512px tall with transparent outer margins trimmed. App icons and favicons retain their required square dimensions; app-icon exports add a Mist tile and mask-safe padding.

## Palette

| Color  | Hex     | Role                                    |
| ------ | ------- | --------------------------------------- |
| Cobalt | #2455E8 | Primary brand color and actions         |
| Ink    | #16233F | Headlines and primary text              |
| Paper  | #FFFFFF | Documents and working surfaces          |
| Mist   | #EEF3FF | Quiet backgrounds and selected surfaces |
| Rule   | #CBD6EF | Dividers and decorative grids           |
| Iris   | #7F65D6 | Secondary diagram emphasis              |

Use semantic product tokens such as `primary`, `foreground`, `muted-foreground`, `border`, and `input` in app components. Dark mode uses deep ink surfaces, pale text, and a lighter blue for readable actions. Rule is a decorative divider color; form boundaries and focus rings use stronger contrast. Status colors keep their own semantic meaning. Pair state colors with text or icons.

## Typography

Use Inter Variable for the website, product, and documents. Use Semibold for the lockup and primary headings, Medium for labels, and Regular for body text. Headlines can be large and tightly spaced in marketing; product UI uses the existing named text sizes and user-adjustable scale. Preserve comfortable reading width and line height in documents. Use a system monospace for code, measurements, and technical identifiers.

## Composition and visualizations

Use clear hierarchy, aligned edges, generous document space, and precise line work. White document surfaces sit on quiet backgrounds. Blueprint grids frame brand illustrations and diagrams; keep reading and editing surfaces clear. In the app, use restrained borders and semantic emphasis rather than decorative overlays.

Visualizations should explain a system: architecture, sequence, schema, wireframe, call stack, or pseudocode. Keep names and relationships consistent across views. Use Cobalt for the active path and Iris for secondary emphasis; use additional distinguishable colors when the data requires them. Label nodes and states, and maintain readable text and lines at the size shown.

## Motion

Animate to explain a change, sequence, relationship, or action. Use short 120–200ms transitions for controls. Larger explanatory sequences can take 300–600ms per step. Keep labels stable. Provide a readable static state and honor reduced motion. Material eye glow is part of the artwork; ordinary product controls use clear focus rings and state changes.

## First application

The initial rollout applies the shared brand to `/brand`, browser/app icons, authentication screens, product identity, document icons, and the existing semantic theme. It retains product navigation, authentication behavior, and document content. The public homepage applies Blueprint to an animated architecture illustration, an interactive sample document, product messaging, workflow examples, and an accessible responsive layout. Anonymous visitors see the homepage; authenticated visitors continue to their workspace or onboarding. The sample is illustrative and stores no user documents or comments. The document viewer applies the brand to reading typography, visual blocks, diagrams, and responsive toolbars. Workspace navigation, document lists, empty states, and onboarding share the same surfaces and language. Review-specific screens are a subsequent rollout.

## Release checks

Check light/dark themes, 320px and desktop layouts, keyboard focus, readable contrast, exact icon sizes, the complete download kit, and consistent names. Verify all asset URLs and portable exports. Run the repository editing loop and `pnpm validate:turn`; exercise affected product flows in the browser before shipping through a pull request.