Design System

Centralized design tokens, colors, typography, and component styles for SMBPulse

Colors

Primary Blue

#075895

Main brand color for primary actions and accents

Secondary Blue

#109FE0

Secondary brand color for highlights and links

Accent Orange

#FE8F0D

Primary button color and call-to-action elements

Background Dark

#060917

Main background color for pages and sections

Card Background

#131313

Background for cards and elevated components

White - Primary Text

Gray-300 - Secondary Text

Gray-400 - Muted Text

Typography

Font Family

Primary: Geist Sans (via app/layout.tsx)

Fallback: system-ui, sans-serif

Note: Biennale font is defined in app/globals.css

Headings

Heading 1

text-5xl lg:text-7xl font-bold

Heading 2

text-3xl md:text-4xl font-bold

Heading 3

text-2xl font-bold

Heading 4

text-xl font-semibold

Body Text

Large Body Text (text-xl)

Used for hero descriptions and important paragraphs

Regular Body Text (text-lg)

Standard paragraph text

Small Body Text (text-base)

Secondary information and captions

Extra Small Text (text-sm)

Labels, metadata, and fine print

Font Weights

Normal (400) - font-normal

Medium (500) - font-medium

Semibold (600) - font-semibold

Bold (700) - font-bold

Extrabold (800) - font-extrabold

Buttons

Primary Button (Large)

Primary Button

Classes:

inline-flex items-center justify-center bg-[#FE8F0D] text-white px-8 py-4 rounded-lg font-semibold hover:bg-[#FE8F0D]/90 transition-all duration-300 hover:shadow-lg hover:shadow-[#FE8F0D]/50

Usage: Main call-to-action buttons in hero sections

This is the standard primary button style used throughout the site

Secondary Button (Outlined)

Secondary Button

Classes:

inline-flex items-center justify-center border-2 border-[#FE8F0D] text-[#FE8F0D] px-8 py-4 rounded-lg font-semibold hover:bg-[#FE8F0D]/10 transition-all duration-300

Usage: Secondary actions and outlined buttons

This is the standard secondary button style used throughout the site

Other Variants

Spacing & Layout

Container

Max Width: max-w-7xl (1280px) for hero sections

Max Width: max-w-6xl (1152px) for content sections

Max Width: max-w-4xl (896px) for centered content

Padding: px-4 lg:px-8 (16px mobile, 32px desktop)

Section Spacing

Hero Sections: pt-32 pb-20 (128px top, 80px bottom)

Content Sections: py-20 (80px vertical)

Large Sections: py-24 lg:py-32 (96px/128px vertical)

Grid Gaps

Small: gap-4 (16px)

Medium: gap-6 lg:gap-8 (24px/32px)

Large: gap-8 (32px)

Component Styles

Cards

Card Example

Card background with gradient and border

bg-gradient-to-b from-[#131313] to-[#191a1d] rounded-xl ring-1 ring-white/10

Border Radius

sm
md
lg
xl
2xl

Usage Guidelines

Color Usage

  • • Primary Blue (#075895): Use for primary brand elements and important UI components
  • • Secondary Blue (#109FE0): Use for links, highlights, and secondary accents
  • • Accent Orange (#FE8F0D): Use for all buttons, CTAs, and interactive elements
  • • Background (#060917): Main page background color
  • • Card Background (#131313): For elevated components and cards

Typography Usage

  • • Use Geist Sans as the primary font family (loaded via app/layout.tsx)
  • • Headings should use bold or extrabold weights for emphasis
  • • Body text should use normal weight (400) for readability
  • • Maintain consistent line-height ratios (1.2-1.5 for headings, 1.5-1.75 for body)

Button Usage

  • • Always use variant="primary" for main CTAs
  • • Use variant="secondary" for secondary actions
  • • Buttons should include hover states with shadow effects
  • • Use appropriate sizes: lg for hero sections, default for forms, sm for compact spaces