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.

Row

One item in a list: its mark, the title with a badge and the time on one line, one muted line under it, a trailing control.

Parts and their tokens

  • mark optionalsizesize.avatara picture, or up to two letters on a colour from the name
  • titlecolorcolor.text.primaryweighttype.weight.bold
  • meta optionalcolorcolor.text.mutedsizetype.size.metathe time, on the title's line
  • sub optionalcolorcolor.text.mutedsizetype.size.metaone line, cut with …
  • trail optionala count, a switch or a button

How it behaves

Role
listitem (a link when it has href)
Props
href rel title* meta sub mark unread * required
States
default · hover · pressed · focused · disabled
Name
its title and sub-line
Keys
Enter opens it
Target
the row, at least 56 px tall
Phone
full width, divided by lines
Computer
the same, in a panel
unread
0 plain
n bold title and a dot with the count

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 OvRow(title: String, onOpen: (() -> Unit)? = null, sub: String? = null, meta: String? = null, mark: (@Composable () -> Unit)? = null, trail: (@Composable () -> Unit)? = null) {
    ListItem(
        headlineContent = { Text(title, fontWeight = FontWeight.Bold, maxLines = 1, overflow = TextOverflow.Ellipsis) },
        supportingContent = sub?.let { { Text(it, maxLines = 1, overflow = TextOverflow.Ellipsis, fontSize = OvScale.TypeSizeMeta) } },
        leadingContent = mark, trailingContent = trail ?: meta?.let { { Text(it, fontSize = OvScale.TypeSizeMeta) } },
        modifier = (if (onOpen != null) Modifier.clickable(onClick = onOpen) else Modifier).heightIn(min = 56.dp),
    )
}

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