Border Radius
Mixed radius system for visual hierarchy
Mixed Radius System
StockFind uses a mixed radius approach to create visual hierarchy between different UI elements.
Cards & Surfaces
8px (0.5rem)
--radius: 0.5rem--field-radius: 0.125remDesign Rationale
The mixed radius creates a clear visual distinction:
- Rounded cards (8px): Information containers, clickable surfaces
- Sharp inputs (2px): Data entry fields, form controls
This helps users quickly identify interactive data entry areas versus informational content.
CSS Variables
:root {
--radius: 0.5rem; /* 8px - cards, buttons, surfaces */
--field-radius: 0.125rem; /* 2px - inputs, selects, textareas */
}Usage
Cards & Surfaces
// Cards use rounded-lg (8px)
<Card className="rounded-lg">...</Card>
// Buttons use rounded (inherits --radius)
<Button>Click me</Button>Form Inputs
// Inputs use rounded-sm (2px)
<Input className="rounded-sm" />
<Select className="rounded-sm" />
<TextArea className="rounded-sm" />Radius Reference
| Element | Radius | CSS Variable | Tailwind |
|---|---|---|---|
| Cards | 8px | --radius | rounded-lg |
| Buttons | 8px | --radius | rounded |
| Modals | 8px | --radius | rounded-lg |
| Inputs | 2px | --field-radius | rounded-sm |
| Selects | 2px | --field-radius | rounded-sm |
| Chips | 8px | --radius | rounded |
| Avatars | 50% | — | rounded-full |