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.

Rail

A row of cards that scrolls sideways and snaps, with its heading and one See all link. From 760 px it can wrap into a grid.

Live now

See all

Parts and their tokens

  • headsizetype.size.leadweighttype.weight.heavythe title and See all (44 px to the touch)
  • trackgapspace.mdsnaps to each card; bleeds to the screen's edge on a phone
  • arrows optional‹ › on computers only, each hidden at its end

How it behaves

Role
region named by its heading; a list of cards
Props
id title more size wrap label * required
States
default · empty · loading
Name
its title
Keys
Tab moves card to card; the arrows are buttons
Target
See all 44 px
Phone
about 1.2 cards showing, swiped
Computer
arrows, or a grid with wrap
size
s square things (memes, deals), 190 px
m 16:9 pictures, 280 px
l wide features, 400 px

Code

Jetpack Compose, on the theme file from Tokens (Android): Material 3 roles for colour, OvScale for sizes.

// OpenVibe kit for Jetpack Compose: add the theme file from openvibe.design/tokens (Android) and wrap the app in
// MaterialTheme(colorScheme = if (isSystemInDarkTheme()) VibeDarkColorScheme else VibeLightColorScheme) { … }
enum class OvKind { Primary, Quiet, Danger }
enum class OvNoticeKind { Ok, Info, Warn, Error }

@Composable
fun OvRail(title: String, seeAll: (() -> Unit)? = null, content: LazyListScope.() -> Unit) {
    Column(Modifier.semantics { heading() }) {
        Row(Modifier.fillMaxWidth().padding(horizontal = OvScale.SpaceLg), verticalAlignment = Alignment.CenterVertically) {
            Text(title, Modifier.weight(1f), fontWeight = FontWeight.ExtraBold, fontSize = OvScale.TypeSizeLead)
            if (seeAll != null) TextButton(seeAll, Modifier.heightIn(min = OvScale.SizeTap)) { Text("See all") }
        }
        val state = rememberLazyListState()
        LazyRow(state = state, flingBehavior = rememberSnapFlingBehavior(state), contentPadding = PaddingValues(horizontal = OvScale.SpaceLg),
            horizontalArrangement = Arrangement.spacedBy(OvScale.SpaceMd), content = content)
    }
}

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