# OpenVibe.Design

> OpenVibe.Design is the Design room of the OpenVibe network: browse OpenVibe's themes, try them on previews, edit one with contrast checks, use it, submit it to the gallery, and roll back to any earlier setting.

Theme selection stays in OpenVibe.Network (its theme API); this service signs the person in and proxies their calls. The pages here are server-rendered and readable without JavaScript, and the theme catalogue is public. MCP server: POST https://openvibe.design/mcp (Streamable HTTP); public themes, tokens, components and the icons (search, SVG, code in any format, a migration from Font Awesome, Lucide or Material).

## The four doors

- [See](https://openvibe.design/see.md): how OpenVibe looks and moves: look, tokens, the mark, components, the kit, forms, patterns, motion, loading, progress and native apps
- [Make](https://openvibe.design/make.md): what you make with it: create, themes, icons, fonts, uploader, prompts and the Arena
- [Rules](https://openvibe.design/rules.md): the register of every style, design and organization decision, then the system map at /system
- [Use](https://openvibe.design/use.md): building with it: the SDK, the API, the files and the versions

## Start here

- [OpenVibe.Design](https://openvibe.design/index.md): the theme catalogue
- [Themes](https://openvibe.design/themes.md): try, edit, use, submit and roll back a theme
- [Rules](https://openvibe.design/rules.md): every style, design and organization decision behind OpenVibe, with the day and the reason; read it before designing for OpenVibe. JSON: GET /api/v1/rules
- [Shared releases](https://openvibe.design/changes.md): every openvibe-shared release in the pinned changelog, newest first, with the component pages and rule numbers it touches and the screenshots the repo holds. JSON: GET /api/v1/changes
- [The design system](https://openvibe.design/system.md): every reference page in four groups: foundations, components, guidance, platforms
- [Tokens](https://openvibe.design/tokens.md): any theme as CSS, Tailwind, Compose (Android), SwiftUI (iOS), Flutter, Figma or DTCG JSON; the API is GET /api/v1/tokens/:theme?format=
- [The OpenVibe glyphs](https://openvibe.design/icons) (HTML): every icon in one hand, each with its own page (/icons/<name>): SVG, PNG at any size and colour (/icons/<name>.png?size=&color=&stroke=&pad=&ground=&bg=), the WOFF2/TTF/OTF fonts and the sprite (/icons/pack/<file>); style=auto|line|solid (auto: the solid drawing at 18 px and under); /icons/<name>.mjs (ES module), .xml (Android VectorDrawable), /icons/<name>/favicon.zip; the <ov-icon name="…"> web component at /ov-icon.js; the registry as data at GET /api/v1/glyphs (?names=a,fa-b,lucide:c,material:d for just those); GET /api/v1/glyphs/suggest?label=&context=&rank=1 proposes the best glyphs for the words on a button (rank=1 asks a small model when the words are new); POST /api/v1/glyphs/migrate {text} lists every Font Awesome, Lucide, Material or MUI icon in a page or code with its OpenVibe twin (/icons/migrate is the page). All open, no sign-in, CORS *
- [Open font library](https://openvibe.design/fonts.md): Open licence typefaces with live previews, every style, licence, source, CSS and download. The self-hosted families (served by openvibe.design itself) are on the same page; their CSS is GET /fonts/css2?family=Name:wght@400;700 and their list GET /api/v1/fonts. The wider catalogue is GET /api/v1/fonts/library and /api/v1/fonts/<family>; MCP tools list and get fonts.
- [A free Font Awesome alternative](https://openvibe.design/icons/font-awesome-alternative) (HTML): one script keeps Font Awesome markup, classes, animations and data-fa-transform, and shows the OpenVibe glyphs
- [Loading](https://openvibe.design/loading.md): how OpenVibe waits: placeholders shaped like the content (kit.skeleton: card, row, tile, chip, line, chat, stat), the mark at work instead of a spinner (OpenVibeLoading), the navbar while a page moves (OpenVibeNavbar.busy), and the rules
- [Progress](https://openvibe.design/progress.md): ov-progress in all six states, with time remaining, reduced motion, tokens and code
- [Uploader](https://openvibe.design/uploader.md): the shared drop card, file preview, queue and total progress, with code
- [Forms](https://openvibe.design/forms.md): OpenVibe’s own select (a menu on a computer, a sheet on a phone; options with state, badge and a setup link), switches, fields and choice cards: ov-forms.js and ov-forms.css
- [The OpenVibe mark](https://openvibe.design/brand.md): the logo, its states and motion, colours, the brand face, SVG files and code (openvibe-shared/mark, ov-mark.js)
- [The Design Arena](https://openvibe.design/arena.md): one prompt, three AI designers, blind votes and an Elo leaderboard
- [For developers](https://openvibe.design/developers.md): the theme API proxy

## Make things

- [Make a typeface](https://openvibe.design/fonts/make.md): describe a typeface and the model draws the letters; POST /api/v1/typefaces {prompt, baseFamily?, name?} returns the outlines and the font files (/api/v1/typefaces/<id>/font.woff2 and .otf); redraw one letter with POST /api/v1/typefaces/<id>/glyph {char, note}; MCP tool openvibe_design_make_typeface
- [Make a vector](https://openvibe.design/vectors/make.md): describe an icon, an illustration or a pattern and the model draws one clean SVG; POST /api/v1/vectors {prompt, kind} returns it; change it with POST /api/v1/vectors/<id>/edit {note}; the drawing as SVG or PNG at /vectors/made/<id>.svg and .png; MCP tool openvibe_design_make_vector

## Themes

- [Abyss](https://openvibe.design/t/abyss.md): dark — Nearly black; the interface is the light.
- [Alucard](https://openvibe.design/t/alucard.md): light — Dracula's daylight twin: purple ink on warm parchment.
- [Amber](https://openvibe.design/t/hacker.md): dark — Amber phosphor on black.
- [Arctic](https://openvibe.design/t/arctic.md): dark — Frost surfaces, cyan light, crisp white text.
- [Ash](https://openvibe.design/t/ash.md): light — Ember cooled to ash: warm greys with a red glow.
- [Bright](https://openvibe.design/t/bright.md): light — Abyss turned inside out: pure white, ink black, nothing else.
- [Catppuccin Latte](https://openvibe.design/t/catppuccin-latte.md): light — Soothing pastels on latte.
- [Catppuccin Mocha](https://openvibe.design/t/catppuccin-mocha.md): dark — Soothing pastels on mocha.
- [Copper](https://openvibe.design/t/copper.md): dark — Bronze on dark walnut.
- [Dawn](https://openvibe.design/t/dawn.md): light — Midnight's indigo in the first light.
- [Daylight](https://openvibe.design/t/daylight.md): light — Bright white with warm accents.
- [Dracula](https://openvibe.design/t/dracula.md): dark — The Dracula scheme, as its authors drew it.
- [Dusk](https://openvibe.design/t/sunset.md): dark — Orange fading to rose over dark ground.
- [Ember](https://openvibe.design/t/ember.md): dark — Smouldering red on warm charcoal.
- [Frost](https://openvibe.design/t/frost.md): dark — Winter: frosted teal over a cold midnight sky. On by itself through December.
- [Greenbar](https://openvibe.design/t/greenbar.md): light — Matrix on paper: green-bar printout green on white.
- [Gruvbox](https://openvibe.design/t/gruvbox-dark.md): dark — Warm retro contrast.
- [Gruvbox Light](https://openvibe.design/t/gruvbox-light.md): light — Cream with bold retro accents.
- [Hayride](https://openvibe.design/t/hayride.md): light — Halloween in daylight: pumpkin orange on warm hay. Midnight Pumpkin's light half.
- [High Contrast](https://openvibe.design/t/high-contrast.md): dark — Bold yellow on black for maximum legibility.
- [High Contrast Light](https://openvibe.design/t/high-contrast-light.md): light — Black on white with strong edges and deep blue links.
- [Lavender](https://openvibe.design/t/lavender.md): light — Calm pale violet.
- [Matrix](https://openvibe.design/t/matrix.md): dark — Green phosphor on black.
- [Meadow](https://openvibe.design/t/meadow.md): light — Spring greens in daylight.
- [Midnight](https://openvibe.design/t/midnight.md): dark — Blue-black with steel-indigo light.
- [Midnight Pumpkin](https://openvibe.design/t/halloween.md): dark — Halloween: pumpkin orange on OpenVibe's midnight navy. On by itself through October (Hayride in light).
- [Monokai](https://openvibe.design/t/monokai.md): dark — The Monokai editor palette.
- [Monokai Light](https://openvibe.design/t/monokai-light.md): light — Monokai's greens on a calm off-white page.
- [Neon Tokyo](https://openvibe.design/t/neon-tokyo.md): dark — Hot pink neon on wet chrome.
- [Nord](https://openvibe.design/t/nord.md): dark — The Nord palette: muted polar blues.
- [Nord Light](https://openvibe.design/t/nord-light.md): light — Nord's Snow Storm: frost blues on arctic white.
- [Paper](https://openvibe.design/t/paper.md): light — Aged paper and ink.
- [Peach](https://openvibe.design/t/peach.md): light — Peach and coral, soft and warm.
- [Rose](https://openvibe.design/t/rose.md): light — Blush pink, light and delicate.
- [Sakura](https://openvibe.design/t/sakura-night.md): dark — Cherry blossom on indigo.
- [Sand](https://openvibe.design/t/sand.md): light — Desert tan and warm stone.
- [Shallows](https://openvibe.design/t/shallows.md): light — Trench in the sun: clear teal water over white sand.
- [Slate](https://openvibe.design/t/slate.md): dark — Neutral grey with a cool violet accent.
- [Snow](https://openvibe.design/t/snow.md): light — Pure white with icy blue.
- [Snowfall](https://openvibe.design/t/snowfall.md): light — Winter in daylight: frosted teal on fresh snow. Frost's light half.
- [Solarized Dark](https://openvibe.design/t/solarized-dark.md): dark — Ethan Schoonover's precision palette, dark.
- [Solarized Light](https://openvibe.design/t/solarized-light.md): light — Ethan Schoonover's precision palette, light.
- [Tokyo Day](https://openvibe.design/t/tokyo-day.md): light — Neon Tokyo by day: hot pink on soft white.
- [Trench](https://openvibe.design/t/ocean-deep.md): dark — Pressure-dark water with a teal glow.
- [Understory](https://openvibe.design/t/forest.md): dark — Deep greens under the canopy.
- [Vapor](https://openvibe.design/t/vapor.md): dark — Magenta and teal, straight off a VHS tape.
- [Vapor Day](https://openvibe.design/t/vapor-day.md): light — Vapor in pastel daylight: magenta on lilac.
- [Vibe](https://openvibe.design/t/vibe.md): dark — OpenVibe's default: deep blue night with an electric-blue glow.
- [Vibe Light](https://openvibe.design/t/cloud.md): light — OpenVibe's default in daylight: airy blue-white with the same blue.
- [Violet Hour](https://openvibe.design/t/violet-hour.md): dark — Charcoal and violet: the colours OpenVibe started with.

## Component registry

- [The component registry](https://openvibe.design/components/registry.md): every shared interface as a design.component@1 definition, for web, Android and iOS
- [Navbar](https://openvibe.design/components/navbar.md): The site identity and navigation: the brand as one button, the menu button at the right, the person last. Definition: https://openvibe.design/api/v1/components/navbar
- [Menu](https://openvibe.design/components/menu.md): One navigation sheet: Here, Feed, Vibe with Chat · Agents, Chat and You, with the pressed button flying to its tab. Definition: https://openvibe.design/api/v1/components/menu
- [You home](https://openvibe.design/components/you-home.md): The personal starting view inside the menu. Definition: https://openvibe.design/api/v1/components/you-home
- [Dock](https://openvibe.design/components/dock.md): Persistent place for the current task, clear of the phone app bar and keyboard. Definition: https://openvibe.design/api/v1/components/dock
- [Dock tabs](https://openvibe.design/components/dock-tabs.md): The phone destinations attached to the bottom app bar. Definition: https://openvibe.design/api/v1/components/dock-tabs
- [Form controls](https://openvibe.design/components/form-controls.md): OpenVibe's own checkbox, radio, switch, field and button on every site: drawn by the system, in the site's colours, with motion that follows the person. Definition: https://openvibe.design/api/v1/components/form-controls
- [Search field](https://openvibe.design/components/search-field.md): One search field for every site: a pill with suggestions, recent searches and a ghost completion. Definition: https://openvibe.design/api/v1/components/search-field
- [Thread composer](https://openvibe.design/components/thread-composer.md): A multiline message field with Options, attachments and send or stop. Definition: https://openvibe.design/api/v1/components/thread-composer
- [Chat](https://openvibe.design/components/chat.md): A conversation: messages as room lines or bubbles, each with its actions in one cluster at its corner, and the box that sends, replies and edits. Definition: https://openvibe.design/api/v1/components/chat
- [Sheet](https://openvibe.design/components/sheet.md): A modal task surface: one heading, one close action and scrollable content. Definition: https://openvibe.design/api/v1/components/sheet
- [Popover](https://openvibe.design/components/popover.md): A small anchored set of choices that closes on outside tap. Definition: https://openvibe.design/api/v1/components/popover
- [Keyboard behavior](https://openvibe.design/components/keyboard.md): Shared focus, Escape and inset rules for controls near the screen edge. Definition: https://openvibe.design/api/v1/components/keyboard
- [Kit row](https://openvibe.design/components/kit-row.md): One tappable item with identity, supporting text and a trailing fact or action. Definition: https://openvibe.design/api/v1/components/kit-row
- [Kit card](https://openvibe.design/components/kit-card.md): One content object with media, title and context. Definition: https://openvibe.design/api/v1/components/kit-card
- [Kit section](https://openvibe.design/components/kit-section.md): A named group with an optional note and count. Definition: https://openvibe.design/api/v1/components/kit-section
- [Empty state](https://openvibe.design/components/empty-state.md): A truthful explanation and one next action when a group has no items. Definition: https://openvibe.design/api/v1/components/empty-state
- [Switch row](https://openvibe.design/components/switch-row.md): One setting with a label, explanation and on or off control. Definition: https://openvibe.design/api/v1/components/switch-row
- [Segmented control](https://openvibe.design/components/segmented-control.md): A small exclusive choice set with a visible current value. Definition: https://openvibe.design/api/v1/components/segmented-control
- [Upload and progress](https://openvibe.design/components/upload-progress.md): A file transfer with a truthful determinate meter and cancel action. Definition: https://openvibe.design/api/v1/components/upload-progress
- [Model chip](https://openvibe.design/components/ai-choice.md): The selected AI model as a compact choice that opens the model picker. Definition: https://openvibe.design/api/v1/components/ai-choice
- [Motion tokens](https://openvibe.design/components/motion-tokens.md): The four shared durations and curves that give movement one pace. Definition: https://openvibe.design/api/v1/components/motion-tokens
- [Pop motion](https://openvibe.design/components/pop-motion.md): The shared small-scale entrance for a menu or affordance. Definition: https://openvibe.design/api/v1/components/pop-motion
- [Sheet motion](https://openvibe.design/components/sheet-motion.md): The bottom sheet entrance and exit without moving underlying content. Definition: https://openvibe.design/api/v1/components/sheet-motion
- [Menu motion](https://openvibe.design/components/menu-motion.md): The navigation menu entrance tied to its trigger. Definition: https://openvibe.design/api/v1/components/menu-motion

## Machine-readable

- [The theme catalogue (JSON)](https://openvibe.design/api/themes): public, cached for 5 minutes
- [Self-hosted fonts (JSON)](https://openvibe.design/api/v1/fonts): the families openvibe.design serves itself: family, slug, weights, licence, source; CSS at /fonts/css2
- [Font catalogue (JSON)](https://openvibe.design/api/v1/fonts/library): the wider open licence catalogue, cached for 5 minutes
- [The component registry (JSON)](https://openvibe.design/api/v1/components): design.component@1 definitions for every shared interface; one at /api/v1/components/<name>; the SDK exposes ov.design.components()
- [The Arena dataset (JSONL)](https://openvibe.design/api/v1/arena/dataset.jsonl): prompts, outputs and votes, no voters
- [Agent manifest](https://openvibe.design/.well-known/agent.json)

## Optional

- [Sitemap](https://openvibe.design/sitemap.xml)
- [Release metadata (JSON)](https://openvibe.design/release.json)
- [OpenVibe.Network](https://openvibe.network): accounts and the theme API this service proxies