---
title: "The design system · OpenVibe.Design"
canonical: "https://openvibe.design/system"
updated: null
---

# The design system · OpenVibe.Design

HTML: [The design system · OpenVibe.Design](https://openvibe.design/system)

The system

# Everything OpenVibe is made of.

17 references in four groups: the foundations, the components built on them, the rules and patterns that guide new work, and the ways to take it into your own app. The same parts are on every OpenVibe site.

## Foundations

What every interface is made of: colour, type, icons, the mark and how things move.

- [**Themes** *50 themes* Colour, type and shape for every site at once, each checked for contrast.](/themes)
- [**Tokens** *7 formats* Any theme as CSS, Tailwind, Compose, SwiftUI, Flutter, Figma or DTCG.](/tokens)
- [**Fonts** Typefaces and pairings that read well on every screen.](/fonts)
- [**Icons** *287 icons* One line, one grid, in the text’s colour; draw new ones with AI.](/icons)
- [**The mark** The Pair: its forms, sizes, motion and the rules for using it.](/brand)
- [**Motion** *10 effects* One kit of effects and one set of curves, shared by every site.](/motion)

## Components

The parts pages are built from, each the same on every site and specified for native apps.

- [**Components** *53 parts* Each defined once: anatomy, states and roles, for the web, Compose and SwiftUI.](/components)
- [**Kit** Every piece an OpenVibe page is made of, live, with the code to use it.](/kit)
- [**Forms** Fields, choices and errors that read the same on every site.](/forms)
- [**Loading** *7 shapes* Placeholders the size of what replaces them. Never a spinning ring.](/loading)
- [**Progress** Every state of an upload or a job, in words and one bar.](/progress)
- [**Uploader** The shared file picker and queue: choose a file and keep going.](/uploader)

## Guidance

What we decided and what production taught us, so new work starts from it.

- [**Rules** *168 rules* Every style, design and organization decision, with the day and the reason.](/rules)
- [**Patterns** *48 patterns* Each with the bug that taught it, a live demo and native code.](/patterns)
- [**Prompts** *4 prompts* Every instruction this site sends an AI model, word for word.](/prompts)

## Platforms

Taking the system off this site: into apps, code and AI assistants.

- [**Apps** *3 platforms* From the web to Android and iOS, without a frame: the road and the rules.](/native)
- [**Developers** The API, MCP for AI assistants, and how to use any of it in your own app.](/developers)