CRAV Burgers design system

---
version: alpha
name: CRAV Burgers
description: "Light interface measured from cravburgers.shop: Mouse Memoirs type with Modak, vivid red accents, flat surfaces and square corners."
colors:
  background: "#F5E3CD"
  surface: "#F5E3CD"
  on-surface: "#1B1B1B"
  on-background: "#1B1B1B"
  overlay: "#FFD75033"
  outline: "#1B1B1B33"
  outline-variant: "#1B1B1B26"
  primary: "#F91814"
  on-primary: "#F5E3CD"
  secondary: "#FFD750"
  tertiary: "#DEB110"
  warning: "#F4A804"
typography:
  headline-display:
    fontFamily: Mouse Memoirs
    fontSize: 432px
    fontWeight: 400
    lineHeight: 0.8
  headline-lg:
    fontFamily: Mouse Memoirs
    fontSize: 216px
    fontWeight: 400
    lineHeight: 0.75
  headline-md:
    fontFamily: Modak
    fontSize: 40px
    fontWeight: 400
    lineHeight: 0.9
  headline-sm:
    fontFamily: Modak
    fontSize: 34.5px
    fontWeight: 400
    lineHeight: 1.1
  body-md:
    fontFamily: Mouse Memoirs
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.1
  body-sm:
    fontFamily: Mouse Memoirs
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  caption:
    fontFamily: Mouse Memoirs
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Mouse Memoirs
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.025em
  headline-display-mobile:
    fontFamily: Mouse Memoirs
    fontSize: 101.5px
    fontWeight: 400
    lineHeight: 0.85
  headline-lg-mobile:
    fontFamily: Mouse Memoirs
    fontSize: 93.5px
    fontWeight: 400
    lineHeight: 0.75
rounded:
  none: 0px
spacing:
  xs: 4px
  sm: 7.2px
  md: 14.4px
  lg: 21.6px
  xl: 36px
  gutter: 8.64px
  section: 115.2px
  margin: 36px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    padding: 7.2px 23.04px
    height: 42px
  button-outline:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    padding: 7.2px 20.16px
    height: 46px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    padding: 7.2px 20.16px
---

# CRAV Burgers Design System

## Overview

CRAV Burgers describes itself as: “Experience the ultimate artisan smashed burgers at CRAV. Fresh ingredients, bold flavors, and zero guilt. Est. 1997 — Navarra, España.” The interface is light, built on **Pale Orange (#F5E3CD)** with **Charcoal (#1B1B1B)** text, and **Vivid Red (#F91814)** as the main accent.

Type is set in **Mouse Memoirs** and **Modak**. Headlines run large; body text is 26px. The surface language is flat. Corners are square.

Measured from [cravburgers.shop](https://www.cravburgers.shop/) on November 5, 2026 at 1440×900 and 390×844 from 155 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 10 roles.

- **Pale Orange (#F5E3CD):** Page background, seen 2 times. Token `background`, CSS `--beige`.
- **Charcoal (#1B1B1B):** Primary text and headings, seen 22 times. Token `on-surface`, CSS `--black`.
- **Amber 20% (#FFD75033):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Charcoal 20% (#1B1B1B33):** Borders and dividers, seen 1 time. Token `outline`.
- **Charcoal 15% (#1B1B1B26):** Secondary dividers, seen 1 time. Token `outline-variant`.
- **Vivid Red (#F91814):** Primary buttons and calls to action, seen 15 times. Token `primary`, CSS `--red`.
- **Pale Orange (#F5E3CD):** Text and icons on primary. Token `on-primary`.
- **Amber (#FFD750):** Accent in text, fills and borders, seen 4 times. Token `secondary`, CSS `--mustard`.
- **Vivid Amber (#DEB110):** Accent, seen 4 times. Token `tertiary`.
- **Vivid Amber (#F4A804):** Warnings and highlights, seen 10 times. Token `warning`, CSS `--mustard-dark`.

## Typography

**Mouse Memoirs** and **Modak** share the interface. Fallback stack: `Mouse Memoirs, Mouse Memoirs Fallback`.

- **headline-display:** Mouse Memoirs 432px at weight 400, line height 0.8 (101.5px on mobile). Page title (h1).
- **headline-lg:** Mouse Memoirs 216px at weight 400, line height 0.75, uppercase (93.5px on mobile). Section headings (h2).
- **headline-md:** Modak 40px at weight 400, line height 0.9. Sub-section headings.
- **headline-sm:** Modak 34.5px at weight 400, line height 1.1. Card and feature titles.
- **body-md:** Mouse Memoirs 26px at weight 400, line height 1.1. Body text.
- **body-sm:** Mouse Memoirs 16px at weight 400, line height 1.5. Secondary and small text.
- **caption:** Mouse Memoirs 14px at weight 400, line height 1.5. Captions and fine print.
- **label-md:** Mouse Memoirs 13px at weight 400, line height 1.5, tracking 0.025em, uppercase. Buttons, navigation and labels.

## Layout

Spacing does not follow a strict grid: 32% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 4px, sm 7.2px, md 14.4px, lg 21.6px, xl 36px.
- **Sections:** 115.2px vertical padding between major sections.
- **Gaps:** 8.64px is the most common gap in flex and grid layouts.
- **Page margin:** 36px on each side of full-width sections.
- **Breakpoints:** 1025px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from color contrast and #1B1B1B33 borders.

## Shapes

Corners are square. Measured radii, most used first:

- **none (0px):** measured.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“BURGERS BURGERS”):** #F91814 fill, #F5E3CD text, 18.72px/400, 3.35544e+07px radius, padding 7.2px 23.04px.
- **button-outline (“MENU MENU”):** transparent fill, #1B1B1B text, 16px/400, 3.35544e+07px radius, padding 7.2px 20.16px, border 2px solid #1B1B1B33.
- **button-ghost (“MENU MENU”):** transparent fill, #1B1B1B text, 16px/400, 3.35544e+07px radius, padding 7.2px 20.16px.

## Do's and Don'ts

- Do use #F5E3CD for the page.
- Do reserve #F91814 for primary actions and key highlights.
- Do reuse the measured spacing steps (7.2px, 14.4px, 21.6px).
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond Mouse Memoirs and Modak.
- Don't use #F91814 for large backgrounds or body text.
- Don't make interface transitions slower than 0.4s.

## Motion

Interface transitions are quick: 0.3s, 0.2s, 0.15s, 0.4s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/cravburgers.shop/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).