ChatterboxStyle Guide
← Home

Layout — 3-column shell

Pocket Dimensions
general
design-crits
launch-room
watercooler
#design-crits
MK
Mika KatoPocket Dimensions · 10:42 AM
Pushed the new onboarding illustrations — take a peek when you can 👀 the amber pops nicely against the charcoal.
3🔥 2
Thread panel · 400px (hidden by default)

Rail 64px · Sidebar 260px (collapsible) · Main flex · Thread panel 400px (reserved, hidden by default)

Color tokens

Rail--rail
Sidebar--sidebar
Sidebar hover--sidebar-hover
Message pane--message-pane
Thread panel--thread-panel
Background--background
Foreground--foreground
Muted foreground--muted-foreground
Border--border
Primary (Amber)--primary
Primary hover--primary-hover
Online--online
Away--away
Destructive--destructive

Typography

Chatterbox — Display 24
Section title — 17
Message body — 15px, tight line height for density. The quick brown fox jumps over the lazy dev.
Metadata — 13px muted
Timestamp — 12px

Buttons

Inputs

Avatars

MK
JR
AL
PD

Sample message row

MK
Mika KatoPocket Dimensions · 10:42 AM
Pushed the new onboarding illustrations — take a peek when you can 👀 the amber pops nicely against the charcoal.
3🔥 2

Radius & borders

4pxrounded-sm
6pxrounded-md
8pxrounded-lg
12pxrounded-xl