Stage 1: Design System | Unit 24

UNIT 1 / 7

STEP 1

Food Sovereignty and Native Restaurants

Native-owned restaurants are more than just businesses; they are acts of cultural reclamation. By centering Indigenous ingredients, traditional techniques, and the stories of their communities, Native chefs reconnect people to land-based knowledge that colonization disrupted.

This unit builds a website for Manoomin Kitchen, a fictional Ojibwe-owned restaurant on Leech Lake land in Minnesota. Manoomin means "wild rice" in Ojibwe, and wild rice is central to Ojibwe identity, economy, and ceremony. Before writing code, read about the people who are making this work real:

Native Ag & Food Systems Initiative Intertribal Agriculture Council First Nations Development Institute

This site uses a deep smoke-and-ember palette: dark charcoal backgrounds, warm orange-red accents, and gold highlights. The fonts are Cormorant Garamond (an elegant serif used in upscale restaurants and editorial design) and Lato (clean, readable body text).

STEP 2

Add the HTML Shell and Google Fonts

Start with the full HTML structure. Inside <head>, add the Google Fonts link:

👉 Add inside <head>: <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;700&display=swap">

Cormorant Garamond comes in both regular and italic. The italic version will be used for the hero headline's decorative word. Lato's weight 300 gives the tagline a light, refined look.

STEP 3

Add the Design System CSS

Add a <style> block with the full design system: variables, reset, and base body styles:

👉 Add inside <head>: <style>
  :root {
    --smoke: #16100c;
    --cedar: #3d1f0d;
    --ember: #c4511a;
    --gold: #d4a02a;
    --cream: #f5f0e6;
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Lato', sans-serif;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: var(--smoke); color: var(--cream); font-family: var(--font-body); }
  .container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
</style>

--smoke: #16100c, an almost-black with warm undertones. It reads as dark charcoal rather than cold black, which suits a restaurant with warmth and character.
--cedar: #3d1f0d, a deep cedar brown used for section backgrounds and gradients. It adds depth without feeling flat.
--ember: #c4511a, a burnt orange that feels like firelight. This is the site's primary accent color.
--gold: #d4a02a, harvest gold for labels, eyebrow text, and highlights.
--cream: #f5f0e6, a warm off-white body text color that's easier on the eyes than pure white against a dark background.

STEP 4

Build the Hero Section

Add the hero CSS (still inside the <style> block), then add the hero HTML inside <body>:

👉 Add hero CSS: #hero {
  min-height: 100vh;
  background: linear-gradient(160deg, #2a1208 0%, var(--smoke) 60%);
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
}
.hero-eyebrow { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
#hero h1 { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; line-height: 1.05; margin-bottom: 24px; }
#hero h1 em { color: var(--ember); font-style: italic; }
.hero-tagline { font-family: var(--font-display); font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 300; color: rgba(245,240,230,0.7); margin-bottom: 40px; }
.hero-cta { display: inline-block; background: var(--ember); color: white; text-decoration: none; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 16px 40px; border-radius: 4px; }

👉 Add hero HTML inside <body>: <section id="hero">
  <div class="container">
    <p class="hero-eyebrow">Leech Lake Band of Ojibwe · Mille Lacs, MN</p>
    <h1>Rooted in<br>the <em>wild.</em></h1>
    <p class="hero-tagline">Native-grown ingredients. Traditional techniques. Modern table.</p>
    <a href="#menu" class="hero-cta">View the Menu</a>
  </div>
</section>

min-height: 100vh, makes the hero at least as tall as the full browser window. 100vh means "100% of the viewport height."
display: flex; align-items: center, vertically centers the content inside the hero. Without this, content would sit at the top.
clamp(3rem, 8vw, 6rem), the headline scales with the screen: minimum 3rem, fluid at 8% of viewport width, maximum 6rem. No media queries needed.
<em>wild.</em>, the semantic "emphasis" tag is used here as a CSS target to make one word italic and ember-colored, adding personality to the headline.

Stage 1 Complete

You have a full design system with 5 color variables and 2 font variables, plus a full-screen hero with a bold headline, tagline, and CTA button.

Next: Stage 2 adds the menu section with 12 items organized into 4 categories using data attributes.

Code Editor

Live Preview