# vAPI brand guide

The standards behind every vAPI surface: the mark, color, type, the tessera pixel system, motion, and layout. Generated from the same source as the /branding page. Paste it into an AI tool as context, or read it as the short version of the kit.

## Mark and wordmark

The mark is nine solid blocks in three rows. The top row opens in orange, pink, and lime and ends in ink. The middle row carries cyan, blue, and purple and a full blue block. The bottom row is one ink block. In the lockup the mark reads as the v, followed by API in Space Grotesk Regular with tight tracking. The letters are outlined in every file, so never retype them.

- Clear space: Keep one block height of empty space on every side of the mark or lockup. A block height is one third of the mark's height.
- Minimum size: Lockup at least 20px tall on screen and 8mm in print. Mark alone at least 16px tall.
- Do: Full-color mark with ink letters on paper.
- Do: Full-color mark with off-white letters on ink.
- Do: Single-color mark when the medium cannot print color.
- Do: One block height of clear space on every side.
- Don't: Recolor or reorder the blocks.
- Don't: Rotate or tilt the mark.
- Don't: Stretch, squash, or skew it.
- Don't: Add shadows, glows, gradients, or outlines.
- Don't: Move, drop, or add blocks.
- Don't: Place it on busy imagery or a dense pixel field.
- Don't: Retype the wordmark in any font.
- Don't: Lower its opacity or tint it with an accent.

## Color

Colors are design tokens. Use the token name in code and the hex in design files.

| Token | Name | Hex | Dark mode | Role |
| --- | --- | --- | --- | --- |
| `--vapi-color-white` | Paper | #ffffff | same | Light background and product surfaces. |
| `--vapi-color-black` | Ink | #111111 | same | Text, hairline borders, the default mark ink. |
| `--vapi-color-off-white` | Off-white | #fafafa | same | Text and mark ink on dark backgrounds. |
| `--vapi-color-line` | Hairline | #e5e5e5 | #2b2b2b | 1px dividers and grid lines on light. |
| `--vapi-color-fg-dim` | Dim text | #555555 | #b0b0ab | Secondary copy at 4.5:1 or better. |
| `--vapi-color-orange` | Rail orange | #ff7300 | same | The payment rail, corner blocks, signals, underlines. Never a button fill or a large surface. |
| `--vapi-color-blue` | Base blue | #0041eb | same | Links, secondary actions, and the few deliberate contrast squares in a pixel field. |
| `--vapi-color-pink` | Pink | #ff337c | same | Mark accent and warnings. |
| `--vapi-color-lime` | Lime | #c3ff3d | same | Live, success, and settled states. |
| `--vapi-color-cyan` | Cyan | #97efff | same | Mark accent and info. |
| `--vapi-color-purple` | Purple | #8a37fb | same | Mark accent. |
| `--vapi-color-orange-text` | Orange text | #9a3d00 | #ff7300 | Orange copy on light. |
| `--vapi-color-lime-text` | Lime text | #4f6f00 | #c3ff3d | Success copy on light. |
| `--vapi-color-cyan-text` | Cyan text | #006078 | #97efff | Info copy on light. |
| `--vapi-color-pink-text` | Pink text | #b00043 | #ff337c | Warning copy on light. |
| `--vapi-color-purple-text` | Purple text | #5f1fb0 | #8a37fb | Purple copy on light. |
| `--vapi-color-editorial-paper` | Editorial paper | #f7f1e2 | #111111 | Warm ground behind illustrations. |
| `--vapi-color-campaign-warm` | Sand | #bca476 | #6f6044 | Stone tones in pixel fields. |

Proportions, roughly: white 72%, black 18%, line 6%, orange 2%, blue 1%, lime 1%.

## Typography

- **Space Grotesk** (400 and 500): Everything people read: headlines, prose, navigation, labels, buttons, tables, ordinary numbers. SIL Open Font License 1.1.
- **IBM Plex Mono** (400 and 500): Only literal technical strings: code, commands, API keys, addresses, hashes, transaction ids. SIL Open Font License 1.1.

| Role | Face | Size | Weight | Leading | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero headline | Space Grotesk | clamp(52px, 8.5vw, 128px) | 400 | 0.98 | -0.03em |
| Section title | Space Grotesk | clamp(38px, 5vw, 68px) | 400 | 1.02 | -0.03em |
| Giant numeral | Space Grotesk | clamp(72px, 10vw, 160px) | 400 | 1.0 | -0.02em |
| Card title | Space Grotesk | 18 to 24px | 500 | 1.15 | -0.01em |
| Body | Space Grotesk | 15 to 17px | 400 | 1.6 | 0 |
| Label | Space Grotesk | 12 to 14px | 500 | 1.3 | 0 |
| Technical string | IBM Plex Mono | 12 to 14px | 400 | 1.5 | 0 |

- Do: Set headlines in Space Grotesk Regular with tight tracking. Emphasize at most one phrase in Medium.
- Do: Write in sentence case. Uppercase is only for literal acronyms like USDC and MCP.
- Do: Write the brand as vAPI, always with a lowercase v.
- Do: Keep display type at 28px or larger.
- Don't: Use weights other than 400 and 500. Light, semibold, and bold are not part of the system.
- Don't: Use italics. None are shipped.
- Don't: Use IBM Plex Mono to make ordinary copy look technical.
- Don't: Lower text opacity to make it quieter. Pick the dim text color instead.

Pairings:

- **Display and body.** Space Grotesk Regular at display size over Space Grotesk Regular body. One phrase in Medium carries the emphasis.
- **Interface and technical.** Space Grotesk names the thing. IBM Plex Mono carries only the literal string a person might copy.
- **Numeral and caption.** A verified, time-bounded number set huge in display, with a plain caption that says what it counts and when.
- **Index and title.** Section numbers are Space Grotesk, not mono. The index is small and dim, the title does the work.

## Pixel system

Every pixel is a square tessera on a fixed grid: 8px cells with 2px gaps in the product, the same 4:1 cell-to-gap ratio at any scale. Squares never rotate, round, blur, or glow. Fields are denser near their subject and disperse outward.

- **Signal field.** Ambient background behind search, heroes, and empty states. Sparse, never louder than the content.
- **Dissolve.** The illustration language: dense at the subject, dispersing outward. Warm tones with rare blue.
- **Payment rail.** The orange rail that runs through the product. Pixels gather near the line and fade with distance.
- **Mosaic band.** A solid tessera band for section breaks, loading moments, and title plates.
- **Hairline grid.** The bare structure. A quiet texture for slides and print backgrounds.

## Motion

- **Motion explains, it never decorates.** Pixels assemble, settle, or travel along the rail to show what is happening. Nothing moves only to be noticed.
- **Short and decisive.** Most interface motion runs 150 to 250ms, and no one-shot transition passes 800ms. Loops are the one exception: the boot mark cycles every 2 seconds, ambient fields every 6, and both close seamlessly.
- **Ease out on entry, ease in and out on exit.** Entries use cubic-bezier(0.23, 1, 0.32, 1). Exits and lifts use cubic-bezier(0.77, 0, 0.175, 1). No bounce, no overshoot.
- **Blocks move on the grid.** Squares fade and shift by whole grid steps. They never rotate, scale, blur, or glow.
- **Respect reduced motion.** Every loop has a still state. When the viewer asks for reduced motion, show the still frame.

Loops in the kit run 6 seconds at 30fps and close seamlessly: mark assembly, signal field, dissolve, payment rail, mosaic band. Each comes as MP4 on light and dark grounds and as a transparent WebM for compositing.

## Layout

- **One focal moment.** Each layout has one hero: a headline, a numeral, or an illustration. Everything else steps back.
- **Twelve columns, generous margins.** Margins are 6% of the shorter side. Content sits on a 12-column grid and fills no more than 60% of the frame.
- **Lockup at the margin.** The lockup sits in the top-left corner at the margin, between a tenth and a seventh of the frame width, and never under 120px wide.
- **Pixels anchor to an edge.** A pixel field grows from one edge or from the subject and disperses toward the content. It never sits behind body text.
- **Orange appears once.** Outside the pixel field, orange shows up once: the rail or a single corner block, never both, and never as a fill behind text.
- **Square and flat.** Square corners, 1px hairlines, and solid offset shadows only. No blur, no gradients behind copy, no rounded cards.

Templates in the kit:

- Link card, 1200x630: Open Graph and link previews.
- Square post, 1080x1080: X, LinkedIn, Instagram feed.
- Story, 1080x1920: Stories and vertical video covers.
- Header banner, 1500x500: X and LinkedIn profile headers.
- Title slide, 1920x1080: Decks and talk title cards.

## Voice

- Sentence case everywhere. Write the brand as vAPI.
- Plain, specific, and calm. No exclamation marks and no em dashes.
- State facts that can be checked. Never claim an audit, a guarantee, or custody terms that are not published.

## Illustration

Illustrations are architectural pencil drawings that dissolve into the tessera grid: warm stone tones, thin orange construction lines, and a few vivid blue squares. The full generation prompt is in `illustration/vapi-illustration-prompt.md`, with three reference images beside it.

## Downloads

- [Full brand kit (.zip)](https://vapinetwork.ai/branding/kit/vapi-brand-kit.zip)
- [Brand guide (.md)](https://vapinetwork.ai/branding/kit/vapi-brand-guide.md)
- Logo, color, for light grounds: [lockup SVG](https://vapinetwork.ai/branding/kit/logos/vapi-lockup-color-light.svg), [mark SVG](https://vapinetwork.ai/branding/kit/logos/vapi-mark-color-light.svg), [lockup PNG](https://vapinetwork.ai/branding/kit/logos/vapi-lockup-color-light.png)
- Logo, color, for dark grounds: [lockup SVG](https://vapinetwork.ai/branding/kit/logos/vapi-lockup-color-dark.svg), [mark SVG](https://vapinetwork.ai/branding/kit/logos/vapi-mark-color-dark.svg), [lockup PNG](https://vapinetwork.ai/branding/kit/logos/vapi-lockup-color-dark.png)
- Logo, black: [lockup SVG](https://vapinetwork.ai/branding/kit/logos/vapi-lockup-black.svg), [mark SVG](https://vapinetwork.ai/branding/kit/logos/vapi-mark-black.svg), [lockup PNG](https://vapinetwork.ai/branding/kit/logos/vapi-lockup-black.png)
- Logo, white: [lockup SVG](https://vapinetwork.ai/branding/kit/logos/vapi-lockup-white.svg), [mark SVG](https://vapinetwork.ai/branding/kit/logos/vapi-mark-white.svg), [lockup PNG](https://vapinetwork.ai/branding/kit/logos/vapi-lockup-white.png)
- Colors: [JSON](https://vapinetwork.ai/branding/kit/colors/vapi-colors.json), [CSS](https://vapinetwork.ai/branding/kit/colors/vapi-colors.css), [ASE](https://vapinetwork.ai/branding/kit/colors/vapi-colors.ase)
- [Illustration prompt](https://vapinetwork.ai/branding/kit/illustration/vapi-illustration-prompt.md)
- [Brand kit page](https://vapinetwork.ai/branding)