CRAV | Artisan Smashed Burgers — Design Report

Palette

Colors

primary

#F91814

4.06 on white · 5.17 on black · 1° 95% 53%

secondary

#000000

21 on white · 1 on black · 0° 0% 0%

accent

#40220D

14.46 on white · 1.45 on black · 25° 66% 15%

Token Roles 8 tokens

background

#F4EBE1 · 17.82:1 vs black

surface

#F4EBE1 · 17.82:1 vs black

text-primary

#000000 · 21:1 vs white

text-secondary

#2C1608 · 17.14:1 vs white

border

#F4EBE1 · 17.82:1 vs black

on-primary

#FFFFFF · 21:1 vs black

on-secondary

#FFFFFF · 21:1 vs black

on-accent

#FFFFFF · 21:1 vs black

Detected Palette 10 colors by frequency in source CSS

#F91814

used 5× · 1° 95% 53%

#000000

used 5× · 0° 0% 0%

#FFFFFF

used 3× · 0° 0% 100%

#40220D

used 2× · 25° 66% 15%

#F4EBE1

used 1× · 32° 46% 92%

#F4A804

used 1× · 41° 97% 49%

#FAFAFA

used 1× · 0° 0% 98%

#F9CD25

used 1× · 48° 95% 56%

#2C1608

used 1× · 23° 69% 10%

#583115

used 1× · 25° 61% 21%

Type System

Typography

display

inherit

72px · 400 · LH 1 · LS -0.025em

CRAV | Artisan Smashed Burgers

headline-lg

inherit

36px · 400 · LH 1 · LS -0.025em

CRAV | Artisan Smashed Burgers

headline-md

inherit

30px · 400 · LH 1 · LS -0.025em

CRAV | Artisan Smashed Burgers

title-lg

inherit

20px · 400 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

body-lg

inherit

18px · 400 · LH 1.625

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

label-md

inherit

14px · 400 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

label-sm

inherit

12px · 400 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

Detected Font Stacks

'Inter''Modak''Mouse Memoirs'

Structure

Layout

Container

Section padding: — · card padding: —

Grid

12-column reference grid · gap —

Spacing Scale

unit

8px

sm

8px

md

16px

lg

32px

xl

64px

detected

8px

detected

12px

detected

14px

detected

16px

detected

20px

detected

24px

detected

28px

detected

32px

detected

40px

detected

48px

Breakpoints

640px768px1024px

Depth

Elevation & Depth

level 1

0 1px 2px 0 rgba(0,0,0,0.05)

level 2

0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)

level 3

0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)

Geometry

Shapes

lg

24px

pill

9999px

Tokens in Context

Components

button-primary

fontSize12px

textTransformuppercase

letterSpacing-0.025em

fontWeight500

textColor#FFFFFF

backgroundColor#F91814

rounded9999px

padding8px 20px

transitionall 150ms cubic-bezier(0.4, 0, 0.2, 1)

button-secondary

textColor#FFFFFF

rounded9999px

fontWeight500

fontSize12px

textTransformuppercase

letterSpacing-0.025em

backgroundColor#F91814

padding12px 28px

transitioncolor, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)

navigation-link

fontSize12px

fontWeight500

letterSpacing-0.025em

textTransformuppercase

transitioncolor, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)

badge

fontSize12px

textTransformuppercase

letterSpacing-0.025em

fontWeight500

textColor#FFFFFF

backgroundColor#F91814

rounded9999px

padding8px 20px

transitionall 150ms cubic-bezier(0.4, 0, 0.2, 1)

card

background{colors.surface}

border1px solid {colors.border}

radius24px

boxShadow{elevation.md}

Animation

Motion

Easing Curves

cubic-bezier(0.4, 0, 0.2, 1)

Transitions

color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)all 150ms cubic-bezier(0.4, 0, 0.2, 1)transform 150ms cubic-bezier(0.4, 0, 0.2, 1)

Proof

Live Preview

Complete Reference

Full design.md Specification

Design Specification — CRAV | Artisan Smashed Burgers

Field	Value
Site / Project	https://artisan-burger-23.aura.build/
Analyzed on	2026-07-20
Analysis mode	Automated code extraction (no AI)

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#F4EBE1), ink text (#000000), a vivid accent (#40220D). All type is set in 'Inter'. Detected font weights: 400, 500, 600, 700.

Color System

Detected palette (by frequency)

Hex	RGB	HSL	Count
`#F91814`	249, 24, 20	1° 95% 53%	5
`#000000`	0, 0, 0	0° 0% 0%	5
`#FFFFFF`	255, 255, 255	0° 0% 100%	3
`#40220D`	64, 34, 13	25° 66% 15%	2
`#F4EBE1`	244, 235, 225	32° 46% 92%	1
`#F4A804`	244, 168, 4	41° 97% 49%	1
`#FAFAFA`	250, 250, 250	0° 0% 98%	1
`#F9CD25`	249, 205, 37	48° 95% 56%	1
`#2C1608`	44, 22, 8	23° 69% 10%	1
`#583115`	88, 49, 21	25° 61% 21%	1

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Token	Hex	RGB	HSL
`--color-background`	`#F4EBE1`	244, 235, 225	32° 46% 92%
`--color-primary`	`#F91814`	249, 24, 20	1° 95% 53%
`--color-accent`	`#40220D`	64, 34, 13	25° 66% 15%
`--color-surface`	`#F4EBE1`	244, 235, 225	32° 46% 92%
`--color-text-primary`	`#000000`	0, 0, 0	0° 0% 0%
`--color-secondary`	`#000000`	0, 0, 0	0° 0% 0%
`--color-text-secondary`	`#2C1608`	44, 22, 8	23° 69% 10%
`--color-border`	`#F4EBE1`	244, 235, 225	32° 46% 92%
`--color-on-primary`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-on-secondary`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-on-accent`	`#FFFFFF`	255, 255, 255	0° 0% 100%

Typography

Primary typeface: Inter — stack: 'Inter'

Font stacks (most used first)

'Inter'
'Modak'
'Mouse Memoirs'

Web font sources

fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Modak&family=Mouse+Memoirs&display=swap

Derived type scale

Token	Size
display	72px
headline-lg	36px
headline-md	30px
title-lg	20px
body-lg	18px
label-md	14px
label-sm	12px

Font sizes (by frequency)

Size	Count
60px	2
24px	2
48px	2
36px	1
12px	1
20px	1
30px	1
14px	1
18px	1
72px	1

Weights in use: 400, 500, 600, 700

Line heights (by frequency)

Value	Count
1	1
1.25	1
1.625	1

Letter spacing (by frequency)

Value	Count
-0.025em	1
-0.05em	1

Spacing

Derived spacing scale

Token	Value
unit	8px
sm	8px
md	16px
lg	32px
xl	64px

Raw values (by frequency)

Value	Count
32px	8
24px	5
8px	4
128px	3
80px	3
48px	3
64px	3
16px	2
96px	2
12px	2
20px	1
160px	1
40px	1
28px	1
0px	1
14px	1

Borders & Radius

Derived radius tokens

Token	Value
lg	`24px`
pill	`9999px`

Raw values (resolved, by frequency)

Radius	Count
`9999px`	1
`24px`	1

Shadows

Derived elevation

Token	Value
sm	`0 1px 2px 0 rgba(0,0,0,0.05)`
md	`0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)`
lg	`0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)`

All detected shadows

0 1px 2px 0 rgba(0,0,0,0.05)
0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)
0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)

Layout

Container max-width: 1280px

Grid columns (largest detected grid): 4

Breakpoints

640px
768px
1024px

Animation & Motion

Transitions

color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
all 150ms cubic-bezier(0.4, 0, 0.2, 1)
transform 150ms cubic-bezier(0.4, 0, 0.2, 1)

Easing curves

cubic-bezier(0.4, 0, 0.2, 1)

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “Les Burgers”

Property	Value
fontSize	`12px`
textTransform	`uppercase`
letterSpacing	`-0.025em`
fontWeight	`500`
textColor	`#FFFFFF`
backgroundColor	`#F91814`
rounded	`9999px`
padding	`8px 20px`
transition	`all 150ms cubic-bezier(0.4, 0, 0.2, 1)`

button-secondary — sample text: “Commander”

Property	Value
textColor	`#FFFFFF`
rounded	`9999px`
fontWeight	`500`
fontSize	`12px`
textTransform	`uppercase`
letterSpacing	`-0.025em`
backgroundColor	`#F91814`
padding	`12px 28px`
transition	`color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)`

navigation-link

Property	Value
fontSize	`12px`
fontWeight	`500`
letterSpacing	`-0.025em`
textTransform	`uppercase`
transition	`color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)`

badge

Property	Value
fontSize	`12px`
textTransform	`uppercase`
letterSpacing	`-0.025em`
fontWeight	`500`
textColor	`#FFFFFF`
backgroundColor	`#F91814`
rounded	`9999px`
padding	`8px 20px`
transition	`all 150ms cubic-bezier(0.4, 0, 0.2, 1)`

Source Design Tokens (CSS custom properties)

:root {
  --body-bg: #F4EBE1;
}

Do's and Don'ts

Do

Do reserve the accent #40220D for interactive highlights and key moments — it is used sparingly on the source page.
Do keep the canvas at #F4EBE1; surfaces should stay within the detected neutral ramp.
Do stick to the detected font weight(s): 400, 500, 600, 700.
Do align spacing to the 8px base unit derived from the page.

Don't

Don't introduce colors outside the detected palette — every hue above was found in the source.
Don't add gradients — the source page uses flat fills exclusively.

Design Tokens (copy-paste)

:root {
  --color-background: #F4EBE1;
  --color-primary: #F91814;
  --color-accent: #40220D;
  --color-surface: #F4EBE1;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #2C1608;
  --color-border: #F4EBE1;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --font-sans: 'Inter';
  --font-size-display: 72px;
  --font-size-headline-lg: 36px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --tracking-display: -0.025em;
  --container-max: 1280px;
}