Design System
Borders and focus
The strokes that define boundaries, status, selection, and keyboard focus.
Borders and focus
Woodstock uses a one-pixel semantic border as its ordinary structural stroke. A stronger border or ring changes meaning—it is never decorative weight.
Stroke roles
| Treatment | Current use | Meaning |
|---|---|---|
border border-border | Inputs, cards, menus, and panel boundaries | Ordinary containment. |
border-b border-border / border-t border-border | Headers, sheet edges, and section dividers | Structural separation without making a new card. |
border-primary with ring-1 ring-primary | Selected entity/navigation item | Current selection. |
border-activity-border | Agent activity bubble and agent badge | Work is in progress. |
border-danger | Destructive control | A destructive action. |
border-dashed border-border | Drop targets and empty import surfaces | A place that receives something. |
ring-2 ring-primary-soft | Inputs and editable surfaces on focus | Keyboard focus. |
border-border/60 currently appears only in quiet diagnostic dividers. It remains an implementation
exception; ordinary product boundaries use the full semantic border-border token.
Live specimens
Input boundary
Selected entity
Agent activity
Preparing a reply…
Drop target
Drop a file here
Focused field
Rules
- Use
borderfor a bounded surface and directional border utilities for a divider. - Keep ordinary strokes at one pixel.
border-2belongs only to an intentionally stronger status treatment. - Focus is visible with the primary border and soft two-pixel ring; never remove it without an equivalent accessible replacement.
- Put color meaning behind the semantic roles from Colors, never a Tailwind palette shade in a product component.