Internal reference

Brewspace Design System

Every primitive that powers the site, with usage examples. Built so new pages stay visually consistent without copy-pasting Tailwind.

Tokens

Colors

Defined in src/styles/global.css as Tailwind v4 theme variables.

primary

#f45c48

primary-dark

#e85a3a

dark

#222525

light-gray

#454b4b

cream

#f5f4f0

gray-light

#f9f8f5

gray

#6b7280

white

#ffffff

Tokens

Typography

SectionHeader size="xl" / h1

The quick brown fox

SectionHeader size="lg" / h2

The quick brown fox

SectionHeader size="md" / h2

The quick brown fox

h3

The quick brown fox

Prose size="xl"

The quick brown fox jumps over the lazy dog. Specialty coffee shops save 6+ hours weekly with Brewspace.

Prose size="lg"

The quick brown fox jumps over the lazy dog.

Eyebrow

Section eyebrow text

Primitives

Buttons

5 variants × 3 sizes. Renders <a> when href is given, <button> otherwise.

variant="primary"

variant="secondary"

variant="ghost"

variant="white" (on primary background)

variant="link"

Learn more →

ButtonGroup

Start free trial Book a demo

Primitives

Cards

tone="cream" (default)

Default card

Used for grouped content on white backgrounds.

tone="white" border="subtle"

White with border

Used when card is on a cream background.

tone="primary-soft" border="primary-left"

Accent card

Verdicts, callouts, key insights.

tone="primary"

Primary card

Stats sections, CTA blocks.

Primitives

Icon boxes

Sizes

Tones

Shapes

Primitives

Stats

tone="white" — used inside primary-bg sections

6+
Hours saved each week
40%
Faster team onboarding
3x
More consistent quality
100%
Location alignment

tone="primary" — used on light backgrounds

6+
Hours saved each week
40%
Faster team onboarding
3x
More consistent quality
100%
Location alignment

Hero patterns

Eyebrow badge & trust indicators

EyebrowBadge (animated pill — hero sections only)

The operating system for modern coffee shops

TrustIndicators (default)

No credit card required
Setup in under 5 minutes
Works on Web, iOS & Android

TrustIndicators (custom items)

Free — no signup required
Available immediately in your browser
Share the link with your team

Layout

Section padding & background

Section provides vertical rhythm. Pair with Container for max-width + horizontal padding.

<Section padding="sm" /> — py-8 md:py-12 — small content blocks

<Section padding="md" /> — py-12 md:py-16

<Section padding="lg" /> — py-16 md:py-20 — most marketing sections (default)

<Section padding="xl" /> — py-20 md:py-28 — hero sections

<Section background="white" /> — alternate section

<Section background="cream" /> — secondary content

<Section background="primary" /> — stats/CTA

<Section background="primary-soft" /> — accents

Usage

Composing a section

A typical content section uses Section → Container → SectionHeader → content cards. 

<Section padding="lg" background="white">
  <Container>
    <SectionHeader
      eyebrow="The fix"
      headline="How Brewspace helps"
      align="center"
    />
    <div class="grid md:grid-cols-2 gap-6">
      <Card tone="cream">
        <h3 class="text-lg font-semibold text-dark mb-2">
          Digital checklists
        </h3>
        <Prose size="base">
          Tappable mobile checklists with real-time
          compliance tracking.
        </Prose>
      </Card>
      <!-- ... more cards -->
    </div>
  </Container>
</Section>