Initial commit

stitch_nearle_awwwards_redesign/DESIGN.md

@@ -0,0 +1,199 @@
+---
+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."