Layout — Charply Design System

Surface dimensions

Surface	Constraint	Template
Extension popup	450 × 600 px fixed	ExtensionPopupTemplate
Extension side panel	Full height, fluid width	ExtensionSidepanelTemplate
Landing	max-w-* prose, full-width sections	Page-level
Design system docs	max-w-[1440px] grid	/design-system layout

Extension popup anatomy

CCharply

Smart Context

Reads the post automatically

AI Powered

Tailored replies in seconds

Opens the side panel on Twitter or LinkedIn.

┌─────────────────────────────┐
│ Header (h-14, px-4)         │
├─────────────────────────────┤
│ Tab bar (p-2)               │
├─────────────────────────────┤
│ Content (p-4, space-y-4)    │
├─────────────────────────────┤
│ Footer action (optional)    │
└─────────────────────────────┘

Header: h-14 border-b px-4
Content: p-4 space-y-4
Cards inside popup: p-3 (compact)
Design at exactly 450px width — no horizontal scroll

Spacing rhythm

4px base grid via Tailwind. See Spacing — F3.

Extension row

px-4 py-2

Extension section

space-y-4

Landing card

p-6

Landing section

py-16 px-4

Elevation and surfaces

Base

bg-background

Page canvas

Raised

bg-card + border-border

Cards, panels

Floating

bg-popover + shadow

Tooltips, dialogs

In dense extension layouts, borders are enough — do not shadow every card.

Content script layout

Fixed positioning for floating controls
Scope theme to .webreply-theme-* — never :root
No global layout resets on host pages
Z-index only within Charply-owned portals

Guidelines

docs/design/foundation/layout.md

Do

✓Start extension screens from `@charply/design/templates` shells
✓Keep one primary action visible without scrolling when possible (popup)
✓Use `border-border` dividers to separate sections in dense panels
✓Test popup layouts at exactly 450px width

Don't

✗Add horizontal scroll to popup content
✗Use landing-scale padding (`p-8`, `py-24`) inside extension panels
✗Apply layout styles to `body` or `:root` from content scripts
✗Fork popup chrome — extend templates instead