---
name: vosso
description: How to make anything that carries vosso's brand, for coding agents. Palette, type, marks, the grammar of surfaces, and what to avoid.
---

# Build on vosso's brand

vosso turns what you ship into the media that sells it, from the real
product, kept current with every release. The brand's job is to get out of
the way of the work: output does the talking, chrome stays quiet, and the
one loud colour marks time.

## Priority order

1. Show a real render of a real product before any claim about one.
2. One message per screen, one primary action. Secondary paths are text.
3. Structure by tone, unequal space and type, never by drawn lines.
4. Everything below.

## Palette

- Two grounds, chosen per door. Paper `#FBF9F5` with ink `#0F0D0C` is
  the ground of vosso's marketing pages. The stage `#060606` is the
  ground of wherever output plays (films, clips, the drop target), in both
  themes: a picture's ground is the one place true black earns its glare.
- Dark mode is one charcoal everywhere people read: `#0E0D0C` with type
  `#E8E8E8` (15.8:1), secondary type at APCA Lc 60. Never `#000` and
  never full white for text, because white letters on black halate and a
  black ground smears on an OLED scroll. The marketing pages, the
  workspace, the studio and the docs all follow the reader's theme onto it.
  The workspace is a tool, so it keeps the app's squared controls and its
  own spacing; what it takes from the doors is the ground, the type and
  the card.
- Every other surface tone is derived: a plane is ink mixed 5% into the
  ground, a well is ink at 5.5%, a hairline is ink at low alpha. Do not
  invent greys; step the ground.
- Cinnabar `#ce5d42` (`#e37358` on a dark ground) marks time and only
  time: the playhead, the record dot, a live state. It is a pigment, not a
  screen colour: oklch(0.615 0.15 35). Never on a button, a hover, a border,
  a background or a gradient. At most one signal element in view. A large
  field in the brand's hue takes a lighter or darker step of the ramp
  (cinnabar-300/400 or 700/800), never the 500.
- A callout composed on footage never speaks in cinnabar: the playhead is
  usually in the same frame. A kit made from this brand names a `callout`
  role (BRAND.md frontmatter, `callout: '#hex'`), a mid-tone taken from the
  ground the piece sits on; the front doors' own set uses plum `#c48fa6`
  off its ember backdrop. `vos callout` prefers that role over the accent.
- Errors are a separate crimson, cooler and darker than cinnabar; they
  report, they never warn. A
  button that has not run yet has broken nothing and is never red.
- Spectrum colour lives in the content being rendered, never in the chrome.

## Type

- Use Lexend for every word a human reads, on every surface: display,
  body, labels, links, status words, controls, and anything made to sit on
  a page (a poster, a card, a callout, an end card). Weight and size carry
  hierarchy. On the marketing pages the display is weight 500, tight at
  -0.04em, and never below 400: a light Lexend at display size reads thin.
  A workspace page title is the same weight at tool size, 24px at -0.03em.
  A page called `Home` has nothing to shout, so nothing there is bold.
- In a vos program or a composed card the family is named `Lexend`, the
  name the hosted font catalog carries (https://vos.so/api/fonts).
  `Lexend Variable` is the site's own CSS face and resolves nowhere else.
- JetBrains Mono for code and data literals only: commands, paths, ids,
  keys, timecodes, dimensions, tabular numbers.
- Never all caps. Never an eyebrow above a heading. Sentence or Title case.
- Two-tone headlines (ink, then a muted second phrase) are hero-only. A
  hero H1 stays under eight words.

## Marks

- The wordmark is the word `vosso`, lowercase, in Lexend bold. There is
  no stylised wordmark asset.
- The mark is the tricorn, published bare with a transparent ground:
  https://vos.so/mark.svg (ink, for light grounds) and
  https://vos.so/mark-on-dark.svg (paper, for dark grounds). These are the
  files to place on a poster, a card or an end card, beside the wordmark at
  about 1.3 times its cap height. The favicon (https://vos.so/favicon.svg)
  and the app icon (https://vos.so/logo512.png) carry a tile and are never
  placed on a composition. Solid fills only; a gradient or a purple tint
  reads as generic AI and is wrong.
- `vos` is the open engine's name and stays lowercase too. There is one
  product, vosso; inputs (a recording, a URL, a program, a model) are doors,
  never brands.

## Surfaces

- Ground, plane, well: three tonal rungs. Controls are wells, not outlines.
  A border survives only on the bare canvas and the focus ring.
- Three drawn lines per viewport is the budget. A line must separate dense
  peer content with no room for a gap.
- Radius grows with the object: 8 for controls, 12 for wells and tiles, 16
  for panels and cards, 20 for floating surfaces; an inner radius is the
  parent's minus its padding.
- Spacing is a ratio, 8 / 20 / 28 / 56, never one generous value everywhere.
- A state is a dot plus a word. Hue goes on the dot; the word stays ink.

## Voice

- Claims are short, benefit-led and provable. The claim without an artifact
  made by the product does not ship.
- Numbers are real and set in mono with tabular figures.
- No em-dash. Restructure with periods and commas.
- Say what you can do here, what you get, and the next step, in one glance.

## Reject

- A card grid of equal boxes.
- Purple, gradients or glows on the mark or the chrome.
- Record red anywhere but a time mark.
- All caps, tracked eyebrows, meta labels above headings.
- A hero that claims without a render beside it.
- Stock imagery, mockups, anything not made by the product.
- A wordmark used as a control.
- Em-dashes in shipped copy.

## Machine surfaces

- https://vos.so/llms.txt routes an agent by its ask.
- https://vos.so/llms-full.txt is the complete CLI contract.
- `vos brand https://vos.so` writes this brand as a BRAND.md recipe and
  reads this file first.