nearle_web_nextjs/stitch_nearle_awwwards_redesign/DESIGN.md

---
name: Nearle Logic
colors:
  surface: '#f9f9fc'
  surface-dim: '#dadadc'
  surface-bright: '#f9f9fc'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f3f3f6'
  surface-container: '#eeeef0'
  surface-container-high: '#e8e8ea'
  surface-container-highest: '#e2e2e5'
  on-surface: '#1a1c1e'
  on-surface-variant: '#4d434f'
  inverse-surface: '#2f3133'
  inverse-on-surface: '#f0f0f3'
  outline: '#7f7381'
  outline-variant: '#d0c2d1'
  surface-tint: '#83429f'
  primary: '#4d046a'
  on-primary: '#ffffff'
  primary-container: '#662582'
  on-primary-container: '#de96f9'
  inverse-primary: '#ebb2ff'
  secondary: '#006d37'
  on-secondary: '#ffffff'
  secondary-container: '#7bf8a1'
  on-secondary-container: '#007239'
  tertiary: '#745b00'
  on-tertiary: '#ffffff'
  tertiary-container: '#cda72b'
  on-tertiary-container: '#4f3d00'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#f8d8ff'
  primary-fixed-dim: '#ebb2ff'
  on-primary-fixed: '#320047'
  on-primary-fixed-variant: '#692885'
  secondary-fixed: '#7efba4'
  secondary-fixed-dim: '#61de8a'
  on-secondary-fixed: '#00210c'
  on-secondary-fixed-variant: '#005228'
  tertiary-fixed: '#ffe08b'
  tertiary-fixed-dim: '#ebc246'
  on-tertiary-fixed: '#241a00'
  on-tertiary-fixed-variant: '#584400'
  background: '#f9f9fc'
  on-background: '#1a1c1e'
  surface-variant: '#e2e2e5'
typography:
  display:
    fontFamily: Hanken Grotesk
    fontSize: 48px
    fontWeight: '800'
    lineHeight: 56px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Hanken Grotesk
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
    letterSpacing: -0.01em
  headline-lg-mobile:
    fontFamily: Hanken Grotesk
    fontSize: 24px
    fontWeight: '700'
    lineHeight: 32px
  headline-md:
    fontFamily: Hanken Grotesk
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
  body-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '400'
    lineHeight: 16px
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: '700'
    lineHeight: 16px
    letterSpacing: 0.03em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  container-max: 1280px
  gutter: 16px
  margin-mobile: 16px
  margin-desktop: 32px
  stack-xs: 4px
  stack-sm: 8px
  stack-md: 16px
  stack-lg: 24px
---

## Brand & Style

The design system is engineered for a high-traffic consumer marketplace where speed of intent and clarity of information are paramount. The brand personality is **utilitarian, reliable, and efficient**, mirroring the operational excellence of leading logistics and delivery platforms. It eschews decorative abstractions in favor of high-fidelity, production-ready components that prioritize "findability" and conversion.

The visual style is **Modern Corporate / Systematic**, characterized by:
- **Information Density:** Strategic use of space to show more options without overwhelming the user.
- **Visual Hygiene:** A strict adherence to alignment and a sophisticated grayscale hierarchy to reduce cognitive load.
- **Functional Aesthetics:** Using borders and subtle tonal shifts rather than heavy shadows to define structure.
- **Action-Oriented:** A clear distinction between interactive elements and metadata.

## Colors

The palette is anchored by a deep, authoritative primary purple (#662582), used for brand presence and primary calls to action. 

- **Primary:** Used for the main buttons, active selection states, and brand touchpoints.
- **Secondary (Success):** A vibrant green for price drops, discounts, and successful order states.
- **Neutral Scale:** A comprehensive range of grays is used to manage hierarchy. 
  - *Base Text:* #1A1C1E
  - *Secondary Text:* #6B7280
  - *Muted/Meta Text:* #9CA3AF
  - *Borders:* #E5E7EB
  - *Backgrounds:* #F9FAFB
- **Surfaces:** Pure white (#FFFFFF) is the standard for cards and content containers to ensure maximum contrast and legibility.

## Typography

The typographic system utilizes **Hanken Grotesk** for headings to provide a sharp, modern character that feels premium and "tech-forward." For all UI elements, inputs, and long-form metadata, **Inter** is used for its exceptional legibility at small sizes.

- **Weight Strategy:** Use Bold/ExtraBold for titles to create clear section breaks. Use Medium for interactive labels.
- **Hierarchy:** High-contrast sizing ensures that price points and product titles are immediately scannable.
- **Metadata:** Use `body-sm` in a medium-gray hex for secondary information like "Distance," "Time," or "Ratings."

## Layout & Spacing

This design system uses a **Fluid Grid** model with a hard 4px/8px baseline rhythm to ensure consistency across dense data views.

- **Desktop:** 12-column grid with 24px gutters. Content is centered with a max-width of 1280px.
- **Mobile:** Single column with 16px side margins. 
- **Density:** Components use tight internal padding (8px or 12px) to maximize the amount of content "above the fold."
- **Vertical Rhythm:** Use `stack-md` (16px) for spacing between related cards and `stack-lg` (24px) for distinct sections or categories.

## Elevation & Depth

To maintain a utilitarian and clean aesthetic, this design system relies on **Low-contrast outlines** and **Tonal layers** rather than heavy shadows.

- **Standard Level:** Level 0 is the background color (#F9FAFB).
- **Surface Level:** Level 1 is the Card surface (#FFFFFF), defined by a 1px solid border (#E5E7EB).
- **Active Elevation:** Only use shadows for "floating" elements like sticky Bottom Sheets, Modals, or Popovers. For these, use a soft, 12% opacity neutral shadow with a 16px blur and 4px Y-offset.
- **Interactive State:** Buttons and clickable cards do not rise on hover; instead, they utilize a subtle background tint change (e.g., White becomes 2% Gray) to signal interactivity.

## Shapes

The shape language is **Soft and approachable** but maintains a professional structural integrity.

- **Base Radius:** 8px (`rounded`) for most interactive components like buttons, input fields, and small cards.
- **Large Radius:** 16px (`rounded-xl`) for main content containers, category banners, and bottom sheets.
- **Exceptions:** Search bars and specific filter chips may use a pill-shape (full radius) to distinguish them from actionable primary buttons.

## Components

### Buttons
- **Primary:** Solid #662582 with white text. 8px radius. High-emphasis.
- **Secondary:** White background with 1px #E5E7EB border. Used for secondary actions like "View Details" or "Add to Cart."
- **Ghost:** No border or background. Used for less critical actions like "See All" in category headers.

### Input Fields & Search
- Inputs must have a 1px #E5E7EB border and #FFFFFF background.
- Active state: 2px border using the primary color.
- Search bars should include a leading icon (Magnifying glass) and a trailing icon for voice or clear-text.

### Cards
- **Product/Service Cards:** 1px border. Vertical stack: Image (top), Title (Bold), Meta-info (Rating, Time, Distance), Price/Action (Bottom).
- **Metadata Layout:** Use horizontal stacks with dot separators (e.g., "4.5 • 20 mins • 2km").

### Navigation & Filters
- **Location Picker:** Top-left prominence. Bold current location with a chevron-down.
- **Category Filters:** Horizontally scrollable list of chips. Active chips take the primary color background; inactive chips have a light gray border.

### Status Indicators
- Use small, circular badges for status (e.g., Green for 'Open', Red for 'Closed').
- Use a secondary brand color (#27AE60) for highlight labels like "Best Seller" or "Discount Applied."