# Visual identity

The documentation follows the `vivra-frontend` handoff: light surfaces, compact typography, orange accents, and a pulse line. The dark theme uses the dapp's surfaces.

## Colors

| Use | Frontend token | Value |
| --- | --- | --- |
| Main accent | `--vv-orange` | `#FF5A1F` |
| Orange text on light backgrounds | `--vv-orange-ink` | `#C23C08` |
| Deep orange | `--vv-orange-deep` | `#F2551C` |
| Gradient endpoint | `--vv-orange-dark` | `#C93A0E` |
| Peach | `--vv-peach` | `#FFE6DA` |
| Light peach background | `--vv-peach-2` | `#FFF1EA` |
| Ink | `--vv-ink` | `#0B0B0C` |
| Light background | `--vv-white` | `#FFFFFF` |

Interface colors use CSS variables. Orange text on white uses the ink shade to preserve contrast.

## Typography and shapes

**Inter Tight** is used for headings and body text. **Fragment Mono** distinguishes labels, time markers, and code. Headlines use tight tracking; cards have 20 px rounded corners and large panels use 24 px.

The “vivra” wordmark has its orange dot. The white, peach, and orange gradient follows the landing page's visual progression without reusing fictional figures from its illustrations.

## Reading and navigation

The local version adds topic-based sidebar navigation, full-text search, a page outline, previous / next links, and a collapsible mobile menu.

Theme preferences are saved in the browser. Animations respect reduced-motion preferences. Navigation and articles remain usable without JavaScript; search and convenience controls require JavaScript.

## Publishing on GitBook

Markdown content and `SUMMARY.md` are prepared for GitBook synchronization. `.gitbook.yaml` points to the `content` directory.

This repository's custom interface is a standalone static website. GitBook does not import its CSS or components: when publishing on that service, apply the available branding options separately in its interface. The repository contains the colors and assets needed.