Red Spice Melbourne

Overview

Red Spice Melbourne is a vibrant takeaway destination that fuses bold Himalayan flavours with modern Asian energy. The design system embraces a "Fiery Minimalism" aesthetic—a dark, high-contrast canvas punctuated by a signature burnt-orange accent (#f44725) that evokes heat, appetite, and urgency. The brand serves locals in Essendon seeking exciting, fresh food delivered fast. The UI personality is confident and direct: no fussy ornamentation, just clean typography, generous whitespace, and strategic colour pops that guide the eye to action. Voice: energetic yet approachable, precise yet warm. Example: "Order now—your dragon smash burger is 12 minutes away."

Colors

The colour system is built on a near-black foundation (surface: #0a0a0a, on-surface: #f5f5f5) that maximizes contrast and readability while evoking the intimate warmth of a restaurant interior. Primary (#f44725) is the fiery accent—used exclusively on CTAs, hover states, and brand highlights to create visual urgency and appetite appeal. It appears in button backgrounds (bg: #f44725, text: #ffffff), badge containers (rgba(244, 71, 37, 0.15) with 1px border at rgba(244, 71, 37, 0.3)), and focus rings (0 0 0 3px rgba(244, 71, 37, 0.1)). Secondary (#e9ecef) provides a cool counterpoint for secondary text and disabled states. Tertiary (#6c757d) anchors muted UI elements like labels and helper text. Surfaces use a layered opacity stack: surface-container-low (#0f0f0f), surface-container (#141414

Typography

The type system pairs Outfit (display, headlines) with DM Sans (body, labels) to create a distinctive hierarchy that balances geometric modernity with approachable warmth. Outfit's geometric letterforms convey confidence and energy at large sizes (display: 96px, headline-lg: 48px, headline-md: 32px), while DM Sans's humanist curves keep body copy (18px, 16px) intimate and readable. Letter-spacing is tight on headlines (-0.04em to -0.02em) to reinforce boldness, and loose on labels (0.05em to 0.01em) to aid scannability. Line-height is generous (1.5 to 1.75 ratio) to ensure legibility over the dark background. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.3) on small labels (12px–14px) overlaid on food imagery to maintain contrast. Font weights are deliberate: 700 for display/headlines, 600 f

Layout

The layout uses a 12-column responsive grid with a max-width of 1280px, centred with 24px gutters on desktop and 16px on mobile. The hero section spans full viewport height (min-h-[100dvh]) with a layered background: food imagery (object-cover, object-center) overlaid with a dark gradient (from-background/80 via-background/60 to-background) and a 40% black scrim to ensure text legibility. Section spacing follows the lg token (40px) for major breaks and md token (24px) for internal rhythm. Container padding is 24px on desktop (md:px-6) and 16px on mobile (px-4). The spacing scale is semantic: xs (4px) for micro-interactions, sm (12px) for input padding, md (24px) for card padding and section margins, lg (40px) for hero-to-content transitions, xl (64px) for full-page section separation. Whit

Elevation & Depth

Depth is conveyed through layered opacity and subtle shadows rather than harsh drop-shadows. Level 1 (Base): dark background (#0a0a0a) with subtle grain texture. Level 2 (Cards/Inputs): rgba(0, 0, 0, 0.4) background with 1px rgba(255, 255, 255, 0.1) border and 0 3px 8px rgba(0, 0, 0, 0.15) shadow. Level 3 (Buttons/CTAs): primary background (#f44725) with 0 8px 24px rgba(244, 71, 37, 0.25) shadow, escalating to 0 12px 32px rgba(244, 71, 37, 0.35) on hover. Interactive elements use a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition for smooth state changes. Focus states add a 3px ring at rgba(244,

Shapes

The shape philosophy is "Warm Precision"—rounded corners are present but restrained, avoiding the soft-bubble aesthetic in favour of architectural clarity. Buttons use lg (1rem / 16px) border-radius to feel approachable while maintaining a modern edge. Cards and inputs use DEFAULT (0.5rem / 8px) for subtle definition. Badges and pills use full (9999px) for maximum friendliness. The hero badge ("Essendon's Premier Takeaway") uses lg radius with a 1px primary-tinted border to draw attention without aggression. All radius values are applied consistently across hover and active states—no shape-shi

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses 56px height (min-h-10 + h-14 in Tailwind), 32px horizontal padding, lg radius, and primary background (#f44725) with white text (body-lg, 500 weight). On hover, the background shifts to primary-container (#ff6b4a), shadow intensifies to 0 12px 32px rgba(244, 71, 37, 0.35), and a subtle scale(1.02) transform applies. On active, the background darkens to #e63d1f and scale(0.98) provides tactile feedback. Transition duration is 200ms. button-secondary uses a transparent background with a 1px rgba(255, 255, 255, 0.2) border and white text; on hover, the background becomes rgba(255, 255, 255, 0.08) and the border brightens to rgba(255, 255, 255, 0.4). Phone CTAs include an inline icon (lucide-phone, 20px) with

Do's and Don'ts

**Do**

• Do use primary (#f44725) exclusively for CTAs, focus states, and brand highlights—never dilute it with secondary uses.
• Do maintain high contrast: on-surface (#f5f5f5) on surface (#0a0a0a) yields 18:1 WCAG AAA compliance.
• Do apply generous padding and whitespace (md: 24px, lg: 40px) to let the dark background breathe and make content feel premium.
• Do use Outfit for headlines and display text to convey energy; reserve DM Sans for body and labels for warmth and readability.
• Do layer shadows and opacity (rgba(0, 0, 0, 0.4) + 1px border) instead of harsh drop-shadows to maintain sophistication.
• Do animate state changes (hover, focus, active) with 200ms cubic-bezier(0.4, 0, 0.2, 1) for smooth, predictable feedback.

**Don't**

• Don't use secondary (#e9ecef) or tertiary (#6c757d) as primary accent colours—they dilute the fiery brand identity.
• Don't apply border-radius > lg (1rem) on buttons or cards; the brand is precise, not bubbly.
• Don't use pure white (#ffffff) as a background; always use surface (#0a0a0a) or surface-container layers to maintain the dark, intimate aesthetic.
• Don't animate scale or translate on button hover by more than 5%; micro-interactions should feel confident, not desperate.
• Don't place small text (< 14px) directly over food imagery without a text-shadow or scrim; readability is non-negotiable.
• Don't mix Outfit and DM Sans weights arbitrarily; follow the hierarchy: Outfit 700 for display, DM Sans 500–600 for body and labels.