◂ Cristal Jiang · case study/ VoceSpace UI Library extracted from Privoce/vocespace-client

VoceSpace UI Library

Every token on this page is lifted from the product source — the Ant Design theme in app/layout.tsx, the SCSS modules in styles/, and the component files themselves. Nothing here is invented. This is the system the AI Analysis feature was designed inside.

Brand app/layout.tsx → brand, token.colorPrimary

brand / primary
#22ccee
73 uses — the single accent
brand.primary
#06aed4
deeper cyan, rests

One accent, no secondary. Cyan carries every affordance: primary buttons, active nav, focused inputs, live state.

Surfaces colorBgElevated · SCSS modules

bg / deep
#1a1a1a
app ground
bg / panel
#1e1e1e
61 uses — dropdowns, inputs, cards
bg / raised
#212429
tiles
bg / hover
#2a2a2a
row hover
bg / control
#2e2e2e
Radio.buttonBg

Text token.colorText · Button.defaultColor

text / primary
#ffffff
headings, values
text / body
#aaaaaa
colorText default
text / muted
#8c8c8c
32 uses — labels, placeholder
text / disabled
#333333
colorTextDisabled

Feedback status + alert colors

online
#3adb76
presence dot
warning
#ffaa33
upgrade banner
caution
#faad14
antd warning
danger
#ff4d4f
leave, destructive
danger / deep
#d92d20
recording

Neutral ramp app/layout.tsx → neutral{}

neutral 300
#d0d5dd
neutral 400
#98a2b3
neutral 500
#667085
neutral 700
#344054
neutral 800
#1d2939
neutral 900
#101828
themeColor

A full 25–900 ramp ships in the theme but barely reaches the product — the room UI runs almost entirely on the flat grays above.

Type styles/globals.css · SCSS modules

48px / 700Display
18px / 600Panel title
16px / 500Section heading
14px / 400 · baseBody — 13 of 32 declarations
12px / 400Meta, labels, captions
10px / 400Micro / badges

Family: 'TWK Everett', sans-serif. Base is 14px — the type scale is deliberately narrow.

Radius token.borderRadius: 4 · SCSS

3px
4px
base
6px
8px
17 uses
12px
22px
pill

antd base is 4; hand-written SCSS favours 8px for cards and tiles.

Components

Buttons

Control-bar buttons are height:46px, radius:8px.

Inputs

Input.colorBorder: '#22CCEE' — inputs carry a cyan border by default, not only on focus.

Segmented / Radio

buttonBg #2E2E2E, checked #1E1E1E with cyan ring.

Status chips
Online Busy Offline
AI capturing

Dot + label on a translucent chip. The AI indicator reuses this exact pattern in cyan.

Badges & tags
1 active 3 active snapshot #4 5 min
Settings nav

Active = cyan text and cyan icon. No fill, no left bar.

Participant tile
1Online
Upgrade banner

Notes for the case study

What the system gives you

One accent on a flat dark ground, a 14px base, and a 4–8px radius. Cyan is scarce enough that anything wearing it reads as live or actionable — which is why the AI indicator could borrow it without inventing new language.

Where it is thin

No spacing scale, no elevation model, no documented states — the 25–900 neutral ramp is declared but nearly unused, and the room UI hardcodes flat grays instead. Radius drifts between antd's 4px and hand-written 8px.

What the AI feature added

Cyan was a control colour — buttons, focus, active nav. The work log gave it a second job: the AI is running right now. The pulsing cyan dot on the capture chip is the one new signal, and it deliberately reuses the presence-chip shape rather than introducing a new component.