Grand Diomande Research · Full HTML Reader

BWB — UI System

BWB uses a cohesive SwiftUI design system with a coffee-inspired color palette, consistent typography, and shared components across all three apps.

Business Systems architecture technical paper candidate score 28 .md

Full Public Reader

BWB — UI System

Document ID: BWB-ARCH-004
Version: 1.0.0
Last Updated: 2026-01-16

---

Overview

BWB uses a cohesive SwiftUI design system with a coffee-inspired color palette, consistent typography, and shared components across all three apps.

---

Design Philosophy

> "Coffee + Dance + Music = An experience, not just a transaction"

The UI reflects this through:
- Warm, inviting colors (coffee browns, cream whites)
- Energetic accent colors (gold highlights, beat orange)
- Smooth animations and transitions
- Touch-friendly targets for all contexts

---

Color System

### Coffee Palette (Primary)
Warm browns representing coffee richness

Token	Hex	Usage
coffee_50	#FDF8F6	Lightest background
coffee_100	#F8EDE8	Light surface
coffee_200	#EFDCD3	Subtle accents
coffee_300	#E3C5B5	Borders
coffee_400	#D4A68A	Disabled states
coffee_500	#C08A63	Secondary text
coffee_600	#A46D46	Primary actions
coffee_700	#7D5234	Active states
coffee_800	#5C3A24	Dark elements
coffee_900	#2A1B17	Darkest (text)

### Cream Palette (Background)
Light off-whites for backgrounds

Token	Hex	Usage
cream_50	#FFFBF7	Primary background
cream_100	#FFF5ED	Card backgrounds
cream_200	#FFEDE0	Elevated surfaces
cream_500	#E6C9A8	Muted elements
cream_900	#A87D4F	Deep contrast

### Vinyl Palette (Text)
Grays for text hierarchy

Token	Hex	Usage
vinyl_50	#F5F5F5	Disabled text
vinyl_100	#E0E0E0	Placeholder
vinyl_400	#9E9E9E	Secondary text
vinyl_600	#616161	Body text
vinyl_800	#303030	Primary text
vinyl_900	#0D0D0D	Headlines

### Gold Palette (Accent)
Highlights and CTAs

Token	Hex	Usage
gold_300	#FCD34D	Highlights
gold_400	#FBBF24	Primary CTA
gold_500	#F59E0B	Hover state
gold_700	#B45309	Active state

Semantic Colors

Name	Color	Usage
beat	#FF6B35 (Orange)	Energy moments, DJ elements
success	Green	Confirmations
warning	Amber	Cautions
error	Red	Errors
info	Blue	Information

---

Typography

Font Families

Family	Usage
Inter	Primary UI text (body, labels, captions)
Outfit	Decorative/display text (headlines, features)

Type Scale

Display (Large Headlines)
| Style | Size | Weight | Font |
|-------|------|--------|------|
| displayLarge | 57 | Bold | Inter |
| displayMedium | 45 | SemiBold | Inter |
| displaySmall | 36 | SemiBold | Inter |

Headline
| Style | Size | Weight | Font |
|-------|------|--------|------|
| headlineLarge | 32 | Bold | Inter |
| headlineMedium | 28 | SemiBold | Inter |
| headlineSmall | 24 | SemiBold | Inter |

Title
| Style | Size | Weight | Font |
|-------|------|--------|------|
| titleLarge | 22 | SemiBold | Inter |
| titleMedium | 20 | Medium | Inter |
| titleSmall | 18 | Medium | Inter |

Body
| Style | Size | Weight | Font |
|-------|------|--------|------|
| bodyLarge | 16 | Regular | Inter |
| bodyMedium | 14 | Regular | Inter |
| bodySmall | 12 | Regular | Inter |

Label
| Style | Size | Weight | Font |
|-------|------|--------|------|
| labelLarge | 14 | Medium | Inter |
| labelMedium | 12 | Medium | Inter |
| labelSmall | 11 | Medium | Inter |

Decorative (Outfit)
| Style | Size | Weight | Font |
|-------|------|--------|------|
| decorativeLarge | 24 | Bold | Outfit |
| decorativeMedium | 20 | SemiBold | Outfit |
| decorativeSmall | 16 | Medium | Outfit |

---

Spacing System

Based on 4px grid

Token	Value	Usage
xxs	4	Tight spacing
xs	8	Related elements
sm	12	Component padding
md	16	Section spacing
lg	24	Card padding
xl	32	Screen margins
xxl	48	Large gaps

---

Shared Components

BWBButton

Primary interactive element

swift

BWBButton(
    title: "Add to Cart",
    style: .primary,  // .primary, .secondary, .ghost
    size: .medium,    // .small, .medium, .large
    isLoading: false,
    action: { }
)

Style	Background	Text
primary	gold_400	white
secondary	coffee_100	coffee_700
ghost	transparent	coffee_600

BWBCard

Surface container

swift

BWBCard(padding: .md) {
    // Content
}

Cream background
Subtle shadow
Rounded corners (12px)

BWBTextField

Text input

swift

BWBTextField(
    label: "Email",
    text: $email,
    placeholder: "Enter your email",
    keyboardType: .emailAddress
)

Coffee border on focus
Error state styling
Label animation

LoadingOverlay

Full-screen loader

swift

LoadingOverlay(
    isPresented: $isLoading,
    message: "Processing order..."
)

Blurred background
Spinner + message
Prevents interaction

ErrorView

Error display

swift

ErrorView(
    title: "Something went wrong",
    message: error.localizedDescription,
    retryAction: { }
)

---

App-Specific Patterns

BWB-Customer

Tab Bar:
- 5 tabs with icons
- Active: gold_400
- Inactive: vinyl_400
- Safe area aware

Menu Grid:
- 2 columns on iPhone
- 3 columns on iPad
- Card-based items
- Lazy loading

BWB-POS (iPad)

Sidebar Navigation:
- Persistent sidebar
- Icon + label
- Section grouping
- Quick access

Queue Kanban:
- Horizontal columns
- Drag-and-drop cards
- Status colors
- Real-time updates

Touch Targets:
- Minimum 44x44pt
- Larger for frequent actions
- Clear active states

---

Animation Guidelines

### Transitions
- Duration: 0.2-0.3s
- Easing: easeInOut
- Spring for interactive

### Loading States
- Skeleton screens
- Shimmer effect
- Progress indicators

### Feedback
- Haptic on actions
- Visual confirmation
- Error shake

---

Accessibility

### Contrast
- All text meets WCAG AA
- Critical elements meet AAA

### Dynamic Type
- Supports all text sizes
- Layout adapts

### VoiceOver
- All elements labeled
- Logical grouping
- Action hints

### Reduce Motion
- Respects system setting
- Fallback to fades

---

Dark Mode Support

Light	Dark
cream_50 background	coffee_900
vinyl_800 text	cream_100
coffee_100 cards	coffee_800

Note: BWB currently focuses on light mode for the warm coffee aesthetic.

---

File Structure

BWBCore/Sources/BWBCore/Theme/
├── BWBColors.swift      # Color definitions
├── BWBTypography.swift  # Font styles
├── BWBSpacing.swift     # Spacing scale
└── BWBComponents/       # Shared components
    ├── BWBButton.swift
    ├── BWBCard.swift
    ├── BWBTextField.swift
    ├── LoadingOverlay.swift
    └── ErrorView.swift

---

Change Log

Version	Date	Changes
1.0.0	2026-01-16	Initial creation

Promotion Decision

Promote into a technical note or architecture paper with implementation anchors.

Source Anchor

spine/BWB/architecture/UI_SYSTEM.md

Detected Structure

Code Anchors · Architecture