# Basketloot Design System

## Product direction

Basketloot is a consumer rewards marketplace. The interface should feel trustworthy, energetic, and easy to scan without resembling a casino or crypto trading product. Use a modern black marketplace aesthetic: near-black foundations, emerald green for primary actions, light green for highlights, and semantic colors only for status.

## Foundations

- Font: `Inter`, with the system sans-serif stack as fallback. Use one family throughout.
- Spacing: 4px base; prefer 8, 12, 16, 24, 32, and 48px increments.
- Content widths: 1440px application shell; 1200px public content; 760px readable prose.
- Radius: 8px controls, 12px compact cards, 16px standard cards/modals, 20–24px hero surfaces.
- Motion: 160ms fast and 220ms standard, ease-out. Animate opacity and transform only. Respect `prefers-reduced-motion`.
- Icons: Feather outline icons only, normally 16, 18, or 20px. Never use emoji as structural icons.

## Semantic color tokens

- Canvas: `#050806`
- Sidebar: `#07100a`
- Surface: `#0b120d`
- Raised surface: `#111a13`
- Interactive surface: `#17251a`
- Border: `rgba(134, 239, 172, .20)`
- Border strong: `rgba(134, 239, 172, .34)`
- Text: `#f0fdf4`
- Text secondary: `#c9e6d1`
- Text muted: `#91a394` (never dimmer for body copy)
- Primary: `#22c55e`
- Primary hover: `#4ade80`
- On primary: `#031107`
- Success: `#86efac`
- Warning: `#f4c95d`
- Danger: `#ff6b7a`

Do not introduce page-specific accent colors. Functional color must always include a text label or icon and never carry meaning alone.

## Typography

- Display: clamp 36–56px, 800 weight, 1.05 line height.
- Page title: clamp 26–36px, 800 weight, 1.15 line height.
- Section title: 20–24px, 750 weight, 1.25 line height.
- Card title: 16–18px, 700 weight.
- Body: 16px, 400–500 weight, 1.6 line height.
- Label/caption: 13–14px, 600 weight. Avoid body text below 14px.
- Data values use tabular numerals.

## Application shell

- Desktop: persistent left sidebar, single top bar, main content. Do not combine another top-level tab system with the sidebar.
- Mobile: drawer navigation and compact top bar; content receives 16px gutters.
- Current navigation item has a green-tinted surface, visible left indicator, icon, and label.
- Logout and destructive actions are spatially separated from normal navigation.
- Every page starts with one page header: eyebrow/breadcrumb where needed, one H1, concise support text, and at most one primary action.

## Components

- Primary buttons: emerald fill, dark text, at least 44px high. One primary action per region.
- Secondary buttons: raised navy surface plus visible border. Ghost buttons still require a visible boundary.
- Inputs: visible label, 44px minimum height, dark interactive surface, strong focus ring, nearby error and helper copy.
- Cards: use opaque surfaces for forms/data. Glass is reserved for hero or overlay surfaces.
- Tables: opaque surface, sticky header when useful, tabular numbers, row hover, responsive overflow with an explicit mobile card alternative for critical workflows.
- Status: icon/text plus semantic tint. Avoid color-only dots.
- Empty states: icon, specific explanation, and a recovery or next action.
- Loading over 300ms: skeleton or inline progress; submit controls become disabled and expose busy state.
- Modals: visible close button, Escape dismissal, focus containment, strong scrim, and unsaved-change protection for long forms.

## Accessibility and responsive rules

- WCAG 2.1 AA: 4.5:1 normal text, 3:1 large text and component boundaries.
- Every interactive target is at least 44×44px with 8px separation.
- Visible `:focus-visible` treatment on links, buttons, inputs, tabs, and menu items.
- One skip link per shell and logical heading order.
- Never disable viewport zoom. No horizontal page scrolling at 375px.
- Validate at 375, 768, 1024, and 1440px, including mobile landscape.
- Provide accessible names for icon-only controls and alt text for meaningful images.

## Page-family guidance

- Public: conversion-focused, generous whitespace, limited marketing claims, clear sign-up and sign-in hierarchy.
- Authentication: split story/form on desktop, compact story header on mobile, minimal distractions.
- User portal: task discovery first, balances and progress visible, cards optimized for quick comparison.
- Admin: denser but calm; tables, filters, bulk actions, and status feedback prioritized over decoration.
- Legal/help: narrow reading measure, strong headings, in-page orientation, no dashboard-density styling.

## Anti-patterns

- No emoji icons, neon rainbow accents, decorative text gradients, or glow on every card.
- No mixed radii/shadow scales, inline page-specific hex colors, or duplicate primary CTAs.
- No hover-only interactions, hidden labels, tiny icon buttons, ambiguous destructive actions, or modals used as primary navigation.
