---
name: Urban Utility
colors:
  surface: '#f7f9fb'
  surface-dim: '#d8dadc'
  surface-bright: '#f7f9fb'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f2f4f6'
  surface-container: '#eceef0'
  surface-container-high: '#e6e8ea'
  surface-container-highest: '#e0e3e5'
  on-surface: '#191c1e'
  on-surface-variant: '#594139'
  inverse-surface: '#2d3133'
  inverse-on-surface: '#eff1f3'
  outline: '#8d7168'
  outline-variant: '#e1bfb5'
  surface-tint: '#ab3500'
  primary: '#ab3500'
  on-primary: '#ffffff'
  primary-container: '#ff6b35'
  on-primary-container: '#5f1900'
  inverse-primary: '#ffb59d'
  secondary: '#5d5c74'
  on-secondary: '#ffffff'
  secondary-container: '#e2e0fc'
  on-secondary-container: '#63627a'
  tertiary: '#535d7e'
  on-tertiary: '#ffffff'
  tertiary-container: '#8e99bc'
  on-tertiary-container: '#26314f'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#ffdbd0'
  primary-fixed-dim: '#ffb59d'
  on-primary-fixed: '#390c00'
  on-primary-fixed-variant: '#832600'
  secondary-fixed: '#e2e0fc'
  secondary-fixed-dim: '#c6c4df'
  on-secondary-fixed: '#1a1a2e'
  on-secondary-fixed-variant: '#45455b'
  tertiary-fixed: '#dae1ff'
  tertiary-fixed-dim: '#bbc5eb'
  on-tertiary-fixed: '#0f1a37'
  on-tertiary-fixed-variant: '#3b4665'
  background: '#f7f9fb'
  on-background: '#191c1e'
  surface-variant: '#e0e3e5'
typography:
  headline-xl:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: '700'
    lineHeight: 56px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
    letterSpacing: -0.01em
  headline-lg-mobile:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '700'
    lineHeight: 32px
  headline-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 16px
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  container-max: 1280px
  gutter: 24px
  margin-mobile: 16px
  stack-sm: 8px
  stack-md: 16px
  stack-lg: 32px
  stack-xl: 64px
---

## Brand & Style
The design system is engineered for high-utility local discovery, balancing the urgency of search with the reliability of a verified directory. The personality is professional, authoritative, and efficient, ensuring users can find local services with minimal friction.

The style leans into **Corporate Modern** with a focus on high-clarity information architecture. It utilizes a clean, systematic approach to white space and hierarchy to evoke a sense of trust and community scale. The interface remains grounded through a stable navy foundation, while vibrant orange accents guide the user toward primary actions.

## Colors
The color palette is designed for maximum legibility and clear status communication.

- **Primary (#FF6B35):** Reserved strictly for high-conversion CTAs, active search buttons, and key highlights.
- **Secondary & Accent (#1A1A2E, #16213E):** Used for structural elements like navigation bars, footers, and primary headings to establish a professional "anchor."
- **Functional Colors:** Success Green is used exclusively for "Open" statuses and verified checkmarks, while Danger Red is reserved for "Closed" statuses and error states.
- **Surface & Background:** A soft light-gray background provides a neutral canvas, allowing pure white card surfaces to pop with distinct elevation.

## Typography
This design system utilizes **Inter** exclusively to maintain a systematic, utilitarian aesthetic. 

- **Headings:** Use bold weights (700) and tighter letter-spacing for large headlines to create a compact, impactful look.
- **Body:** Standard reading text uses a 16px base with a generous line height (1.5x) to ensure readability during quick scanning of business descriptions.
- **Labels:** Small, semi-bold labels are used for metadata like categories or distance indicators, occasionally using uppercase for subtle differentiation in the UI hierarchy.

## Layout & Spacing
The layout follows a **Fluid Grid** model with a maximum container width of 1280px for desktop.

- **Grid:** A 12-column system is used for desktop results pages, typically utilizing a 4-column span for business cards.
- **Mobile:** Transition to a 1-column layout with 16px horizontal margins.
- **Spacing Rhythm:** An 8px base unit governs all dimensions. Use `stack-md` (16px) for internal card padding and `stack-lg` (32px) for vertical section spacing.

## Elevation & Depth
This design system uses a **Tonal Layering** approach combined with subtle shadows to define depth.

- **Base Level:** Background (#F8FAFC) is the lowest layer.
- **Card Level:** Interactive elements and business listings sit on white (#FFFFFF) surfaces with a subtle shadow (`0 2px 8px rgba(0,0,0,0.08)`).
- **Hover State:** Upon interaction, shadows should slightly deepen or expand to `0 4px 12px rgba(0,0,0,0.12)` to provide immediate tactile feedback.
- **Outlines:** Use 1px borders in a soft neutral (e.g., #E2E8F0) for input fields to maintain definition without adding visual weight.

## Shapes
The shape language is professional and approachable.

- **Cards:** Use a consistent 12px corner radius to soften the high-density information layout.
- **Buttons:** Use an 8px radius to maintain a slightly more structured, "action-oriented" look compared to the cards.
- **Badges:** Status indicators (Open/Closed) and categories must use a **Pill-shaped** (fully rounded) geometry to differentiate them from interactive buttons and structural containers.

## Components
- **Buttons:** Primary buttons use the Orange-Red background with white text. Ghost buttons use a Navy border and text. All buttons have 8px rounding and semi-bold labels.
- **Cards:** Business listing cards feature a 12px radius, the standard subtle shadow, and internal 16px padding.
- **Pill Badges:** Used for "Open Now" (Success bg, White text), "Closed" (Danger bg, White text), and categories (Light Navy/Accent bg, White text).
- **Search Bar:** A prominent component with a white background, 8px or 12px radius, and a primary-colored "Search" icon or button.
- **Inputs:** Clean, 1px bordered boxes with 8px rounding. Focus states should utilize a subtle 2px glow in the primary color.
- **Lists:** Used for directory categories or filter options, featuring clear icons and generous 12px vertical padding for touch-friendly interaction.