Stage 1: Foundation | Unit 23

STEP 1

Native Business and Economic Sovereignty

Native-owned businesses are one of the most direct expressions of Tribal sovereignty. When Tribal members build businesses, they strengthen their nation's economy, keep wealth in the community, and create jobs that do not require leaving home.

This unit builds a directory website — a searchable, filterable showcase of Indigenous-owned businesses. Before you write any code, read about the landscape of Native entrepreneurship:

NCAI — Economic Development First Nations Development Institute MBDA — Native American Programs

This site uses a pine and sage color palette — deep forest greens that feel grounded, paired with warm amber accents. The fonts are DM Serif Display (editorial headlines) and DM Sans (clean, legible body text).

STEP 2

Add the Google Fonts Link

Inside <head>, add these two links:

👉 Add inside <head>: <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500;600;700&display=swap">

DM Serif Display is a high-contrast editorial font — the kind you see in magazines and serious publications. DM Sans is its clean, modern companion. Together they signal credibility and care.

STEP 3

Add the Design System CSS

Add a <style> block in <head> with the design system:

👉 Add inside <head>: <style>
  :root {
    --pine: #1b2e1b;
    --sage: #4a7c59;
    --amber: #c97b2a;
    --cream: #f8f4ee;
    --warm: #3d2b0a;
    --font-display: 'DM Serif Display', serif;
    --font-body: 'DM Sans', sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: var(--font-body); background: var(--cream); color: var(--pine); }
  .container { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
  .section-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sage); margin-bottom: 8px; }
  .section-heading { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 40px; color: var(--pine); }
</style>

STEP 4

Add the Hero CSS

Add this after the base CSS (still inside the same <style> block):

👉 Add hero CSS: #hero { background: var(--pine); color: white; padding: 80px 0 60px; }
.hero-tag { display: inline-block; background: rgba(255,255,255,0.12); border-radius: 100px; padding: 6px 16px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 20px; }
#hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.1; margin-bottom: 16px; }
#hero h1 em { color: #a4c9a9; font-style: normal; }
#hero p { font-size: 1.125rem; line-height: 1.7; color: rgba(255,255,255,0.8); max-width: 620px; margin-bottom: 32px; }
.hero-stats { display: flex; gap: 32px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 24px; margin-top: 12px; }
.hero-stat { font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.4; }
.hero-stat strong { color: white; display: block; font-size: 1.125rem; }

The em inside the h1 gets a lighter sage-green color — not italic. This is a design trick: <em> is a semantic tag for emphasis, but you can override its default italic style with CSS to use it purely as a color target.

STEP 5

Add the Hero HTML

After the </head>, add:

👉 Add in <body>: <section id="hero">
  <div class="container">
    <div class="hero-tag">Indigenous Business Directory</div>
    <h1>Native-Owned Businesses
<em>Rooted in Community</em></h1>
    <p>A directory of Indigenous-owned businesses from across Minnesota and the Great Lakes region. Search by name, filter by category, and discover the entrepreneurs building Native economic sovereignty today.</p>
    <div class="hero-stats">
      <div class="hero-stat"><strong>12 Businesses</strong>Featured this season</div>
      <div class="hero-stat"><strong>6 Categories</strong>Food, Art, Health & more</div>
      <div class="hero-stat"><strong>Minnesota Focus</strong>11 Tribal nations</div>
    </div>
  </div>
</section>

Stage 1 Complete

Your directory has a foundation: design system variables, editorial fonts, and a hero section with a stat bar. The pine background, cream body color, and serif headlines signal a credible, publication-quality site.

Next: Stage 2 builds the business card grid — the core of the directory.