Border radius
Inline is a writing surface, not a collection of bubbles. Corners begin with the square highlighter mark and soften only as interface layers move away from the manuscript.
Character
The radius hierarchy moves outward from identity and writing: 0px for the mark, the document, and its margin question cards, 4px for controls, 8px for detached groups, and 12px for the largest isolated shell.
Scale
The UI scale intentionally stops at 12px. Full radius is a semantic circle, not another card size.
0pxMark, document, margin card
2pxIndicator detail
4pxControl
8pxCard
12pxDialog or panel
9999pxCircle only
Component mapping
Choose radius by structural role. Importance, color, and size do not change the corner.
| Element | Token | Value | Reason |
|---|---|---|---|
| Inline marker | none | 0px | Square highlighter identity |
| Draft/manuscript plane | none | 0px | Crisp document silhouette |
| Table/full-bleed list | none | 0px | One continuous reading plane |
| Feedback/question card | none | 0px | Annotations share the manuscript plane |
| Code/progress track | xs | 2px | Quiet optical easing |
| Button/input/select | sm | 4px | Direct control silhouette |
| Tab/nav row/tag | sm | 4px | Avoids pill-heavy chrome |
| Menu/popover/general card | md | 8px | Default detached surface |
| Dialog/major panel | lg | 12px | Maximum softening for an isolated layer |
| Avatar/status dot/radio | full | 9999px | Shape carries identity, point status, or selection |
| Meter/progress track | full | 9999px | A track under 8px tall reads as a line, not a pill |
Nesting
Move down one step as surfaces move inward. When a child touches its parent edge, square the touching corners.
- 12px parent
- 8px child · 4px control
- 8px card
- 4px inset · 2px indicator
- 4px group
- 2px selection · 0px rule
Editorial, not bubbly
The square marker, the paper canvas, and the document plane with its margin question cards carry Inline’s identity. Radius supports containment; it is never the decoration.
What is the one claim this essay defends?
Keep the button a crisp 4px rectangle and the draft plane square, and let the margin question card share the manuscript geometry.
What is the one claim this essay defends?
Do not combine a pill button, a rounded question card, and an oversized document curve in the same workspace.
Rules
Radius communicates structure through a small, repeatable hierarchy.
- Keep the marker square. No radius may touch the Butter Yellow logo square.
- Default controls to 4px. Buttons and fields are soft rectangles, never pills.
- Default detached cards to 8px. Reserve 12px for dialogs and major standalone panels.
- Keep documents square. Draft planes, margin question cards, tables, and full-bleed lists do not need card corners.
- Step inward. Nested children use the same or a smaller radius, normally one step smaller.
- Reserve full for circles and thin tracks. Avatars, status dots, radios, circular controls, and meter tracks under 8px tall.
- Reject nearby one-offs. Do not introduce 6px, 10px, 14px, or 20px.
- Do not decorate with radius. Shape clarifies containment or interaction.