Beta — Features may not work as expected.
Brand Guidelines

Design System

A comprehensive guide to maintaining visual consistency across East Bay Founders. Use this as a QA reference for all design decisions.

Color System

Brand Colors (Semantic Tokens Only)

Always use semantic color tokens. Never hardcode hex values like #1A3D2F or #C9A227.

Primary

bg-primary

Secondary

bg-secondary

Accent (Gold)

bg-accent

Muted

bg-muted

Card

bg-card

Background

bg-background

Section Background Patterns

Default:bg-background
Alternating:bg-muted/50
CTA/Footer:bg-primary

Typography

Page Title (h1)

Title with Highlight

Section Title (h2)

Section Heading

Card Title (h3)

Card Heading

Body Text

Regular paragraph text uses text-muted-foreground for comfortable reading.

Layout & Spacing Standards

Page Structure
Page top padding:pt-24 pb-16
Container max width:max-w-7xl
Container padding:px-4 sm:px-6 lg:px-8
Section Spacing
Standard section:py-12 lg:py-16
CTA section:py-12 lg:py-16
Card grid gap:gap-6 lg:gap-8

Component Patterns

Buttons

Badges

DefaultSecondaryOutlineHero BadgeGold Accent

Icon Containers

sm primary

md primary

lg primary

md accent

Cards

Card with Icon
Standard card pattern

Card content goes here with text-muted-foreground.

Centered Card

For feature highlights

CTA Card

Dark card for call-to-actions

QA Checklist

Colors

  • No hardcoded hex colors (e.g., #1A3D2F)
  • Using semantic tokens: primary, secondary, accent, muted
  • Section backgrounds alternate: bg-background, bg-muted/50
  • CTA sections use bg-primary with text-primary-foreground

Spacing

  • All pages use pt-24 pb-16 for main content
  • Sections use py-12 lg:py-16 consistently
  • Card grids use gap-6 lg:gap-8
  • Container uses px-4 sm:px-6 lg:px-8

Components

  • Using PageHero component for inner page heroes
  • IconContainer for all icon backgrounds
  • Outline buttons include bg-transparent
  • Card, Badge, Button from shadcn/ui

Typography

  • h1: text-4xl font-bold sm:text-5xl
  • h2: text-3xl font-bold sm:text-4xl
  • Title highlights use text-secondary
  • Body text uses text-muted-foreground

Maintaining Consistency

Use this design system as a reference when building new pages or components. Consistency builds trust and strengthens our brand.

Design System | East Bay Founders