54 lines
1.9 KiB
Markdown
54 lines
1.9 KiB
Markdown
|
# Settings Layout
|
||
|
|
|
||
|
|
## Visual Hierarchy
|
||
|
|
|
||
|
|
- Prefer spacing and typography over boxed backgrounds.
|
||
|
|
- Avoid wrappers that mix unrelated controls.
|
||
|
|
- Omit redundant headings when page context already names the controls.
|
||
|
|
- Keep controls compact and row chrome minimal.
|
||
|
|
- Place checkbox/radio state before its label.
|
||
|
|
- Dim inactive option labels subtly; do not use transform jumps.
|
||
|
|
|
||
|
|
## Typography
|
||
|
|
|
||
|
|
Use classes from `packages/ui/src/lib/typography.ts`:
|
||
|
|
|
||
|
|
- Page title: `typography-ui-header font-semibold text-foreground`
|
||
|
|
- Section header: `typography-ui-header font-medium text-foreground`
|
||
|
|
- Control group: `typography-ui-header font-medium` or `font-normal` when needed
|
||
|
|
- Values/labels: `typography-ui-label text-foreground`
|
||
|
|
- Helper/meta: `typography-meta text-muted-foreground` or `typography-small text-muted-foreground`
|
||
|
|
- Numeric values: add `tabular-nums`
|
||
|
|
|
||
|
|
## Spacing
|
||
|
|
|
||
|
|
- Keep section-to-section spacing larger than header-to-content spacing.
|
||
|
|
- Typical flat section: header `mb-1 px-1`, content `pt-0 pb-2 px-2`, outer `mb-8`.
|
||
|
|
- Group related controls with `space-y-3` and modest internal padding such as `p-2`.
|
||
|
|
- Avoid elevated backgrounds, rounded rows, and hover fills without explicit UX value.
|
||
|
|
|
||
|
|
## Alignment
|
||
|
|
|
||
|
|
For consistent desktop columns:
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
<div className="flex items-center gap-8 py-1.5">
|
||
|
|
<span className="w-56 shrink-0 typography-ui-label">{t(labelKey)}</span>
|
||
|
|
<div className="flex w-fit items-center gap-2">...</div>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
- Let narrow layouts stack or wrap.
|
||
|
|
- Compare the complete control footprint, including adjacent actions, when matching widths.
|
||
|
|
- Disable only the unavailable control; do not dim the entire label row by default.
|
||
|
|
|
||
|
|
## Responsive Grids
|
||
|
|
|
||
|
|
Use a one-column base and introduce columns at a deliberate breakpoint:
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
<div className="grid grid-cols-1 gap-2 md:grid-cols-[14rem_auto] md:gap-x-8" />
|
||
|
|
```
|
||
|
|
|
||
|
|
Template fields commonly use `grid grid-cols-1 gap-2 md:grid-cols-2 md:gap-3` with flat `p-2` cells.
|