Channel Palette

Channel Palette is a colorful, workspace-oriented design system designed for persistent team communication. Its signature aubergine purple anchors a multi-color system of blues, greens, yellows, and reds — each color serving a distinct functional role. The aesthetic is friendly yet productive, balancing playful personality with the structured information density that teams need to stay organized across channels, threads, and direct messages.

Primary#4A154B
Text Secondary#616061
Background#FFFFFF
Surface#F8F8F8
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

timestamp/microLato · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

sidebar/codeLato · 13px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body/messageLato · 15px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

titleLato · 18px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

section headingLato · 22px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

page headingLato · 28px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

Channel Palette is a colorful, workspace-oriented design system designed for persistent team communication. Its signature aubergine purple anchors a multi-color system of blues, greens, yellows, and reds — each color serving a distinct functional role. The aesthetic is friendly yet productive, balancing playful personality with the structured information density that teams need to stay organized across channels, threads, and direct messages.

Components

Buttons

Chips

UserEmoji Reaction

Cards

Card Title

Sample body text for the card component.

Elevation & Depth

Modal
Dropdown
Tooltip

Do's & Don'ts

Do

Use the aubergine (#4A154B) exclusively for the sidebar
Differentiate unread content with bold weight
Keep message text at 15px for readability
Show timestamps on hover for individual messages
Support keyboard-first interaction patterns

Don't

Use all four brand colors simultaneously in a component
Add borders between individual messages
Use heavy elevation in the messaging area
Download .md

License MIT
Uploaded 1 months ago
Version v1
File size 7.9 KB
Downloads 29
Copies 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/channel-palette and implement it in my code

Don't have the MCP? Install it here