User interface colors

Summary

The UI-color page: status-color semantics and server-channel color rules shown through avatar status badges and paired dark and light channel mockups on a blurple page.

Visual description

Two-page 16:9 spread. The white left page has the "03 BRAND COLORS" eyebrow, a two-line headline "USAGE" (blurple) over "USER INTERFACE COLORS" (near-black), and two numbered rules: user status (green active, red Do Not Disturb, yellow Idle, black Invisible) and server channel (white or black, invert per background, green for status, red for LIVE). The right page is blurple and numbered 1-2: at top, two tall pink story-format cards with a 3D claymation character and the condensed headline "WHERE FRIENDSHIP IS NOT A REQUEST...", flanked by a vertical strip of avatar bubbles each showing a different status dot (green, black, red, yellow/idle, online). Below, two "Space City" channel-list mockups side by side, one on black and one on white, each listing members (Allan, Katelin, Mary, Conner) with avatars, camera icons, and a red "LIVE" badge. The far-left blurple stripe carries the rotated caption and page 35.

Key takeaway

Documenting interface color semantics with the actual product UI rather than abstract swatches: status dots on avatars, and the same channel component shown on black and on white to prove the invert rule. Mixing the brand's playful 3D characters into a functional UI spec keeps it on-brand.

Reuse notes

A model for the UI-color section of a product brand guide, where colors carry fixed meaning (online, busy, live). Showing each component in both dark and light keeps the rule unambiguous. Requires real interface mockups and a defined status system to fill out.