# CRAV Burgers design system

> CRAV Burgers design system measured from cravburgers.shop: Mouse Memoirs font, #F91814 primary, 10 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/cravburgers.shop/

CRAV Burgers’s website (cravburgers.shop) uses the Mouse Memoirs font and #F91814 as its main color on a #F5E3CD background. Measured by Sitepeel on November 5, 2026.

## What font does CRAV Burgers use?

CRAV Burgers uses Mouse Memoirs (weight 400) and Modak (weight 400) on cravburgers.shop. Page titles are 432px at weight 400 (101.5px on phones) and body text is 26px. Measured on November 5, 2026.

- Mouse Memoirs (weights 400)
- Modak (weights 400)

## CRAV Burgers colors: palette and hex codes

CRAV Burgers’s main colors are #F5E3CD (pale orange) for the background, #1B1B1B (charcoal) for text and #F91814 (vivid red) as the main accent, with #FFD750 (amber) and #DEB110 (vivid amber) as other accents. Measured on November 5, 2026.

- #F5E3CD: pale orange
- #1B1B1B: charcoal
- #F91814: vivid red
- #FFD750: amber
- #DEB110: vivid amber

## What is CRAV Burgers built with?

CRAV Burgers’s website (cravburgers.shop) is built with Next.js, React, Tailwind CSS, Vercel and GSAP. Measured on November 5, 2026.

- JavaScript framework: Next.js 16.2.3, React 19.3.0-canary-3f0b9e61-2
- Animation & 3D: GSAP 3.15.0, Lenis 1.3.23
- Analytics: Vercel Web Analytics
- Hosting & CDN: Vercel
- UI & CSS: Tailwind CSS 4.x

## Questions and answers

### What font does CRAV Burgers use?

CRAV Burgers’s website uses Mouse Memoirs (weight 400) and Modak (weight 400). Page titles are 432px at weight 400 (101.5px on phones) and body text is 26px. Measured on November 5, 2026.

### What are the CRAV Burgers colors and hex codes?

On cravburgers.shop: #F5E3CD (pale orange) for the background, #1B1B1B (charcoal) for text and #F91814 (vivid red) as the main accent, with #FFD750 (amber) and #DEB110 (vivid amber) as other accents. The color palette above lists all 10 colors with their hex codes and where each one is used.

### What is the CRAV Burgers design system?

The design system on this page is cravburgers.shop’s, as measured on November 5, 2026: Mouse Memoirs type, #F91814 as the main color and square corners, written down as a DESIGN.md. It is not CRAV Burgers’s own documentation.

### What is CRAV Burgers built with?

CRAV Burgers’s website (cravburgers.shop) is built with Next.js, React, Tailwind CSS, Vercel and GSAP. The full tech stack Sitepeel found: Next.js, React, GSAP, Lenis, Vercel Web Analytics, Vercel and Tailwind CSS. Measured on November 5, 2026.

### What is the CRAV Burgers DESIGN.md?

A plain-text file with CRAV Burgers’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this CRAV Burgers’s official design system?

No. Sitepeel measured it from cravburgers.shop’s public page on November 5, 2026. It is an independent analysis, not made or approved by CRAV Burgers.

### Can I use CRAV Burgers’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy CRAV Burgers’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/cravburgers.shop/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with CRAV Burgers.

## The DESIGN.md file

```markdown
---
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).

```