Border Craft
Borders as Information
Borders separate, group, contain, and emphasize. They carry meaning:
- Thin (1px): Subtle separation, table cells, list dividers
- Medium (2px): Emphasis, active states, selected items
- Thick (3-4px): Strong emphasis, section dividers, brand accent
Border Styles
| Style | Use | Avoid |
|---|---|---|
| Solid | Default for everything | N/A |
| Dashed | Drag targets, placeholder areas | Decoration |
| Dotted | Input suggestions, optional boundaries | Heavy use |
| Double | Editorial emphasis, retro/classic feel | UI components |
Alternatives to Borders
- Background color change
- Spacing/gap increase
- Shadow (creates depth instead of line)
- Indent (hierarchy through position)
Border Radius Scale
--radius-none: 0px; /* Sharp, editorial, industrial */
--radius-sm: 4px; /* Subtle softening */
--radius-md: 8px; /* Standard UI */
--radius-lg: 12px; /* Cards, containers */
--radius-xl: 16px; /* Large components */
--radius-full: 9999px; /* Pills, avatars */