UNPARTY iOS Style Guide

This style guide documents the visual design system and UI patterns used across all iOS applications in the UNPARTY ecosystem. It serves as the definitive reference for maintaining consistency across the platform.

Typography System

Font Specifications

The UNPARTY design system uses a monospaced font family with specific size hierarchies:

swift

// Font sizes defined in Theme.swift
enum FontSize {
    static let title: CGFloat = 20
    static let subtitle: CGFloat = 18
    static let body: CGFloat = 16
    static let caption: CGFloat = 12
    static let date: CGFloat = 11
    static let stat: CGFloat = 8
    static let feedtitle: CGFloat = 14
    static let feedcontent: CGFloat = 12
}

Typography Usage

#### Title Text

Font Size: 20pt

Weight: Medium

Design: Monospaced

Case: UPPERCASE

Usage: Main headings and primary navigation

Implementation: .themeTitle()

#### Subtitle Text

Font Size: 18pt

Weight: Medium

Design: Monospaced

Usage: Secondary headings and section titles

Implementation: .themeSubtitle()

#### Body Text

Font Size: 16pt

Weight: Medium

Design: Monospaced

Usage: Primary content and descriptions

Implementation: .themeBody()

#### Feed Title

Font Size: 14pt

Weight: Medium

Design: Monospaced

Case: UPPERCASE

Usage: Feed item headers

Implementation: .themeFeedTitle()

#### Feed Content

Font Size: 12pt

Weight: Medium

Design: Monospaced

Usage: Feed item content

Implementation: .themeFeedContent()

#### Caption Text

Font Size: 12pt

Weight: Medium

Design: Monospaced

Usage: Button labels, small UI elements

Implementation: .themeCaption()

#### Date Text

Font Size: 11pt

Weight: Medium

Design: Monospaced

Usage: Timestamps and metadata

Implementation: .themeDate()

#### Statistics Text

Font Size: 8pt

Weight: Medium

Design: Monospaced

Usage: Small data points and counters

Implementation: .themeStat(truncate: Bool = false)

Typography Characteristics

Letter Spacing: 0.5pt (tracking) for improved readability

Color: Uses .unpartyForeground by default

Line Limit: Statistics text supports optional truncation

Color System

Primary Brand Colors

#### Core UNPARTY Palette

swift

// Primary brand colors from UnpartyFrequentColors.swift
"unparty": "#F9C22E"         // Signature yellow - primary brand color
"unpartyblack": "#000605"    // Primary background - deep black
"unpartywhite": "#FFF1D6"    // Primary soft foreground - warm white
"astroblack": "#3D2D59"      // Moody backdrop - dark purple
"champion": "#E7B12E"        // Slightly richer gold variant

#### Accent Colors

swift

"electricPurple": "#3500D3"  // Futuristic accent - bright purple
"healpurple": "#884455"      // Emotional/reflective tones - muted purple
"starblack": "#753062"       // Deep violet/pink undertone
"pupblack": "#361D6E"        // Dark purple/blue blend
"electricBlue": "#00FFFF"    // Terminal-style pulse - cyan
"anotherlove": "#000108"     // Quiet/low-light moments - near black

System Colors

#### Semantic Color Extensions

swift

// Color+Unparty.swift semantic colors
.unpartyBackground     // Adaptive background color
.unpartyForeground     // Adaptive foreground color
.unpartyBackgroundHighlight  // Highlighted background areas
.unpartyTextMuted      // Muted text color
.unpartyAccent         // System accent color

#### Theme-specific Colors

swift

// Theme.swift color system
.themeBackground = "#371B70"     // Deep purple background
.themeForeground = "#FFF1D6"     // Warm white foreground
.themeGo = "#884455"             // Action color
.themeNeon = "#F9C22E"           // Neon accent (signature yellow)

Color Usage Guidelines

#### Primary Actions

Use unparty (#F9C22E) for primary buttons and key interactive elements

Use themeNeon for highlighted states and important calls-to-action

#### Backgrounds

Use unpartyblack (#000605) for primary backgrounds

Use themeBackground (#371B70) for themed sections

Use astroblack (#3D2D59) for card backgrounds and overlays

#### Text

Use unpartywhite (#FFF1D6) for primary text on dark backgrounds

Use themeForeground for body text in themed sections

Use .unpartyTextMuted for secondary text and metadata

#### Accents

Use electricPurple (#3500D3) for futuristic UI elements

Use electricBlue (#00FFFF) for terminal-style indicators

Use healpurple (#884455) for emotional or reflective content

Spacing and Layout

Standard Spacing Constants

swift

// From Constants.swift - standardized spacing values
static let cornerRadius: CGFloat = 15.0          // Standard corner radius
static let leadingContentInset: CGFloat = 26.0   // Content leading margin
static let standardPadding: CGFloat = 14.0       // Standard padding unit
static let unpppImagePadding: CGFloat = 14.0     // Image padding
static let safeAreaPadding: CGFloat = 30.0       // Safe area margins
static let titleTopPadding: CGFloat = 8.0        // Title top spacing
static let titleBottomPadding: CGFloat = -4.0    // Title bottom spacing

Grid and Collection Spacing

swift

// Grid-specific spacing
static let circleGridSpacing: CGFloat = 14.0     // Grid item spacing
static let unpppGridSpacing: CGFloat = 14.0      // Standard grid spacing
static let unpppGridPadding: CGFloat = 8.0       // Grid container padding

Component-specific Spacing

swift

// Specialized component spacing
static let learnMorePadding: CGFloat = 6.0       // Learn more button padding
static let learnMoreBottomPadding: CGFloat = 40.0 // Learn more bottom margin
static let badgeSpacing: CGFloat = 14.0          // Badge spacing
static let badgeGlassSpacing: CGFloat = 16.0     // Badge glass effect spacing

Responsive Sizing

The system includes device-specific sizing for optimal display:

#### Grid Item Sizes

iPhone: Minimum 160pt, Maximum 320pt

iPad: Minimum 220-240pt, Maximum 290-320pt

Editing Mode: Reduced sizes (140-180pt minimum)

Corner Radius and Borders

Standard Corner Radius

Primary: 15pt (from Constants.cornerRadius)

Cards: 16pt (common in card-based components)

Buttons: 10pt (button components)

Small Elements: 8pt (badges, small UI elements)

Border Patterns

#### Standard Borders

swift

// Common border configurations
.stroke(Color.indigo, lineWidth: 2)     // Primary borders
.stroke(LinearGradient(...), lineWidth: 1.5)  // Gradient borders

#### Interactive Borders

Default: 1.5-2pt stroke width

Gradient Borders: Used for premium/interactive elements

Color: Typically indigo, blue, or brand colors

Shape Usage

#### Rounded Rectangles

Primary shape for cards, buttons, and containers

Uses RoundedRectangle(cornerRadius: value)

Consistent with corner radius standards

#### Custom Shapes

swift

// RoundedCorner.swift - selective corner rounding
struct RoundedCorner: Shape {
    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners
}

Shadow and Visual Effects

Shadow Patterns

#### Standard Shadows

swift

// Common shadow configurations
.shadow(color: Color.black.opacity(0.3), radius: 4, x: 0, y: 2)    // Card shadows
.shadow(color: Color.black.opacity(0.1), radius: 4, y: 2)          // Light shadows
.shadow(color: Color.black.opacity(0.07), radius: 8, x: 0, y: 4)   // Subtle shadows

#### Interactive Shadows

swift

// State-dependent shadows
.shadow(radius: isPressed ? 5 : 10)                     // Button press states
.shadow(color: Color.blue.opacity(0.5), radius: 10)     // Glowing effects

#### Brand-specific Glows

swift

// Signature glow effects
.shadow(color: Color.indigo.opacity(0.5), radius: 10)   // Indigo glow
.shadow(color: Color.green.opacity(0.8), radius: 5)     // Success states
.shadow(color: userCoverColor().opacity(0.2), radius: 3) // Dynamic color glows

Visual Effect Guidelines

#### Blur Effects

Use Material.ultraThickMaterial for iOS overlays

Use WindowBackgroundShapeStyle.windowBackground for macOS

Apply selectively for modal overlays and backgrounds

#### Opacity Usage

Pressed States: 0.7 opacity

Background Overlays: 0.8 opacity

Shadow Colors: 0.1-0.5 opacity range

Muted Elements: 0.2 opacity for backgrounds

Button Styles and Interactive Elements

Primary Button Styles

#### GlowingButtonStyle

swift

// Signature button style with glow effect
- Corner Radius: 10pt
- Border: 2pt indigo stroke
- Shadow: Animated glow (5-10pt radius)
- Press Effect: 0.96 scale
- Animation: Spring (response: 0.3, dampingFraction: 0.4)

#### GradientButtonStyle

swift

// Modern gradient button with customizable colors
- Corner Radius: 16pt (configurable)
- Background: Adaptive (black.opacity(0.8) dark / white.opacity(0.8) light)
- Border: Gradient stroke (1.5pt)
- Press Effect: 0.98 scale
- Animation: Spring (response: 0.2, dampingFraction: 0.6)

#### StartButtonStyle

swift

// Action-oriented button with green accent
- Corner Radius: 10pt
- Background: Black.opacity(0.8)
- Border: 2pt green stroke with blur
- Shadow: Green glow (5-15pt radius)
- Press Effect: 0.95 scale, 0.7 opacity
- Animation: EaseOut (duration: 0.3)

Interactive States

#### Button Press States

Scale Effect: 0.95-0.98 scale reduction

Opacity Change: 0.7 opacity for pressed state

Shadow Adjustment: Reduced radius during press

#### Hover States (where applicable)

Shadow Enhancement: Increased radius and opacity

Color Intensification: Brighter accent colors

Smooth Transitions: 0.2-0.4 second animations

Touch Feedback

Haptic Feedback: Implemented for primary actions

Visual Feedback: Immediate scale and opacity changes

Timing: Animations complete within 0.3-0.4 seconds

Animation and Motion

Animation Timing

#### Spring Animations

swift

// Primary spring configuration
.spring(response: 0.3, dampingFraction: 0.4)    // Buttons and quick interactions
.spring(response: 0.4, dampingFraction: 0.8)    // UI state changes
.spring(response: 0.2, dampingFraction: 0.6)    // Gradient button style

#### Ease Animations

swift

.easeInOut                                       // Standard transitions
.easeInOut(duration: 0.2)                      // Quick interactions
.easeOut(duration: 0.3)                        // Action completion

Animation Patterns

#### UI State Changes

Duration: 0.2-0.4 seconds

Type: Spring animations preferred

Properties: Scale, opacity, shadow radius

#### Interactive Feedback

Immediate Response: < 0.1 seconds

Press States: 0.2-0.3 seconds

Release States: 0.3-0.4 seconds

#### Page Transitions

Standard: 0.4-0.8 seconds

Complex Views: Up to 1 second

Dampening: 0.6-0.8 for smooth feel

Motion Guidelines

#### Consistency

Use established timing patterns across similar interactions

Maintain spring characteristics for related UI elements

Avoid conflicting animation timing

#### Performance

Limit simultaneous animations

Use hardware-accelerated properties (transform, opacity)

Test on lower-end devices

Card and Container Design

Card Structure

#### Standard Card Pattern

swift

// Basic card configuration
RoundedRectangle(cornerRadius: 16)
    .fill(cardBackgroundColor)
    .shadow(color: cardShadow, radius: 8, x: 0, y: 4)
    .overlay(
        RoundedRectangle(cornerRadius: 16)
            .stroke(gradientBorder, lineWidth: 1.5)
    )

#### Enhanced Card (UNPARTYCard)

swift

// Premium card with gradient background and glow
- Corner Radius: 16pt
- Background: Linear gradient (themeGradientStart to themeGradientEnd)
- Border: Gradient stroke with glow colors
- Shadow: Color-adaptive with hover states
- Hover Effect: Enhanced shadow and border opacity

Container Patterns

#### Background Containers

Use .background() modifier for content wrapping

Apply corner radius and shadow consistently

Maintain contrast with content

#### Overlay Containers

Use Material.ultraThickMaterial for iOS

Implement proper blur and transparency

Ensure accessibility compliance

Content Spacing

Internal Padding: 16-20pt for card content

Element Spacing: 8-14pt between card elements

Section Spacing: 20-24pt between major sections

Form and Input Design

Input Field Styling

#### Text Fields

Corner Radius: 8-12pt

Border: 1pt stroke, adaptive color

Padding: 12pt horizontal, 8pt vertical

Background: System adaptive

#### Text Editors

Height: 88pt (from Constants.textEditorHeight)

Border: Rounded rectangle with standard radius

Scrolling: Enabled for overflow content

Form Layout

Field Spacing: 16pt between form fields

Section Spacing: 24pt between form sections

Validation: Use color coding (red/green) for states

Icon and Symbol Usage

System Icons

Use SF Symbols where possible

Maintain consistent sizing within contexts

Apply theme colors for brand cohesion

Custom Icons

Follow Apple's icon design guidelines

Use vector formats for scalability

Maintain visual weight consistency

Icon Sizing

Small: 12-16pt (inline with text)

Medium: 20-24pt (navigation, actions)

Large: 32-48pt (featured content)

Accessibility and Dark Mode

Color Accessibility

Ensure sufficient contrast ratios (4.5:1 minimum)

Provide alternative text for color-coded information

Test with color blindness simulators

Dark Mode Support

Use adaptive color system (.unpartyBackground, .unpartyForeground)

Test all UI components in both light and dark modes

Maintain brand recognition across modes

Typography Accessibility

Support Dynamic Type scaling

Maintain readable contrast in all size configurations

Provide alternative formats for complex content

Implementation Guidelines

Code Organization

Use extension-based organization for related functionality

Group styling modifiers by purpose

Document public APIs for reusable components

Performance Considerations

Use lazy loading for large lists and grids

Optimize image rendering and caching

Profile animation performance regularly

Testing

Test on multiple device sizes and orientations

Verify styling consistency across iOS versions

Validate accessibility compliance

Maintenance

Update this guide when adding new patterns

Review and consolidate similar patterns regularly

Keep examples current with codebase changes

---

This style guide should be considered the authoritative source for all visual design decisions across UNPARTY iOS applications. For questions or proposed changes, please refer to the development team.

Last Updated: September 2025