Taste

Taste Theme Design System

Direction

Use an image-led restaurant layout that feels current, welcoming and useful. Prioritize menus, opening hours, location details and reservation paths over decorative effects.

Foundations

• Use only the markup and classes supplied by ./theme/views/.
• Use system fonts and the existing --pico-* variables.
• Keep page content within a 1280px maximum width.
• Use midnight backgrounds, layered dark surfaces, emerald structure, coral actions and restrained violet highlights.
• Keep major images generously rounded and tightly cropped around food, drinks or the room.
• Do not add animations, transitions, parallax, autoplay effects or smooth scrolling.

Components

• Hero: one strong image beside a concise headline, two clear actions and no carousel.
• Menu: use pricing cards or tables with the dish name, a brief description and an immediately visible price.
• Story: use image-text blocks with concrete details about ingredients, people and preparation.
• Visit: make address, hours, phone and booking action easy to scan.
• Footer: use the deepest midnight surface with restrained emerald and violet light for navigation and contact details.

Accessibility

• Preserve the skip link, semantic headings and visible :focus-visible outline.
• Maintain WCAG 2.2 AA contrast for text and controls.
• Keep controls at least 2.5rem high and ensure long menu labels wrap cleanly.
• Never communicate dietary or availability information by color alone.

Content

Write with appetite and precision. Name ingredients, techniques, hours and places. Avoid generic hospitality slogans and exaggerated claims.