PoleDanceApp/dancechamp-claude-code/docs/DESIGN-SYSTEM.md

DanceChamp — Design System

Theme: Dark Luxury

The app has a premium dark aesthetic. Think high-end dance competition branding — elegant, minimal, confident.

---

Colors

Core Palette

Background:    #08070D    (near-black with slight purple)
Card:          #12111A    (elevated surface)
Card Hover:    #1A1926    (pressed/active state)
Border:        #1F1E2E    (subtle separator)
Text Primary:  #F2F0FA    (off-white)
Text Dim:      #5E5C72    (labels, placeholders)
Text Mid:      #8F8DA6    (secondary info)

Accent Colors

Pink (Primary):   #D4145A    ← Member app + Org app default
Purple:           #7C3AED    ← Secondary accent (styles, alt champ branding)
Indigo:           #6366F1    ← Admin panel accent

Semantic Colors

Green:     #10B981    (success, passed, active, confirmed)
Yellow:    #F59E0B    (warning, pending, draft)
Red:       #EF4444    (error, failed, blocked, danger)
Blue:      #60A5FA    (info, links, video)
Orange:    #F97316    (warned status, awaiting review)

Transparent Variants

Each semantic color has a 10% opacity background:

Green Soft:    rgba(16,185,129,0.10)
Yellow Soft:   rgba(245,158,11,0.10)
Red Soft:      rgba(239,68,68,0.10)
Blue Soft:     rgba(96,165,250,0.10)
Purple Soft:   rgba(139,92,246,0.10)

For accent overlays use 15% opacity: ${color}15 For accent borders use 30% opacity: ${color}30

Per-Championship Branding

Each championship can have its own accent color:

• Zero Gravity: #D4145A (pink)
• Pole Star: #7C3AED (purple)

This color is used for the championship's tab highlights, buttons, and member tags.

---

Typography

Font Stack

Display:   'Playfair Display', Georgia, serif     ← Headings, numbers, titles
Body:      'DM Sans', 'Segoe UI', sans-serif      ← Body text, labels, buttons
Mono:      'JetBrains Mono', monospace             ← Badges, timestamps, codes, small labels

Sizes & Usage

Screen title:     Playfair Display, 20px, 700 weight
Section title:    Playfair Display, 14px, 700 weight, Text Mid color
Card title:       DM Sans, 14-16px, 600 weight
Body text:        DM Sans, 12-13px, 400 weight
Small label:      JetBrains Mono, 9-10px, 500 weight, uppercase, letter-spacing 0.3-0.5
Badge:            JetBrains Mono, 8px, 700 weight, uppercase, letter-spacing 0.8
Stat number:      Playfair Display, 16-20px, 700 weight

---

Components

Card

Background:    #12111A
Border:        1px solid #1F1E2E
Border Radius: 14px
Padding:       16px

Status Badge

Small pill with semantic color + soft background.

Font:          JetBrains Mono, 8px, 700 weight, uppercase
Padding:       3px 8px
Border Radius: 4px

Status mappings:

Status	Label	Color	Background
active / live	ACTIVE / LIVE	Green	Green Soft
pending	PENDING	Yellow	Yellow Soft
pending_approval	AWAITING REVIEW	Orange	Orange Soft
draft	DRAFT	Dim	Dim 15%
blocked	BLOCKED	Red	Red Soft
warned	WARNED	Orange	Orange Soft
passed	PASSED	Green	Green Soft
failed	FAILED	Red	Red Soft

Tab Bar (in-screen tabs, not bottom nav)

Container:     horizontal scroll, no scrollbar, gap 3px
Tab:           JetBrains Mono, 9px, 600 weight
Active:        accent color text, accent 15% bg, accent 30% border
Inactive:      Dim color text, transparent bg
Border Radius: 16px (pill shape)
Padding:       5px 10px

Configurable tabs have a status dot (6px circle):

• Green dot = section configured ✓
• Yellow dot = section pending

Input Field

Background:    #08070D (same as page bg)
Border:        1px solid #1F1E2E
Border Radius: 10px
Padding:       10px 12px
Font:          DM Sans, 13px
Label:         JetBrains Mono, 9px, uppercase, Dim color, 6px margin bottom

Action Button

Two variants:

• Filled: solid background, white text (for primary actions)
• Outline: transparent bg, colored border 30%, colored text (for secondary/danger)

Padding:       8px 14px
Border Radius: 8px
Font:          DM Sans, 11px, 700 weight

Tag Editor

For lists of editable items (rules, levels, styles):

Tag:           DM Sans 11px, colored bg 10%, colored border 25%, 4px 10px padding, 16px radius
Remove (×):    10px, Dim color
Add input:     same as Input Field but smaller (8px 12px, 12px font)
Add button:    colored bg, white "+" text, 8px 14px

Header

Padding:       14px 20px 6px
Title:         Playfair Display, 20px, 700
Subtitle:      DM Sans, 11px, Dim color
Back button:   32×32px, Card bg, Border, 8px radius, "←" centered

Bottom Navigation

Border top:    1px solid #1F1E2E
Padding:       10px 0 8px
Items:         flex, space-around
Icon:          18px emoji
Label:         JetBrains Mono, 8px, letter-spacing 0.3
Active:        opacity 1
Inactive:      opacity 0.35

---

Patterns

Progress/Setup Checklist

For configurable tabs on org side:

Each row:
  [Checkbox 22×22] [Label capitalize] [Configure › or ✓]

Checkbox:      6px radius, 2px border
  Done:        Green border, Green Soft bg, "✓" inside
  Pending:     Yellow border, transparent bg

Label done:    Dim color, line-through
Label pending: Text Primary, clickable → navigates to tab

Readiness Bar (dashboard cards)

Track:         4px height, Border color bg, 2px radius
Fill:          accent color, width = (done/total * 100)%
Below:         list of section names with ✓ (green) or ○ (yellow)

Member Card

Container:     Card style, 12px padding
Name:          DM Sans 13px, 600 weight
Instagram:     JetBrains Mono 10px, accent color
Tags:          DM Sans 9px, Mid color, Mid 10% bg, 2px 7px padding, 10px radius
Status badge:  top-right corner

Stat Box

Container:     Card style, 10px 6px padding, centered
Number:        Playfair Display, 16-20px, 700 weight, semantic color
Label:         JetBrains Mono, 7px, uppercase, Dim color

---

Phone Frame (for prototypes)

Width:         375px
Height:        740px
Border Radius: 36px
Border:        1.5px solid #1F1E2E
Shadow:        0 0 80px rgba(accent, 0.06), 0 20px 40px rgba(0,0,0,0.5)

Status bar:    8px 24px padding
  Time:        JetBrains Mono 11px, Dim
  Notch:       100×28px black, 14px radius
  Indicators:  "●●●" JetBrains Mono 11px, Dim

---

React Native Adaptation

The prototypes use inline styles. For React Native:

Prototype	React Native
div	View
span, p, h1	Text
input	TextInput
onClick	onPress (via Pressable or TouchableOpacity)
overflow: auto	ScrollView or FlatList
cursor: pointer	Not needed
border: 1px solid	borderWidth: 1, borderColor:
fontFamily: 'DM Sans'	Loaded via expo-font
gap	Use marginBottom on children (gap not fully supported)
overflowX: auto with scrollbar hidden	ScrollView horizontal showsHorizontalScrollIndicator={false}

Fonts Loading (Expo)

import { useFonts } from 'expo-font';
import { PlayfairDisplay_700Bold } from '@expo-google-fonts/playfair-display';
import { DMSans_400Regular, DMSans_500Medium, DMSans_600SemiBold } from '@expo-google-fonts/dm-sans';
import { JetBrainsMono_400Regular, JetBrainsMono_500Medium, JetBrainsMono_700Bold } from '@expo-google-fonts/jetbrains-mono';