Border radius

Woodstock is deliberately rounded, but not uniformly pill-shaped. Corner radius tells people whether they are looking at a compact action, a control, a floating surface, or a large conversation surface. Use the existing Tailwind radius utilities; this page records their roles and does not add another token scale.

Scale

Utility	Radius	Use
`rounded`	4px	Small utility surfaces, code-like detail, and compact inline controls.
`rounded-md`	6px	Icon buttons, sidebar rows, and compact menu actions.
`rounded-lg`	8px	Menu rows, setting rows, and small bounded panels.
`rounded-xl`	12px	The default component shape: buttons, inputs, text areas, cards, popovers, and pickers.
`rounded-2xl`	16px	Dialogs, mobile sheets, sign-in cards, and message bubbles.
`rounded-full`	9999px	Avatars, status dots, badges, and intentional pill controls.

rounded-xl is the ordinary answer for a new standalone control or surface. Move up to rounded-2xl only when the element is a larger, prominent container or a conversational bubble; move down for dense navigation and compact actions.

`rounded` in the app

These are light-theme specimens of the actual component treatments that use Tailwind's bare rounded utility today. They are not proposed components; each label names the existing place it comes from.

Markdown inline code

Run pnpm gates before merging.

Sidebar action

Channel settings

Section menu action

Attachment thumbnail

📎

Debug code block

[user]
Summarize this drop

Source-status badge

ready

Filing-inspector card

Historical filing · complete

`rounded-md` in the app

rounded-md is the denser 6px step. These specimens reproduce the component treatments that use it in the app today: close and composer actions, sidebar rows, a compact destructive action, inline editing, response feedback, a code block, and an Ask-card marker.

Dialog close action

Channel sidebar row

Inline channel-name edit

Compact destructive action

Answer-feedback action

Markdown code block

const channel = 'product'

Ask-card marker

`rounded-lg` in the app

rounded-lg is used where a component needs a bounded shape without the larger, card-like feel of rounded-xl. Current examples include compact panels, picker options, sidebar menus, settings rows, and agent/debug detail.

Picker option

Settings row

Notifications On

Agent/debug detail

Tool call completed in 0.8s

Sidebar menu surface

`rounded-xl` in the app

rounded-xl is the app's default 12px component shape. It appears on the normal input and button family, cards, pickers, entity rows, and larger inline surfaces.

Text input

Primary button

Entity-list row

Floating picker

Choose a routine

`rounded-2xl` in the app

rounded-2xl marks the largest and most prominent surfaces: dialogs, mobile sheets, sign-in cards, and the chat bubbles that carry a conversation.

Dialog surface

Create channel

Choose where your team talks.

Mobile bottom sheet

Channel actions

Agent activity bubble

Looking through the source…

Sign-in card

Welcome to Woodstock

`rounded-full` in the app

rounded-full is reserved for things that are actually circular or capsule-shaped: entity chips, status dots, unread badges, segmented filters, and the compact switch thumb.

Entity chip

Unread count

Channel filter

Workspace avatar

Component recipes

Component	Classes	Why
Primary or secondary button	`rounded-xl`	Keeps all ordinary actions part of the same control family.
Text input or text area	`rounded-xl`	Matches its paired action and gives a clear, touch-friendly boundary.
Icon button	`rounded-md`	A compact target should not look like a miniature card.
Popover or picker	`rounded-xl`	A floating choice surface belongs with inputs and cards.
Menu item inside a popover	`rounded-lg`	Slightly tighter than the container, preserving its edge.
Sidebar row	`rounded-md`	Supports dense scanning without turning navigation into cards.
Dialog or bottom sheet	`rounded-2xl` / `rounded-t-2xl`	Gives a prominent surface a calmer boundary; bottom sheets round only the exposed top edge.
Message bubble	`rounded-2xl rounded-bl-sm` or `rounded-2xl rounded-br-sm`	The small corner points toward the speaker without introducing a separate bubble shape.
Chip, avatar, dot, or pill filter	`rounded-full`	Use only when the component's identity is deliberately compact and pill-like.

Rules

Use a named Tailwind radius utility. Do not introduce arbitrary radius values in app components.
A child action inside a rounded container is usually one step tighter than its container: for example, a rounded-xl picker can contain rounded-lg rows.
Do not use rounded-full merely to make a control feel friendly. It is reserved for pills, circular marks, and genuinely capsule-shaped controls.
When a surface is clipped, put overflow-hidden on the same element that owns its outer radius. This keeps media, selected fills, and divider edges inside the intended shape.
A shape change should communicate hierarchy, not state. Use the semantic color, border, and focus treatments for hover, selection, errors, and keyboard focus instead of changing radius.

Examples in the app

The channel composer and form fields use rounded-xl; dialogs and mobile sheets use rounded-2xl; dense sidebar actions use rounded-md; and entities, unread markers, and tab-like filters use rounded-full. Keeping those families distinct gives a new screen a familiar shape before it needs a new component abstraction.

Border radius

On this page