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

Mobile behavior

Tap targets

On small screens inputs target at least 44px tall, buttons at least 48px.

Safe-area insets

env(safe-area-inset-top)
left
Content stays clear of notch, status bar, rounded corners, and home indicator.
right
env(safe-area-inset-bottom)

Use .safe-area-inset, .safe-area-x, .safe-area-y, or .chatterbox-safe-bottom on fixed/sticky UI.

Active & focus-visible states

focus-visible link
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

Touch taps trigger :active feedback; keyboard navigation shows the focus ring.

Radius & borders

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