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.

Sidebar

An app's left sidebar: the main action and search on top, the navigation as vertical rows (an icon and a name, the page you are on marked, a count or a dot), then its sections. A column beside the page on a computer, a drawer on a phone.

Parts and their tokens

panelbackgroundcolor.bg.raisedlinecolor.line.base272 px wide on a computer; a drawer of up to 320 px on a phone
actionminHeightsize.tapradiusradius.mdcolorcolor.text.primaryiconcolor.accent.basethe one thing to start: New chat, Go live, New post
linkminHeightsize.tapradiusradius.mdcolorcolor.text.mutediconsize.iconthe page you are on: color.accent.base icon on a tint of it, color.text.primary
count optionalbackgroundcolor.accent.strongsizetype.size.captionweighttype.weight.heavyradiusradius.pill
section heading optionalcolorcolor.text.mutedsizetype.size.captionweighttype.weight.heavyuppercase
item optionalcolorcolor.text.primarysizetype.size.bodyhovercolor.bg.hoverone line, a mark before it and a time or a dot after it

How it behaves

Role: complementary, with the navigation as a nav; the page you are on is aria-current
Props: id label action nav* * required
States: default · current · focused · open
Name: its label (the product)
Keys: Tab down the rows; Enter opens; Escape closes the drawer and focus returns
Target: rows 38 px, 44 px with their gap on touch
Phone: a drawer over the page, opened from the bar, closed by the scrim, its close button, Escape or a page move
Computer: a column beside the page; its sections scroll on their own

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 OvSidebar(items: List<Pair<String, ImageVector>>, current: Int, onPick: (Int) -> Unit, drawer: DrawerState, content: @Composable () -> Unit) {
    ModalNavigationDrawer(drawerState = drawer, drawerContent = {
        ModalDrawerSheet(Modifier.widthIn(max = 320.dp)) {
            Column(Modifier.padding(OvScale.SpaceMd)) {
                items.forEachIndexed { i, (label, icon) ->
                    NavigationDrawerItem(label = { Text(label) }, icon = { Icon(icon, null, Modifier.size(OvScale.SizeIcon)) }, selected = i == current,
                        onClick = { onPick(i) }, shape = RoundedCornerShape(OvScale.RadiusMd), modifier = Modifier.heightIn(min = OvScale.SizeTap))
                }
            }
        }
    }, 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