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.

Button

One action: a link or a form button. Primary for the one thing to do, quiet beside it, danger for what cannot be undone.

Buttons

Go live

Parts and their tokens

  • containerbackgroundcolor.accent.strongradiusradius.pillminHeightsize.tappaddingXspace.lg
  • labelcolorcolor.accent.onStrongsizetype.size.bodyweighttype.weight.bold
  • icon optionalsizesize.iconcolorcolor.accent.onStrong

How it behaves

Role
button (link when it has href)
Props
label* href icon kind small * required
States
default · hover · pressed · focused · disabled
Name
its label
Keys
Enter (and Space as a button)
Target
44 × 44 on touch
Phone
full width in a form's last row; two side by side in a hero
Computer
its own width
kind
primary container color.accent.strong, label color.accent.onStrong
quiet container transparent with a color.line.strong outline, label color.text.primary
danger container color.status.bad.base, label color.accent.onStrong

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 OvButton(label: String, onClick: () -> Unit, kind: OvKind = OvKind.Primary, icon: ImageVector? = null) {
    val c = MaterialTheme.colorScheme
    val colors = when (kind) {
        OvKind.Primary -> ButtonDefaults.buttonColors(containerColor = c.primaryContainer, contentColor = c.onPrimaryContainer)
        OvKind.Danger -> ButtonDefaults.buttonColors(containerColor = c.error, contentColor = c.onError)
        OvKind.Quiet -> ButtonDefaults.outlinedButtonColors(contentColor = c.onSurface)
    }
    val content: @Composable RowScope.() -> Unit = {
        if (icon != null) { Icon(icon, contentDescription = null, Modifier.size(OvScale.SizeIcon)); Spacer(Modifier.width(OvScale.SpaceSm)) }
        Text(label, fontWeight = FontWeight.Bold)
    }
    val m = Modifier.heightIn(min = OvScale.SizeTap)
    if (kind == OvKind.Quiet) OutlinedButton(onClick, m, shape = RoundedCornerShape(OvScale.RadiusPill), colors = colors, border = BorderStroke(1.dp, c.outline), content = content)
    else Button(onClick, m, shape = RoundedCornerShape(OvScale.RadiusPill), colors = colors, 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