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.