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.

Card

One thing, the same anatomy everywhere: a stream, a clip, a listing, a game, a paste. The whole card is one link.

Parts and their tokens

  • mediabackgroundcolor.bg.hoverradiusradius.mdin the type's shape (16:9 streams and clips, 1:1 listings and memes, 4:3 games and reports); a picture, a text preview or the type's icon
  • badge optionalbackgroundrgba(0,0,0,.74)color#ffftop left, one word; LIVE is color.status.live.base
  • corner optionalbottom right: a length or a price
  • titlecolorcolor.text.primarysizetype.size.bodyweighttype.weight.boldtwo lines at most
  • sub optionalcolorcolor.text.secondarysizetype.size.metaone plain line
  • meta optionalcolorcolor.text.mutedsizetype.size.metawho · one count · when; a count of 0 is left out
  • more optionalthe ⋯ menu: Save, Remind, Share

How it behaves

Role
article with a heading link
Props
href* title* type ratio image alt badge live corner sub preview who avatar count when level * required
States
default · hover (the picture zooms, the peek shows) · focused · live
Name
its title (the heading's link)
Keys
Tab to the card, Enter opens it; the menu is its own stop
Target
the whole card
Phone
about 1.2 to a rail, swiped
Computer
a fixed width in a rail, or a grid
type
stream 16:9, a LIVE badge when live
clip 16:9 with its length
listing 1:1 with its price
game 4:3
post 16:9, a text preview when it has no picture

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 OvCard: View {
    let title: String
    var image: URL? = nil
    var ratio: CGFloat = 16.0 / 9.0
    var badge: String? = nil
    var sub: String? = nil
    var meta: String? = nil
    var body: some View {
        VStack(alignment: .leading, spacing: 2) {
            ZStack(alignment: .topLeading) {
                RoundedRectangle(cornerRadius: OvScale.radiusMd).fill(OvTokens.colorBgHover)
                if let image { AsyncImage(url: image) { $0.resizable().scaledToFill() } placeholder: { Color.clear } }
                if let badge { Text(badge).font(.caption2.weight(.heavy)).foregroundStyle(.white).padding(.horizontal, 8).background(.black.opacity(0.74), in: .rect(cornerRadius: 6)).padding(OvScale.spaceSm) }
            }
            .aspectRatio(ratio, contentMode: .fit).clipShape(.rect(cornerRadius: OvScale.radiusMd))
            .padding(.bottom, OvScale.spaceSm)
            Text(title).font(.system(size: OvScale.typeSizeBody, weight: .bold)).foregroundStyle(OvTokens.colorTextPrimary).lineLimit(2)
            if let sub { Text(sub).font(.system(size: OvScale.typeSizeMeta)).foregroundStyle(OvTokens.colorTextSecondary).lineLimit(1) }
            if let meta { Text(meta).font(.system(size: OvScale.typeSizeMeta)).foregroundStyle(OvTokens.colorTextMuted).lineLimit(1) }
        }
        .accessibilityElement(children: .combine).accessibilityAddTraits(.isLink)
    }
}

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