# Clanker Test 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/`: placeholder Clanker Test marks. Edit the SVG masters here.
- `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-test-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 Test gives coding agents a way to write validation tests and publish the results where people can review the evidence. Agents write tests; humans review the proof.

**Headline:** Proof that the agent built what you asked for.

**Description:** Give your coding agent a way to write validation tests and publish the results where people can review the evidence.

Use familiar nouns, active verbs, and concrete product capabilities. Describe capabilities that are available; label future demonstrations clearly.

## 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 Test,” 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 | 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 and product. 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. Use a system monospace for code, measurements, and technical identifiers.

## Composition and visualizations

Use clear hierarchy, aligned edges, generous working space, and precise line work. White working surfaces sit on quiet backgrounds. Blueprint grids frame brand illustrations and diagrams; keep reading 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, placeholder marks, and the existing semantic theme. The public homepage applies Blueprint to product messaging. Anonymous visitors see the homepage; authenticated visitors continue to their workspace or onboarding. Workspace navigation, empty states, and onboarding share the same surfaces and language. Test-run review screens come later.

## 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.