BBS Gallery

UI ShowcaseUI Showcase & Dev Audit

BBS Gallery Component System

Design tokens, shadcn/Radix primitives, responsive behaviors, and states audit. Designed at 360px first with strict accessibility and calm aesthetics.

Actions

1. Theme & Design Tokens

Black and gold shield palette, calm whitespaces, and 8 distinct colour-blind friendly selector colors.

Gold Palette (Primary & Accents)

gold-50#FFF8E8

gold-100#FDEBC0

gold-200#F8D77E

gold-400#E3A21A

gold-500 ★#D4920A

gold-600#B87A06

gold-700#8F5E05

Ink Typography & Surfaces

ink-900 (Main text)#14110B

ink-700 (Secondary)#3A352B

ink-500 (Muted)#6B6558

bg (#FAF8F4)surface (#FFFFFF)

Selector Palette (8 Colour-Blind Friendly Tones)

#D4920A

#3B6FD4

#2E8B57

#C2410C

#7C3AED

#DB2777

#0E7490

#4D7C0F

2. Buttons & Icon Buttons

Primary (gold-500 with ink-900 text, never white text on gold), Secondary, Dark CTA, Ghost, Destructive. Scale 0.97 press.

Button Variants

Button Sizes & Icons

Icon Buttons (Touch Targets ≥ 44px)

CopyButton (Icon Morph & Toast)

3. Form Inputs & Controls

All form elements feature 44px minimum touch targets, 2px gold focus ring with 2px offset, and humanized inline validation messages.

Studio Name

Your photography brand name shown to clients

Client Email

Please enter a valid email address

Studio Password

Use at least 8 characters with numbers and symbols

Max Selections for Album

Client can choose up to this many photos

Studio Subscription Plan

Manage your proofing capacity

Wedding / Event Date

Used to order timeline galleries

Gallery Notes & Instructions

Special instructions visible to the couple

50/250

Allow Client Full-Resolution RAW DownloadsWhen enabled, client can download original print-ready assets with PIN.

Watermark Unselected ProofsApplies a subtle semi-transparent studio shield watermark until picked.

4. Chips, Status Badges & Underline Tabs

Draft (grey), Shared (blue), Picking (gold), Expired (red). Underline tabs with smooth active transitions.

Status Chips

DraftSharedClient PickingExpired

Filter & Category Chips

Underline Tabs

Showing all active client galleries across weddings, editorial, and milestones.

5. Usage Meter, Progress Bars & Avatars

Usage meter with warning tints, smooth percentage indicators, and fallback avatars.

Studio Storage14.2 / 20 GB

71% used

Active Galleries4 / 5 galleries

80% used

Progress Bar Variants

Progress45%

Progress84%

Progress92%

Progress100%

Avatar Sizes & Statuses

6. System Banners & Interactive Toasts

Info, warning, and offline banners. Toasts appear at top-right on desktop and above bottom bar on mobile.

Studio Tip

Clients pick 3x faster when you enable color-tag filtering.

Gallery expiring soon

3 client galleries will reach their deadline within the next 48 hours.

You are currently offline

Changes will sync automatically once your studio connection is restored.

Trigger Toast Notifications

7. Loading Skeletons & Empty States

Every list in BBS Gallery is equipped with a smooth shimmer skeleton and a clear, actionable empty state.

Gallery Card Skeleton

No galleries yet

Create your first client gallery to start sharing proofs and collecting selections in seconds.

8. Modals, Sheets & Typed Confirm Dialogs

Desktop centered, mobile bottom sheet with drag handle. Typed confirmation ensures critical deletions are never accidental.