# Brand guide

Original, Red and Blue are equal-status WS Agency identities. Select one for a project or campaign, then use its typography, palette and examples consistently. None is the default or a deprecated identity.

| Identity | Character | Main type | Technical type | Accent |
| --- | --- | --- | --- | --- |
| Original | Gold and charcoal, rooted in original artwork | Manrope (kit recommendation) | IBM Plex Mono | Gold `#ea9423` |
| Red | Warm, editorial, people and ideas | Manrope | IBM Plex Mono | Light `#b73718`; dark `#ff6038` |
| Blue | Clear, technical, product and engineering | Inter | JetBrains Mono | Light `#2454d8`; dark `#3864ff` |

The original logo's lettering is outlined artwork. The chosen body font is not a replacement for that lettering. Keep the logo paths unchanged; never retype the logo.

## Choose a logo

- `full`: sign and wordmark together; presentations, branded pages and generous placements.
- `wordmark`: original outlined name; wide placements where the agency name must be explicit.
- `sign`: emblem alone; avatars, app icons, favicons and attribution paired with the agency name.
- `color`: use on a light surface. Red/Blue colors are new kit applications of the original geometry.
- `dark`: single dark color for light surfaces and constrained monochrome applications.
- `white`: single white color for dark surfaces and photography with a reliably dark clear area.

SVG is the preferred master. Transparent PNGs at widths 512 and 1024 are provided for tools that do not accept SVG. Original PDFs, PNG exports and Illustrator masters remain in the source archive. For historical square/whitespace treatments, use the searchable browser find command in [the archive index](../sources/index.html).

## Practical usage recommendations

These measurements are kit recommendations, not claims about historical brand rules. The supplied “Minimum whitespace” folder contains source variants, not a verified numerical guideline document.

- Keep at least one quarter of the sign's height clear on all sides of the complete lockup.
- At normal reading distances, start at 120 px wide for the full logo, 120 px for the wordmark and 32 px for the sign; inspect the actual rendered result. Small favicon use is an intentional exception.
- The wide sign becomes small within a square favicon. Do not stretch it to fill the square. Use the full 192/512 px app icons for app launchers.
- Do not stretch, rotate, outline, add shadows to or rearrange the logo. Do not use the gold as small text on white: the kit provides a darker `accentText` token for that role.
- Keep logo artwork and legible text on a clean background. Use the white variant only on a dark surface.
- Do not mix identity accents within a single badge or footer. Neutral monochrome versions are available when the host project has its own branding.

## Themes and accessibility

Tokens include light/dark background, surface, foreground, muted text, accent, accent text, border and focus colors. `accent` is decorative; `accentText` is tested for normal text on the matching background and surface. Foreground and muted combinations meet a 4.5:1 contrast threshold. Focus against the background meets 3:1. Thin decorative borders are not intended as the sole control boundary.

Components opt in via `.wsa-brand`, `data-identity` and `data-appearance`. Theme tokens do not reset the host application's elements. Follow the integration guide for manual appearance selection; favicons follow the browser/system preference.

## Social assets

Each identity has light and dark templates: square (1080×1080), portrait (1080×1350), story (1080×1920), link preview (1200×630) and avatar (1024×1024).

- Plain `.svg`: editable text and embedded web font; install the bundled desktop family in design applications that ignore embedded fonts.
- `-outlined.svg`: exact font-independent vector export of the supplied sample.
- `.png`: ready-to-use visual sample. Replace the sample copy before using it for a real campaign.

Edit the text and optionally remove the project label; keep the logo and margins. Text is placed on explicit lines. Reflow and inspect after editing, especially with long words or another language. Stories keep key content 200 px from the top and bottom; other templates use 72–88 px edge margins. Avatar artwork stays inside the circular crop. These are reusable canvases, not guaranteed upload specifications for every social platform.

## Attribution language

Use “Made with love by WS Agency”, “Built by WS Agency” or “An open-source project by WS Agency” only where the relationship is accurate. A heart is decorative artwork, with the accessible text saying “love”. When acknowledging a contribution rather than authorship, write truthful attribution in your own copy; do not imply agency ownership or endorsement.