Components

One design system, drawn natively everywhere

Every OpenVibe component is described by what it is: its parts, the tokens they wear, its states, and how it reads to a screen reader. The web draws it with the kit; an Android or iOS app draws the same component with its own views, so an app is never a web page in a frame.

Numbers

A strip of real numbers; zero and unknown values are left out. A number with a link makes its whole tile the link.

watching now
1,204
people chatting
48
streams live
12

Parts and their tokens

  • tilebackgroundcolor.bg.raisedlinecolor.line.baseradiusradius.md
  • valuecolorcolor.text.primarysizetype.size.titleweighttype.weight.heavytabular figures
  • labelcolorcolor.text.mutedsizetype.size.caption

How it behaves

Role
description list (label: value)
Props
items* label * required
States
default
Name
each label with its value
Keys
a linked tile is one Tab stop
Target
the tile
Phone
one strip that scrolls sideways
Computer
the same

Code

SwiftUI, on the theme file from Tokens (iOS): OvTokens (the theme you wear) for colour, OvScale for sizes.

// OpenVibe kit for SwiftUI: add the theme file from openvibe.design/tokens (iOS) and say which half the app wears.
typealias OvTokens = VibeDarkTokens   // or VibeLightTokens, from @Environment(\.colorScheme)
enum OvKind { case primary, quiet, danger }

struct OvStats: View {
    let items: [(value: String, label: String)]
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: OvScale.spaceSm) {
                ForEach(items.indices, id: \.self) { i in
                    VStack(alignment: .leading) {
                        Text(items[i].value).font(.system(size: OvScale.typeSizeTitle, weight: .heavy)).monospacedDigit()
                        Text(items[i].label).font(.system(size: OvScale.typeSizeCaption)).foregroundStyle(OvTokens.colorTextMuted)
                    }
                    .padding(.horizontal, 14).padding(.vertical, 8).frame(minWidth: 104, alignment: .leading)
                    .background(OvTokens.colorBgRaised, in: .rect(cornerRadius: OvScale.radiusMd))
                    .accessibilityElement(children: .combine)
                }
            }.padding(.horizontal, OvScale.spaceLg)
        }
    }
}

Shared interfaces

Web, Android and iOS definitions for the navigation, composer, sheets, settings and motion used across OpenVibe. See the whole registry, or read it as JSON at /api/v1/components.

Kit documents: screens as data

A screen can be sent as a tree of these components, for example { "type": "rail", "children": [{ "type": "card", … }] }. Every OpenVibe client renders the same document with its own views, so a screen can change without an app release (the server-driven UI pattern of Airbnb and DivKit). Documents are checked strictly: known components and props only, typed values, which children each takes, a size limit, and https or same-site links.

The specs as JSON The tokens they wear