Responsive & mobile

Recommendations for responsive web and mobile applications using the Vicinity Labs design system.

Touch targets

Minimum size: 44×44 px for all interactive elements (buttons, links, checkboxes, icon buttons, table row actions). Aligns with WCAG 2.2 and iOS/Android guidelines.
Spacing: Keep at least 8 px between touch targets to avoid mis-taps.
Icon buttons: Use ButtonIcon with size="md" (44 px) or size="lg" (48 px). Icons should be 20–24 px inside the hit area so they’re visible and tappable.
Form controls: Inputs and primary actions in a row (e.g. message input + send) should share a single alignment baseline and a consistent height (e.g. min-height: 2.75rem for the input, 44 px for the button). Use flex items-center on the row.

Left: Logo (or back) and/or primary identity. Use Logo variant="horizontal" for wide navs, or a compact mark + wordmark for narrow.
Right: Primary actions (e.g. Send, Save, Menu). Keeps actions visible and thumb-friendly on mobile.
Center (optional): Title or search. On small viewports, consider moving search into a dedicated screen or a slide-down.

Left: Hamburger (menu) or Back. Min 44×44 px, clear hover/active state.
Center or right: Logo or app name. Avoid centering too many items so the bar doesn’t feel crowded.
Right: One or two key actions (e.g. Notifications, Profile). Prefer icons with labels in a drawer or tooltip for clarity.

Desktop: Full horizontal nav with text links; logo left, links right (or center).
Tablet/narrow: Collapse secondary links into a menu (drawer or dropdown). Keep logo and 1–2 primary actions in the bar.
Mobile: Single row: [ Menu | Logo/Title | Action ]. Use Logo variant="mark" or a shortened wordmark to save space.

Checkboxes: Vertically center in the row (align-middle). Wrap each checkbox in a label with min-width and min-height 44 px so the whole cell is a tap target.
Row actions: Use icon buttons (Edit, Delete) with 44×44 px hit area and clear hover/active feedback (e.g. background tint, slight scale). Prefer Lucide icons (e.g. Pencil, Trash2) over small text symbols.

Buttons and icon buttons: Use transition on color, background, border, box-shadow, and transform. On hover: e.g. hover:brightness-110, hover:shadow-[var(--glow-gold-focus)], hover:bg-gold/10. On active: active:scale-95 for a pressed feel.
Links: Underline or color change on hover/focus. Ensure focus ring is visible (e.g. focus:ring-2 focus:ring-gold).
Data table rows: Hover background (e.g. hover:bg-bg-card/50). Selected row: gold border or glow per design tokens.

Use consistent breakpoints (e.g. Tailwind sm, md, lg) for layout shifts. Prefer a single-column layout on small screens; introduce sidebars or multi-column only when width allows.
Navbar: Reduce horizontal padding on small screens (px-4 md:px-8), and collapse links into a menu below a certain width rather than wrapping many items.

44×44 px minimum for taps and clicks.
Align input and send (or primary action) in one row with items-center and matching heights.
Top bar: left = identity/back, right = actions; on mobile keep one row with menu + logo + one action.
Tables: centered checkboxes in 44 px cells; 44 px action buttons with hover/active states and clear icons.