Switch between the rendered Visual preview and the Raw DESIGN.md.
The Spice Shop design system embodies bold, celebratory energy rooted in culinary passion and global spice heritage. The palette draws inspiration from warm spices, vibrant ingredients, and the rich history of the trade since 1881. The visual language combines striking complementary colors—deep burgundy and electric yellow—with organic, playful imagery of spices, herbs, and ingredients. Typography emphasizes warmth through rounded forms and generous spacing, creating an inviting, premium yet approachable atmosphere. The design celebrates flavor and discovery, positioning spices as treasured commodities worthy of exploration and joy.
Key Characteristics
#8B0000): Primary brand color for headers, dominant surfaces, and brand identity anchors#AC2331): Secondary red for supporting accents and slightly lighter burgundy contexts#FEDE2C): Primary accent for alerts, highlights, and high-visibility interactive states#EE9441): Supporting warm accent for secondary emphasis and ingredient imagery#3ED660): Confirmation and positive action states#006400): Supporting deep tone for decorative elements#000000): Primary text, dark surfaces, and strong contrast#FFFFFF): Light surfaces, contrast backgrounds, and clean spaces#333333): Secondary text and muted content#DFDFDF): Subtle borders and dividers#DEDEDE): Soft background tints and disabled states#C8C8C8): Input borders and neutral UI elementsrgba(0, 0, 0, 0)): Transparent overlays and clean button backgroundsrgba(255, 255, 255, 0.78)): Frosted input backgroundsrgba(0, 0, 0, 0.81)): Text on light backgrounds and form labelsPrimary: Lithos Regular (display, headings, buttons, labels) with fallback stack: Lithos, Georgia, serif
Secondary: Poppins (body, descriptions, secondary navigation) with fallback stack: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display 1 | Lithos Regular | 56px | 400 | 56px | 0px | Page titles, hero headings |
| Heading 2 | Poppins | 32px | 400 | 32px | 0px | Section titles, major category headings |
| Heading 3 | Poppins | 22px | 300 | 24px | 0px | Subsection headings, medium emphasis |
| Heading 4 | Lithos Regular | 20px | 800 | 20px | 0px | Card titles, bold accents |
| Body Regular | Poppins | 14px | 400 | 14px | 0px | Standard paragraph text |
| Body Link | Poppins | 16px | 400 | 25.6px | 0px | Navigation links, primary content links |
| Small | Lithos Regular | 11.9px | 400 | 19.04px | 0px | Captions, metadata, fine print |
| Button | Lithos Regular | 14px | 500 | 14px | 0px | All button labels and CTAs |
| Input | Lithos Regular | 14px | 400 | 22.4px | 0px | Form field text |
| Span Accent | Lithos Regular | 14px | 400 | 22.4px | 0px | Inline highlights, labels |
800) for accent headings; use 400 for hierarchy through size rather than weight heavinessPrimary Button (Burgundy / Full Width)
#8B0000#FFFFFF12.8px 20px15px0px nonenoneauto100%#6B0000, increase opacity to 0.9rgba(0, 0, 0, 0.3) 0px 2px 4px insetSecondary Button (Ghost / Outline)
rgba(0, 0, 0, 0)#00000012.8px 20px15px1px solid rgba(0, 0, 0, 0.81)noneauto100%rgba(0, 0, 0, 0.05)#000000, add inset shadowIcon Button (Circular)
rgba(0, 0, 0, 0)#00000016px50%0px nonenonefit-contentfit-contentrgba(0, 0, 0, 0.08)rgba(0, 0, 0, 0.15) 0px 2px 4px insetIcon Button on Dark (Circular, White Text)
rgba(0, 0, 0, 0)#FFFFFF16px50%0px nonergb(0, 0, 0) 0px 0px 0px 0px insetfit-contentfit-contentrgba(255, 255, 255, 0.2) 0px 2px 4px insetContent Card (Full Width)
#FFFFFFrgba(0, 0, 0, 0.81)0px0px0px nonenoneauto100%24px to 52px depending on content densityTransparent Container (Flex Layout)
rgba(0, 0, 0, 0)#0000000px0px0px nonenone100% or autoautoModal / Elevated Card
#FFFFFFrgba(0, 0, 0, 0.81)24px to 40px14px0px nonergba(0, 0, 0, 0.15) 0px 4px 20px 0pxauto90% (mobile) / 520px (desktop)Text Input (Search, Light)
rgba(255, 255, 255, 0.78)#33333312.8px 16px 12.8px 32.8px4px1px solid rgba(0, 0, 0, 0.81)none36px100%#000000, background to #FFFFFF, add outline 2px solid rgba(139, 0, 0, 0.3)rgba(0, 0, 0, 0.53)Text Input (Standard, White)
#FFFFFFrgba(0, 0, 0, 0.53)12.8px 16px 12.8px 32.8px4px0px nonenone36px100%1px solid #000000, add box-shadow 0px 0px 0px 3px rgba(139, 0, 0, 0.15)Text Input (Rounded, Large)
#FFFFFFrgba(0, 0, 0, 0.53)16px 55.2px 16px 28px15px1px solid rgba(0, 0, 0, 0.13)none56.39px325.52px (or responsive 100% on mobile)#8B0000, add box-shadow rgba(139, 0, 0, 0.2) 0px 0px 0px 3pxHeader Navigation (Horizontal)
#8B0000#FFFFFF16px 24px0px0px nonenoneauto100%#FEDE2C, background fade to rgba(255, 255, 255, 0.1)#FEDE2C, underline 2px solid #FEDE2CFooter Link (Vertical Stack)
rgba(0, 0, 0, 0)rgba(0, 0, 0, 0.7)4px 0px0px0px nonenoneauto100%#8B0000, text-decoration underlineLink Button (Framed)
rgba(0, 0, 0, 0)#00000016px 24px15px1px solid #000000 (inset box-shadow pattern)rgb(0, 0, 0) 0px 0px 0px 1px inset32pxautorgba(0, 0, 0, 0.05), border to #000000Base unit: 4px
Full scale: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 52px, 60px
Usage Contexts:
4px, 8px: Micro spacing between inline elements, icon-text gaps12px, 16px: Component internal padding, small section gaps20px, 24px: Standard section spacing, card padding, vertical rhythm28px, 32px: Medium section spacing, major content breaks40px, 48px: Large section gaps, between major content blocks52px, 60px: Hero spacing, page-level vertical divisions1440px (desktop container)16px (mobile/tablet), 24px (desktop)#8B0000) and yellow (#FEDE2C) backgrounds with white (#FFFFFF) content cards overlaidGenerous whitespace is central to the design philosophy. Sections breathe with 48px to 60px vertical padding. Cards are surrounded by 24px to 32px internal padding. This creates visual clarity and emphasizes the premium nature of spice offerings. Never collapse spacing below 12px for readability; prioritize breathing room over density.
0px: Full-width sections, card edges on full containers, no radius for body text blocks4px: Form inputs, minimal UI elements, subtle softness14px: Modal windows, elevated containers, rounded cards15px: Button corners, action elements, prominent UI components50%: Icon buttons, badge elements, circular badges and labels| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow | Background sections, text areas, primary surfaces |
| Raised (1) | rgba(0, 0, 0, 0.15) 0px 4px 20px 0px | Modal windows, floating cards, overlays |
| Elevated (2) | rgba(0, 0, 0, 0.15) 0px 5px 30px 0px | Dropdown menus, popovers, secondary modals |
| Pressed (inset) | rgb(0, 0, 0) 0px 0px 0px 0px inset | Active button states, pressed interactions |
Shadow Philosophy:
Shadows are used sparingly and deliberately to create clear separation between interactive and static layers. Modals and floating elements receive soft shadows (rgba(0, 0, 0, 0.15)) to lift them from the page without creating harsh depth. Inset shadows are applied to active button states to create a tactile "pressed" sensation. Full-width sections maintain flat surfaces to support the clean, grid-based layout philosophy.
44px × 44px for all interactive elements on mobile24px padding around major content blocks to create visual rhythm#8B0000 for primary navigation backgrounds to anchor the page and establish visual hierarchy12px padding) to enhance scannability8px spacing and #333333 text color for clarity14px for accessibility and legibility across devices12.8px; maintain comfortable click targets and visual balance#C8C8C8 on white; use #333333 instead)0px, 4px, 14px, 15px, 50%)20px vertically; prioritize breathing room#8B0000) with lighter reds in primary UI; use #AC2331 only for subtle accentsrgba() colors); use solid values for readability| Name | Width | Layout Changes | Font Adjustments | Spacing |
|---|---|---|---|---|
| Mobile | 320px–767px | 1 column, full bleed; stacked navigation | Body: 14px (no change); Headings: 24px–48px | 16px padding, 20px gaps |
| Tablet | 768px–1023px | 4-column grid; horizontal nav; 2-column cards | Body: 14px; H2: 28px; H1: 48px | 20px padding, 24px gaps |
| Desktop | 1024px–1440px | 12-column grid; 2–3 column layouts; full UI | Body: 14px; H2: 32px; H1: 56px | 24px padding, 32px gaps |
| Large Desktop | 1441px+ | Max-width container 1440px centered; large hero sections | No change | 32px gaps, 52px–60px section spacing |
44px × 44px on mobile, 48px × 48px on tablet/desktop12.8px 20px minimum (36px height on mobile), 16px 24px on desktop8px padding around text links for tap accuracy44px square on mobile, 48px on desktop (padding 16px within 50% circular bounds)768px; show full horizontal menu at tablet+width: 100%); constrain to 325px max on desktop16px padding on mobile, 20px on tablet, 24px on desktop8px–16px on mobile and tablet (e.g., 56px → 40px on tablet, 32px on mobile)12px–16px on mobile; maintain 24px+ on tablet/desktop for readability#8B0000)#FEDE2C)#000000)#333333)#FFFFFF)#8B0000)#EE9441)#3ED660)#C8C8C8) or rgba(0, 0, 0, 0.81)#000000) on yellow; White (#FFFFFF) on burgundyTypography Foundation: All headlines and buttons use Lithos Regular (font-family: 'Lithos Regular', Georgia, serif); all body text uses Poppins (font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif). No exceptions.
Color Pairing Rule: Burgundy (#8B0000) backgrounds always pair with white (#FFFFFF) text or content; yellow (#FEDE2C) sections always pair with black (#000000) or burgundy text. Never reverse these combinations.
Button Hierarchy: Primary buttons (#8B0000 background, white text) are full-width with 15px border radius. Secondary buttons are outline-only (1px solid #000000 border, no fill). Icon buttons are circular (50% radius, 16px padding). All buttons are 14px Lithos Regular, weight 500.
Spacing Units: Every margin, padding, and gap must be a multiple of 4px. Use the scale: 4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 52, 60. Section vertical padding is always 24px–60px; component internal padding is 12px–24px.
Form Styling: All inputs are 14px Lithos Regular with 36px height (mobile/tablet) or 56.39px (large search). Border radius is 4px for standard inputs, 15px for hero search. Placeholder text is rgba(0, 0, 0, 0.53). Focus state adds 2px–3px inset shadow or border in burgundy.
Elevation & Shadows: Only modals and floating cards receive shadows: rgba(0, 0, 0, 0.15) 0px 4px 20px 0px for raised, rgba(0, 0, 0, 0.15) 0px 5px 30px 0px for elevated. Full-width sections are flat (no shadow). Active button states use inset shadow rgba(0, 0, 0, 0.3) 0px 2px 4px inset.
Responsive Adaptation: At mobile (<768px), collapse multi-column layouts to single column; reduce heading sizes by 8px–16px; apply full-width padding 16px instead of centered 24px. At tablet (768px–1023px), use 4-column grid and 20px padding. At desktop (1024px+), use 12-column grid and 24px padding. Always maintain min-width 1440px max-width desktop containers.
Focus & Accessibility: Every interactive element must have a visible focus state. Buttons and links show background fade or color shift on :hover and outlines on :focus. Form inputs show 2px solid outline in burgundy on :focus. Minimum contrast ratio is 4.5:1 for body text, 3:1 for large text (18px+).
Component Defaults: Cards have zero border radius and no shadow by default; modals use 14px border radius and raised shadow. Buttons default to transparent background with black text unless specified as primary (burgundy) or secondary (yellow highlight). Navigation always uses burgundy background with white text.
Brand Consistency: Every page must feature burgundy headers or navigation anchors, yellow accent sections, and Lithos Regular in headlines. The grid-based layout maintains whitespace ratios; never pack more than 2–3 major content blocks per full-width section. All CTAs should use primary burgundy buttons with white text.