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.

The one Share button and the sheet it opens, on every site: send the link (copy, the phone's own share sheet, the places people post, a QR code, embed, start at a time) and, for its owner, who can open it.

Parts and their tokens

buttonminHeightsize.tapweighttype.weight.boldShare, with the up-from-a-tray icon
sheetsurfacecolor.bg.raisedradiusradius.mdpaddingspace.lgfrom the bottom on a phone, a 520 px dialog on a computer; Escape, the backdrop and Done close it
linksurfacecolor.bg.hovertextcolor.text.primaryactioncolor.accent.strongonActioncolor.accent.onStrongthe link without https:// and Copy, which turns into a tick
device optionalminHeightsize.tapphones: "Send with your phone", the platform's own sheet with its contacts
placessizesize.avatarlabeltype.size.metaround brand tiles, the person's recent ones first, the rest behind More (n)
panel optionallinecolor.line.baseQR code, embed code or a Mastodon server, under the places
access optionalmutedcolor.text.mutedthe owner only: Everyone · Anyone with the link · Specific people · Only me, the people, Transfer

How it behaves

Role: button that opens a modal sheet
Props: title* url text image embed kind id label small * required
States: closed · open · copied · panel open · saving · not the owner (send only)
Name: "Share", and the sheet is named "Share <title>"
Keys: Enter opens; Tab moves; Escape closes (asking first when there are unsaved changes)
Target: 44 px
Phone: a sheet from the bottom, the home bar cleared, Send with your phone first, four places a row
Computer: a dialog, six places a row

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 OvShare(title: String, url: String, label: String = "Share", onShare: (title: String, url: String) -> Unit) {
    // The app hands the link to the platform's own sheet, with Direct Share's contacts. On Android:
    // context.startActivity(Intent.createChooser(Intent(Intent.ACTION_SEND).apply { type = "text/plain"; putExtra(Intent.EXTRA_TEXT, url) }, title))
    OutlinedButton(onClick = { onShare(title, url) }, modifier = Modifier.heightIn(min = OvScale.SizeTap), shape = RoundedCornerShape(OvScale.RadiusPill)) {
        Icon(Icons.Default.Share, contentDescription = null)
        Spacer(Modifier.width(OvScale.SpaceSm))
        Text(label, fontWeight = FontWeight.Bold)
    }
}

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