BagSignals Style Sheet

Comprehensive brand guidelines and UI component standards for consistent development

Typography

Font Hierarchy

Heading 1

text-3xl font-bold

Heading 2

text-2xl font-bold

Heading 3

text-xl font-semibold

Body Text

text-base

Small Text

text-sm

Font Weights & Spacing

Bold: font-bold

Semibold: font-semibold

Medium: font-medium

Normal: font-normal

Color Palette

Primary Colors

Primary: #3B82F6

Secondary: #8B5CF6

Background Colors

Primary Background

Secondary Background

Tertiary Background

Sidebar Icon Colors

Dashboard: #60A5FA

Launch: #4ADE80

Whitepaper: #FB923C

Profile: #EF4444

AI: #C084FC

Status Colors

Success/Positive

bg-green-500

Error/Negative

bg-red-500

Lucide Icons

Navigation Icons

TrendingUp - Dashboard

Rocket - Launch Token

FileText - Whitepaper

User - Profile

Bot - AI Analytics

Action Icons

Eye - View Chart

MousePointer - Interactive

Palette - Style/Design

Usage Guidelines

• Use consistent sizing: w-4 h-4 for small, w-5 h-5 for medium, w-6 h-6 for large

• Apply semantic colors based on context and functionality

• Maintain visual hierarchy with icon placement and sizing

• Use hover states for interactive icons

Page Header Component

PageHeader Component

Standardized header component for all pages with icon, title, description, and optional badge.

Example Page

Example description text

Beta

<PageHeader 
  icon={<Bot className="w-5 h-5 text-white" />}
  title="Page Title"
  description="Page description"
  badge="Beta"
  badgeColor="from-purple-500 to-purple-600"
/>

Usage Guidelines

• Import from: @/components/shared/PageHeader

• Use consistent gradient backgrounds: purple for AI/analytics, blue for data, green for actions

• Icon size should be w-5 h-5 with white color

• Badge is optional and should indicate status (Beta, New, Pro, etc.)

• Applied to: Profile, Whitepaper, Launch Token, and AI pages

Layout & Spacing

Container Widths

Full Width

max-w-7xl mx-auto

Content Width

max-w-4xl mx-auto

Narrow Width

max-w-2xl mx-auto

Spacing Scale

Small

space-y-2, gap-2 (8px)

Medium

space-y-4, gap-4 (16px)

Large

space-y-6, gap-6 (24px)

Extra Large

space-y-8, gap-8 (32px)

UI Components

Button Styles

bg-accent-primary text-white px-4 py-2 rounded-xl

border border-border-primary px-4 py-2 rounded-xl

Card Styles

Standard Card

Default card styling

border border-border-primary rounded-xl p-4 bg-primary-bg

Interactive Elements

Transitions

Standard

transition-colors

All Properties

transition-all

Opacity

transition-opacity

Border Radius

Standard (All Elements)

rounded-xl (12px)

• All UI elements use consistent rounded-xl (12px) border radius

• Buttons, cards, inputs, modals, and containers all follow this standard

• Creates visual harmony and modern aesthetic across the platform