Vibe HQ

Design tokens

Every token from plan §4.10, rendered live from tokens.css. Switch the theme in the top right to review light and dark. Values the plan leaves open are listed at the end, under Values to confirm.

Colours

Each swatch paints its CSS variable. L and D are the light and dark values where they differ.

Accent

  • accent--vh-accent#4f46e5
  • accentHover--vh-accent-hover#6366f1
  • accentPressed--vh-accent-pressed#4338ca
  • accentTint--vh-accent-tintL #eef2ffD rgb(79 70 229 / 0.18)
  • accentText--vh-accent-textL #4f46e5D #a5b4fc
  • onAccent--vh-on-accent#ffffff

Backgrounds and app frame

  • bgPrimary--vh-bg-primaryL #ffffffD #222321
  • bgSecondary--vh-bg-secondaryL #f7f8faD #2b2b29
  • bgTertiary--vh-bg-tertiaryL #eef0f4D #3b3a37
  • frameFrom--vh-frame-fromL #f3f4f6D #222321
  • frameTo--vh-frame-toL #e5e7ebD #161615

Text and borders

  • text1--vh-text-1L rgb(0 0 0 / 0.92)D rgb(255 255 255 / 0.92)
  • text2--vh-text-2L rgb(0 0 0 / 0.72)D rgb(255 255 255 / 0.72)
  • text3--vh-text-3L rgb(0 0 0 / 0.56)D rgb(255 255 255 / 0.56)
  • text4--vh-text-4L rgb(0 0 0 / 0.4)D rgb(255 255 255 / 0.4)
  • border--vh-borderL rgb(0 0 0 / 0.1)D rgb(255 255 255 / 0.1)
  • borderStrong--vh-border-strongL rgb(0 0 0 / 0.16)D rgb(255 255 255 / 0.16)

Status

  • statusAvailable--vh-status-available#22c55e
  • statusBusy--vh-status-busy#f43f5e
  • statusAway--vh-status-away#f59e0b
  • statusMeeting--vh-status-meeting#4f46e5
  • statusOffline--vh-status-offline#a1a1aa

Mic and camera

  • avOn--vh-av-on#22c55e
  • avOnBg--vh-av-on-bgrgb(34 197 94 / 0.1)
  • avOff--vh-av-off#dc2626
  • avOffBg--vh-av-off-bgrgb(220 38 38 / 0.15)

Map and social

  • self--vh-self#4f46e5
  • ambient--vh-ambient#38bdf8
  • ambientTint--vh-ambient-tint#e0f4fe
  • coworking--vh-coworking#14b8a6
  • raiseHand--vh-raise-hand#facc15
  • mapOutside--vh-map-outsideL #d9efdaD #3a5c5f

Danger, glass and focus

  • danger--vh-danger#dc2626
  • dangerBg--vh-danger-bg#fef2f2
  • onDanger--vh-on-danger#ffffff
  • glassBg--vh-glass-bgrgb(28 25 23 / 0.88)
  • glassText--vh-glass-textrgb(255 255 255 / 0.92)
  • focusRingColor--vh-focus-ring-colorrgb(79 70 229 / 0.25)

Other

  • lightGlow--vh-light-glowL #ffe6b0D #ffdc9a
  • mapLabelBg--vh-map-label-bg#ffffff
  • mapLabelText--vh-map-label-text#4b3f8f

App frame gradient (120°)

Typography

Inter for the interface, Geist Mono in capitals for area labels.

  • 11pxWalk over and say hello
  • 12pxWalk over and say hello
  • 13pxWalk over and say hello
  • 14pxWalk over and say hello
  • 16pxWalk over and say hello
  • 18pxWalk over and say hello
  • 20pxWalk over and say hello
  • 24pxWalk over and say hello
Weight 400Weight 500Weight 600Meeting room · Kitchen · Lounge
Text 1 · primaryText 2 · secondaryText 3 · mutedText 4 · faintA link

Radii and shadows

controlButtons, inputs
cardCards
popoverPopovers
modalModals
pillPills, chips, avatars
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-popover

Spacing, sizes and motion

Spacing steps 2 / 4 / 6 / 8 / 12 / 16 / 24 px. Controls are 28 / 32 / 36 px tall.

2
4
6
8
12
16
24
  • duration-hover · 120 ms
  • duration-fade · 200 ms
  • duration-panel · 250 ms
  • duration-panel-slow · 300 ms

Hover a row to preview its timing with the ease-out curve.

Glass

Dark glass for the AV dock and map buttons, in both themes. The dock itself arrives in Phase 1.

Components

shadcn/ui primitives from @vibehq/ui on our tokens.

Book a room
A card with a form, the way panels will use it.
Sample
Popover surfacePopover background, 16 px radius, large shadow and the 1 px inset ring.
Danger tint with danger text
Ambient tint: someone nearby started talking
Your name tagCoworkingHand raisedIn a meeting

Values to confirm

The plan leaves these open, so they ship as shown until the owner decides. Decisions are recorded in plan §15.

  • Selected
    Accent tint in darkThe plan gives no dark tint. We use the accent at 18% so it sits on any dark surface.
  • Ambient and danger tints in darkThe plan keeps both the same as in light, so they stay pale on dark surfaces. Keep them, or add dark values?
  • BordersNot in the plan. Hairlines use the text colour at 10%; inputs and strong borders at 16%.
  • JoinLeaveGlass
    Text on accent, danger and glassNot in the plan. White on accent and danger fills, and white at 92% on glass.
  • Focused
    Focus ringFrom the plan: 3 px of the accent at 25%. Is it clear enough on dark surfaces?
  • Shadow and easing valuesThe plan names four soft shadow steps and the timings but no exact values. See Radii and shadows, and Motion, above.