Unparty Logo

SWATCH

the tool for hexes

theunpartyswatch

Location: unparty-app/theunpartyswatch
Status: Active Development
Primary Purpose: Brand identity and color palette management system

Overview

theunpartyswatch is UNPARTY's centralized color palette and brand identity management tool. It provides an interactive interface for managing, organizing, and exporting color swatches that define the UNPARTY brand aesthetic. The application enables designers and developers to maintain brand consistency across all UNPARTY products by providing a single source of truth for color values and naming conventions.

Tech Stack

  • Framework: Next.js 14 (App Router)
  • Language: TypeScript
  • UI Library: React 18
  • Styling: Tailwind CSS 3.4
  • Icons: Lucide React
  • Platform: Web (Vercel-ready)
  • Build Tool: Next.js Build System

Key Features

Core Functionality

  • Color Library Management: Pre-defined UNPARTY brand colors with semantic naming
  • Dynamic Color Addition: Add custom colors with name and hex code on the fly
  • Palette Builder: Create up to 5-color palettes from the available color library
  • Interactive Swatch Selection: Click-to-add color selection system
  • Color Removal: Remove colors from active palette with one-click deletion
  • Real-time Preview: Live color visualization with name and hex display

Brand Colors Collection

The application ships with 20 carefully curated UNPARTY brand colors:

  • Core Identity Colors: unparty (#f9c22e), champion (#E7B12E), unpartypurple (#29284E)
  • Black Variations: pushblack, richblack, cousinblack, pinkyblack, silverblack, purpleblack, pupblack, astroblack, starblack, anotherlove
  • Accent Colors: deepSpace, midnightBlue, electricPurple, neonYellow, softWhite, neonPink, electricBlue

Design System Integration

  • Custom Typography: Gagalin font family for brand headers
  • Responsive Grid Layout: 5-column color grid for desktop, responsive for mobile
  • Dark Mode Optimized: Dark background (#0a0a0a) with high-contrast text
  • Brand Typography: Geist Mono for titles, Nunito for body text

Architecture

Code

Web Application (Next.js 14)
├── Pages (App Router)
│   ├── page.tsx (Home - Color Palette Interface)
│   └── layout.tsx (Root Layout)
├── Components
│   └── ColorPaletteApp.tsx (Main interactive component)
├── Styling
│   ├── globals.css (UNPARTY brand variables)
│   └── tailwind.config.ts (Tailwind configuration)
├── Assets
│   ├── Gagalin-Regular.otf (Brand font)
│   └── Gagalin-Regular.ttf (Brand font fallback)
└── Data
    └── colors_20250728_142116.txt (Color usage analytics)

Component Architecture

Code

ColorPaletteApp (Main Component)
├── State Management
│   ├── colors[] (All available colors)
│   ├── palette[] (Active 5-color palette)
│   ├── newColorName (Form input)
│   └── newColorHex (Form input)
├── UI Sections
│   ├── Add New Color Form
│   ├── Active Palette Display (max 5 colors)
│   └── All Colors Grid (clickable swatches)
└── Interactions
    ├── addColor() (Add to library)
    ├── addToPalette() (Add to active palette)
    └── removeFromPalette() (Remove from palette)

Getting Started

Prerequisites

  • Node.js 20+ or compatible runtime
  • npm, yarn, pnpm, or bun package manager

Installation

bash

# Clone the repository
git clone https://github.com/unparty-app/theunpartyswatch.git

# Navigate to project directory
cd theunpartyswatch

# Install dependencies
npm install

Development

bash

# Start development server
npm run dev

# Open browser to http://localhost:3000

Production Build

bash

# Create optimized production build
npm run build

# Start production server
npm start

Linting

bash

# Run ESLint
npm run lint

Integration Points

Internal UNPARTY Services

  • Color Usage Analytics: Generates color usage reports (colors_20250728_142116.txt)
  • Brand Assets: Sources Gagalin font family from repository root
  • Design System: Exports color values for use across UNPARTY ecosystem

External Services

  • Google Fonts: Geist Mono, Nunito, Flow Rounded, Major Mono Display
  • Vercel: Deployment platform (production-ready)
  • Lucide React: Icon system for UI elements

Potential Integrations

  • theunpartyapp: Export color palettes for web platform themes
  • theunpartyunppp: Share color values for native app styling
  • theunpartycrawler: Analyze color usage across conversation analytics
  • Design Systems: Export to CSS variables, Tailwind config, or JSON

Business Value

ABOUT (Understanding)

theunpartyswatch helps stakeholders understand the UNPARTY brand identity by:

  • Providing visual reference for all approved brand colors
  • Documenting color naming conventions and semantic meaning
  • Showcasing the relationship between color families (blacks, purples, accents)
  • Offering a searchable, organized color library

BUILD (Creation)

theunpartyswatch enables creators to build consistent brand experiences by:

  • Providing hex codes for immediate use in development and design
  • Allowing experimentation with color combinations through palette builder
  • Supporting dynamic color addition for rapid prototyping
  • Exporting color values for integration into design systems and code

CONNECT (Sharing)

theunpartyswatch facilitates connection between team members by:

  • Creating a shared vocabulary for color discussions
  • Enabling designers and developers to reference the same color values
  • Supporting rapid color palette creation for presentations and mockups
  • Providing a single source of truth for brand color decisions

Relationship to Ecosystem

Data Flow

Cross-Repository Dependencies

  • Serves: All UNPARTY repositories requiring brand color values
  • Consumes: None (foundational design system tool)
  • Integrates: Design workflows, development workflows, documentation

Use Cases Across Ecosystem

  1. Web Development (theunpartyapp): Export color palette to CSS variables or Tailwind config
  2. Native Development (theunpartyunppp): Reference hex codes for SwiftUI Color definitions
  3. Documentation (theunpartyrunway): Use color swatches in architecture diagrams and docs
  4. Analytics (theunpartycrawler): Analyze color usage patterns in generated HTML reports

Brand Color Philosophy

Color Families

1. Gold/Yellow (Primary Identity)

  • unparty (#f9c22e) - Primary brand color
  • champion (#E7B12E) - Secondary gold variant

2. Purple/Blue (Secondary Identity)

  • unpartypurple (#29284E) - Core purple
  • midnightBlue (#190061) - Deep contrast
  • electricPurple (#3500D3) - Accent highlight

3. Black Variations (Depth & Sophistication)

  • 10 semantic black variants for nuanced backgrounds and UI elements
  • Range from pure black (#000108) to purple-tinted darks (#6C6BB4)

4. Accent Colors (Energy & Contrast)

  • neonYellow (#FFF700) - High-energy highlights
  • neonPink (#FF00FF) - Vibrant accent
  • electricBlue (#00FFFF) - Cool contrast

Development Guidelines

Adding New Colors

  1. Use the "Add New Color" form in the UI
  2. Provide a semantic name (lowercase, no spaces)
  3. Use 6-digit hex code format (#RRGGBB)
  4. Test color contrast against dark backgrounds

Color Naming Conventions

  • Use descriptive, semantic names (not generic like "color1")
  • Include family suffix for related colors (e.g., "pushblack", "richblack")
  • Avoid abbreviations unless widely understood
  • Keep names lowercase for consistency

Palette Constraints

  • Maximum 5 colors per palette (design constraint)
  • Remove colors before adding new ones if at capacity
  • Consider color contrast and harmony when building palettes

File Structure

Code

theunpartyswatch/
├── public/                    # Static assets
├── src/
│   └── app/
│       ├── components/
│       │   └── ColorPaletteApp.tsx  # Main interactive component
│       ├── favicon.ico
│       ├── globals.css        # UNPARTY brand variables & styles
│       ├── layout.tsx         # Root layout with metadata
│       └── page.tsx           # Home page
├── Gagalin-Regular.otf        # Brand font (OpenType)
├── Gagalin-Regular.ttf        # Brand font (TrueType)
├── colors_20250728_142116.txt # Color usage analytics
├── next.config.mjs            # Next.js configuration
├── package.json               # Dependencies & scripts
├── postcss.config.mjs         # PostCSS configuration
├── tailwind.config.ts         # Tailwind CSS configuration
└── tsconfig.json              # TypeScript configuration

Design Decisions

Why Next.js 14?

  • Server Components for optimal performance
  • App Router for modern routing patterns
  • Built-in TypeScript support
  • Vercel deployment optimization

Why Client-Side State Management?

  • Simple, self-contained application
  • No need for persistent storage (yet)
  • Fast, responsive user interactions
  • Easy to extend with database later

Why 5-Color Palette Limit?

  • Encourages focused, cohesive color schemes
  • Prevents palette bloat and decision fatigue
  • Aligns with design system best practices
  • Supports "less is more" philosophy

Future Enhancements

Short-term

  • Export palette to JSON, CSS variables, or Tailwind config
  • Color search and filtering
  • Color contrast checker (WCAG compliance)
  • Keyboard shortcuts for power users

Medium-term

  • Save and load palettes (localStorage or database)
  • Color harmony suggestions (complementary, analogous, triadic)
  • Import colors from images or URLs
  • Share palettes via URL

Long-term

  • Integration with Figma/Sketch for design handoff
  • AI-powered color palette generation
  • Version control for color system changes
  • Analytics dashboard for color usage across UNPARTY products

Contributing to This Repository

Adding New Brand Colors

  1. Update initialColors array in ColorPaletteApp.tsx
  2. Follow naming conventions (semantic, lowercase)
  3. Test color on dark background
  4. Update this README with new color category if applicable

Modifying Brand Variables

  1. Edit CSS variables in src/app/globals.css
  2. Test changes across all UI states
  3. Update documentation with rationale

Extending Functionality

  1. Maintain TypeScript strict typing
  2. Follow existing component patterns
  3. Test on mobile and desktop viewports
  4. Update README with new features

Color Usage Analytics

The repository includes colors_20250728_142116.txt, which tracks color usage across the project:

  • Most used colors: #000000 (44 times), #ffffff (24 times)
  • UNPARTY brand colors frequency
  • Hex code variations (3-digit vs 6-digit)

This file can be regenerated to track color adoption and identify unused or redundant colors.

Security & Privacy

Data Handling

  • No user data collection
  • No external API calls (except Google Fonts)
  • No cookies or localStorage (currently)
  • Client-side only application

Brand Asset Protection

  • Gagalin font files are proprietary UNPARTY assets
  • Color names and values are UNPARTY intellectual property
  • Use within UNPARTY ecosystem only unless explicitly licensed

Deployment

Vercel (Recommended)

bash

# Install Vercel CLI
npm i -g vercel

# Deploy to Vercel
vercel

Docker (Alternative)

dockerfile

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "start"]

Troubleshooting

Build Fails with Font Error

  • Check internet connection for Google Fonts
  • Verify Gagalin font files are in repository root
  • Try clearing .next cache: rm -rf .next

Colors Not Displaying

  • Check CSS variables in globals.css
  • Verify hex codes are valid 6-digit format
  • Inspect browser console for errors

Palette Not Adding Colors

  • Ensure palette has fewer than 5 colors
  • Check browser console for JavaScript errors
  • Verify color object has both name and hex properties

License

Proprietary - UNPARTY LLC
All rights reserved.

Support & Contact

  • Main UNPARTY Ecosystem README
  • theunpartyapp - Web platform using these colors
  • theunpartyunppp - Native app using these colors
  • theunpartyrunway - Development tools and workflows
  • theunpartycrawler - Analytics that may reference brand colors

Last Updated: 2025-10-30
Repository Status: ✅ Active Development
Ecosystem Role: 🎨 Brand Identity Foundation
Focus: Single source of truth for UNPARTY color values and brand aesthetic