nearle_web_nextjs/stitch_nearle_awwwards_redesign/DESIGN.md

name, colors, typography, rounded, spacing

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