--- title: "Vibe as code: CSS, Compose, SwiftUI, Flutter, Figma" canonical: "https://openvibe.design/tokens" updated: null --- # Vibe as code: CSS, Compose, SwiftUI, Flutter, Figma HTML: [Vibe as code: CSS, Compose, SwiftUI, Flutter, Figma](https://openvibe.design/tokens) OpenVibe Tokens # Your theme, as code Take any OpenVibe theme into your own app, its light and dark halves together: the web, Android, iOS, Flutter or Figma. The colours are the ones the network paints. Theme With its other half - **Vibe** Dark - **Vibe Light** Light ## CSS variables [Download VibeTheme.css](/api/v1/tokens/vibe?format=css&download=1) Paste it into your stylesheet: `--ov-color-bg-base` and the rest, with the network's own names (`--bg-primary`…) pointing at them. The light half switches on `data-theme-mode="light"`. ~~~~ /* Vibe (dark) — generated by openvibe-shared/tokens v1 from the OpenVibe theme "vibe". Regenerate instead of editing. */ :root[data-theme-mode="dark"] { --ov-color-bg-base: #0a0f1c; --ov-color-bg-surface: #101828; --ov-color-bg-subtle: #172238; --ov-color-bg-raised: #131c2e; --ov-color-bg-hover: #1c2a44; --ov-color-bg-input: #0d1424; --ov-color-text-primary: #e6edf7; --ov-color-text-secondary: #96a7c2; --ov-color-text-muted: #8192ac; --ov-color-accent-base: #3b82f6; --ov-color-accent-light: #60a5fa; --ov-color-accent-dark: #1d4ed8; --ov-color-accent-strong: #3472d8; --ov-color-accent-on: #ffffff; --ov-color-accent-on-strong: #ffffff; --ov-color-accent-glow: rgba(59,130,246,0.35); --ov-color-line-base: #1f2d47; --ov-color-line-strong: #2c3d5c; --ov-color-status-ok-base: #22c55e; --ov-color-status-ok-text: #22c55e; --ov-color-status-warn-base: #f59e0b; --ov-color-status-warn-text: #f59e0b; --ov-color-status-bad-base: #ef4444; --ov-color-status-bad-text: #f26262; --ov-color-status-info-base: #38bdf8; --ov-color-status-info-text: #38bdf8; --ov-color-status-live-base: #ef4444; --ov-color-status-live-text: #f26262; --ov-shadow-base: 0px 2px 12px rgba(0,0,0,0.45); --ov-shadow-large: 0px 8px 32px rgba(0,0,0,0.6); --ov-radius-sm: 10px; --ov-radius-md: 14px; --ov-radius-lg: 20px; --ov-radius-pill: 999px; --ov-space-xs: 4px; --ov-space-sm: 8px; --ov-space-md: 12px; --ov-space-lg: 16px; --ov-space-xl: 24px; --ov-space-xxl: 32px; --ov-size-tap: 44px; --ov-size-icon: 20px; --ov-size-avatar: 34px; --ov-type-family-base: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ov-type-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ov-type-size-caption: 12px; --ov-type-size-meta: 13px; --ov-type-size-body: 15px; --ov-type-size-lead: 17px; --ov-type-size-title: 20px; --ov-type-size-headline: 24px; --ov-type-size-display: 34px; --ov-type-weight-regular: 400; --ov-type-weight-medium: 600; --ov-type-weight-bold: 700; --ov-type-weight-heavy: 800; --ov-motion-duration-fast: 180ms; --ov-motion-duration-base: 260ms; --ov-motion-duration-slow: 360ms; --ov-motion-duration-reduced: 0ms; --ov-motion-easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1); --ov-motion-easing-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* The network's own names, for code written against them. */ --bg-primary: var(--ov-color-bg-base); --bg-secondary: var(--ov-color-bg-surface); --bg-tertiary: var(--ov-color-bg-subtle); --bg-card: var(--ov-color-bg-raised); --bg-hover: var(--ov-color-bg-hover); --bg-input: var(--ov-color-bg-input); --text-primary: var(--ov-color-text-primary); --text-secondary: var(--ov-color-text-secondary); --text-muted: var(--ov-color-text-muted); --accent: var(--ov-color-accent-base); --accent-light: var(--ov-color-accent-light); --accent-dark: var(--ov-color-accent-dark); --accent-strong: var(--ov-color-accent-strong); --on-accent: var(--ov-color-accent-on); --on-accent-strong: var(--ov-color-accent-on-strong); --accent-glow: var(--ov-color-accent-glow); --border: var(--ov-color-line-base); --border-light: var(--ov-color-line-strong); --success: var(--ov-color-status-ok-base); --success-text: var(--ov-color-status-ok-text); --warning: var(--ov-color-status-warn-base); --warning-text: var(--ov-color-status-warn-text); --danger: var(--ov-color-status-bad-base); --danger-text: var(--ov-color-status-bad-text); --info: var(--ov-color-status-info-base); --info-text: var(--ov-color-status-info-text); --live-red: var(--ov-color-status-live-base); --live-red-text: var(--ov-color-status-live-text); --shadow: var(--ov-shadow-base); --shadow-lg: var(--ov-shadow-large); color-scheme: dark; } :root[data-theme-mode="light"] { --ov-color-bg-base: #f0f5ff; --ov-color-bg-surface: #e8eef8; --ov-color-bg-subtle: #dde5f0; --ov-color-bg-raised: #f5f8ff; --ov-color-bg-hover: #e4ecf8; --ov-color-bg-input: #edf2fa; --ov-color-text-primary: #1a2040; --ov-color-text-secondary: #4a5070; --ov-color-text-muted: #5e637b; --ov-color-accent-base: #245dd5; --ov-color-accent-light: #3c669b; --ov-color-accent-dark: #2563eb; --ov-color-accent-strong: #245dd5; --ov-color-accent-on: #ffffff; --ov-color-accent-on-strong: #ffffff; --ov-color-accent-glow: rgba(36,93,213,0.35); --ov-color-line-base: #d0d8ea; --ov-color-line-strong: #bcc8e0; --ov-color-status-ok-base: #22c55e; --ov-color-status-ok-text: #147237; --ov-color-status-warn-base: #f59e0b; --ov-color-status-warn-text: #895806; --ov-color-status-bad-base: #ef4444; --ov-color-status-bad-text: #ba3535; --ov-color-status-info-base: #38bdf8; --ov-color-status-info-text: #1f6a8b; --ov-color-status-live-base: #ef4444; --ov-color-status-live-text: #ba3535; --ov-shadow-base: 0px 2px 12px rgba(0,20,60,0.06); --ov-shadow-large: 0px 8px 32px rgba(0,20,60,0.1); --ov-radius-sm: 10px; --ov-radius-md: 14px; --ov-radius-lg: 20px; --ov-radius-pill: 999px; --ov-space-xs: 4px; --ov-space-sm: 8px; --ov-space-md: 12px; --ov-space-lg: 16px; --ov-space-xl: 24px; --ov-space-xxl: 32px; --ov-size-tap: 44px; --ov-size-icon: 20px; --ov-size-avatar: 34px; --ov-type-family-base: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ov-type-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ov-type-size-caption: 12px; --ov-type-size-meta: 13px; --ov-type-size-body: 15px; --ov-type-size-lead: 17px; --ov-type-size-title: 20px; --ov-type-size-headline: 24px; --ov-type-size-display: 34px; --ov-type-weight-regular: 400; --ov-type-weight-medium: 600; --ov-type-weight-bold: 700; --ov-type-weight-heavy: 800; --ov-motion-duration-fast: 180ms; --ov-motion-duration-base: 260ms; --ov-motion-duration-slow: 360ms; --ov-motion-duration-reduced: 0ms; --ov-motion-easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1); --ov-motion-easing-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* The network's own names, for code written against them. */ --bg-primary: var(--ov-color-bg-base); --bg-secondary: var(--ov-color-bg-surface); --bg-tertiary: var(--ov-color-bg-subtle); --bg-card: var(--ov-color-bg-raised); --bg-hover: var(--ov-color-bg-hover); --bg-input: var(--ov-color-bg-input); --text-primary: var(--ov-color-text-primary); --text-secondary: var(--ov-color-text-secondary); --text-muted: var(--ov-color-text-muted); --accent: var(--ov-color-accent-base); --accent-light: var(--ov-color-accent-light); --accent-dark: var(--ov-color-accent-dark); --accent-strong: var(--ov-color-accent-strong); --on-accent: var(--ov-color-accent-on); --on-accent-strong: var(--ov-color-accent-on-strong); --accent-glow: var(--ov-color-accent-glow); --border: var(--ov-color-line-base); --border-light: var(--ov-color-line-strong); --success: var(--ov-color-status-ok-base); --success-text: var(--ov-color-status-ok-text); --warning: var(--ov-color-status-warn-base); --warning-text: var(--ov-color-status-warn-text); --danger: var(--ov-color-status-bad-base); --danger-text: var(--ov-color-status-bad-text); --info: var(--ov-color-status-info-base); --info-text: var(--ov-color-status-info-text); --live-red: var(--ov-color-status-live-base); --live-red-text: var(--ov-color-status-live-text); --shadow: var(--ov-shadow-base); --shadow-lg: var(--ov-shadow-large); color-scheme: light; } ~~~~ ## Files your tools can fetch This theme on its own, with the motion every OpenVibe page shares and the mark’s colours. Each one has a lasting address a build or a design tool can read straight from here. - [**Design tokens (JSON)** `.tokens.json`](/tokens/vibe.tokens.json) - [**CSS variables** `.css`](/tokens/vibe.css) - [**Tailwind preset** `.tailwind.js`](/tokens/vibe.tailwind.js) - [**Style Dictionary** `.style-dictionary.json`](/tokens/vibe.style-dictionary.json) - [**iOS (Swift)** `.swift`](/tokens/vibe.swift) - [**Android (Kotlin)** `.kt`](/tokens/vibe.kt) - [**Android (colors.xml)** `.xml`](/tokens/vibe.xml) Every colour token · 28 of them - `color.bg.base`** `#0a0f1c` ** `#f0f5ff`The page behind everything - `color.bg.surface`** `#101828` ** `#e8eef8`Bands and side panels - `color.bg.subtle`** `#172238` ** `#dde5f0`Wells, tracks and quiet fills - `color.bg.raised`** `#131c2e` ** `#f5f8ff`Cards, rows and sheets - `color.bg.hover`** `#1c2a44` ** `#e4ecf8`A control under the pointer or finger - `color.bg.input`** `#0d1424` ** `#edf2fa`Text fields - `color.text.primary`** `#e6edf7` ** `#1a2040`Body text and titles - `color.text.secondary`** `#96a7c2` ** `#4a5070`Supporting text - `color.text.muted`** `#8192ac` ** `#5e637b`Hints and meta lines - `color.accent.base`** `#3b82f6` ** `#245dd5`Links, icons, focus rings - `color.accent.light`** `#60a5fa` ** `#3c669b`The accent a step lighter - `color.accent.dark`** `#1d4ed8` ** `#2563eb`The accent a step darker - `color.accent.strong`** `#3472d8` ** `#245dd5`Filled buttons - `color.accent.on`** `#ffffff` ** `#ffffff`Text on the accent - `color.accent.onStrong`** `#ffffff` ** `#ffffff`Text on a filled button - `color.accent.glow`** `rgba(59,130,246,0.35)` ** `rgba(36,93,213,0.35)`Glows and halos - `color.line.base`** `#1f2d47` ** `#d0d8ea`Dividers and outlines - `color.line.strong`** `#2c3d5c` ** `#bcc8e0`Outlines that must show - `color.status.ok.base`** `#22c55e` ** `#22c55e`Success fills - `color.status.ok.text`** `#22c55e` ** `#147237`Success text on any surface - `color.status.warn.base`** `#f59e0b` ** `#f59e0b`Warning fills - `color.status.warn.text`** `#f59e0b` ** `#895806`Warning text on any surface - `color.status.bad.base`** `#ef4444` ** `#ef4444`Danger fills - `color.status.bad.text`** `#f26262` ** `#ba3535`Danger text on any surface - `color.status.info.base`** `#38bdf8` ** `#38bdf8`Information fills - `color.status.info.text`** `#38bdf8` ** `#1f6a8b`Information text on any surface - `color.status.live.base`** `#ef4444` ** `#ef4444`LIVE badges - `color.status.live.text`** `#f26262` ** `#ba3535`LIVE text on any surface Every theme also carries the kit's scales: `radius.*`, `space.*` (4 to 32), `size.tap` (44), `type.size.*`, `type.weight.*` and `motion.*`. Why tokens, and what is next A theme on OpenVibe is one set of design tokens: semantic names such as `color.accent.strong` and `space.lg`, kept apart from any one platform. The web reads them as CSS variables today. An Android or iOS app reads the same values in Compose or SwiftUI, so a native app wears your theme without being a web page in a frame. The format is the W3C Design Tokens one, so the same file works in Style Dictionary, Tokens Studio and Figma. Next: the kit's components described the same way (anatomy, states, roles), so a page made on OpenVibe.Design can be drawn natively too. [Change this theme in the studio](/themes?theme=vibe) [The tokens API](/developers#tokens)