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.
- Themes50 themesColour, type and shape for every site at once, each checked for contrast.
- Tokens7 formatsAny theme as CSS, Tailwind, Compose, SwiftUI, Flutter, Figma or DTCG.
- FontsTypefaces and pairings that read well on every screen.
- Icons287 iconsOne line, one grid, in the text’s colour; draw new ones with AI.
- The markThe Pair: its forms, sizes, motion and the rules for using it.
- Motion10 effectsOne kit of effects and one set of curves, shared by every site.
Components
The parts pages are built from, each the same on every site and specified for native apps.
- Components53 partsEach defined once: anatomy, states and roles, for the web, Compose and SwiftUI.
- KitEvery piece an OpenVibe page is made of, live, with the code to use it.
- FormsFields, choices and errors that read the same on every site.
- Loading7 shapesPlaceholders the size of what replaces them. Never a spinning ring.
- ProgressEvery state of an upload or a job, in words and one bar.
- UploaderThe shared file picker and queue: choose a file and keep going.
Guidance
What we decided and what production taught us, so new work starts from it.
Platforms
Taking the system off this site: into apps, code and AI assistants.