mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-11-01 18:19:43 +00:00
Add question types, nudge feature, and share modal
- Add new question card components (photo, audio, text, who-likely) - Add share preview modal for matches - Add nudge notification system with rate limiting - Add session-based notification improvements - Add match confetti celebration animation - Update onboarding flow with paywall tracking - Remove deprecated swipe card and tutorial components - Update GlassCard/GlassInput to use solid backgrounds - Fix routing issues after packs screen removal
This commit is contained in:
jjbrunton committed
1 parent
8612b16b93
commit
1daf386765
114 files changed
+14877
-7911
No files matched your search
+119
-110
@@ -1,24 +1,24 @@
|
||||
# Sauci Design System
|
||||
|
||||
A boutique, premium design framework for the Sauci couples intimacy app.
|
||||
# Sauci Design System
|
||||
|
||||
A boutique, premium design framework for the Sauci couples intimacy app.
|
||||
|
||||
## Brand Identity
|
||||
|
||||
**Aesthetic:** Boutique lingerie store meets modern dating app. Think Ann Summers sophistication - sensual but tasteful, premium but accessible, intimate but playful.
|
||||
**Aesthetic:** Boutique lingerie store meets modern dating app. Think Ann Summers sophistication - sensual but tasteful, premium but accessible, intimate but playful.
|
||||
|
||||
**Mood:** Romantic, luxurious, warm, inviting, confident
|
||||
**Mood:** Romantic, luxurious, warm, inviting, confident
|
||||
|
||||
**Key Principles:**
|
||||
|
||||
- Glass-morphism for depth and elegance
|
||||
- Dark backgrounds with warm accents
|
||||
- Primary gradient (rose → purple) as the core brand signature
|
||||
- Gold reserved for premium/dares features only
|
||||
- Gradients for visual interest and brand recognition
|
||||
**Key Principles:**
|
||||
|
||||
- Dark, velvety backgrounds with subtle gradient atmosphere
|
||||
- Solid, high-contrast surfaces (no glass or blur effects)
|
||||
- Primary gradient (rose → purple) as the core brand signature
|
||||
- Gold reserved for premium/dares features only
|
||||
- Soft glows and shadows for depth, not transparency
|
||||
|
||||
---
|
||||
|
||||
## Color Hierarchy
|
||||
## Color Hierarchy
|
||||
|
||||
### 1. Brand Colors (Primary Palette)
|
||||
|
||||
@@ -26,14 +26,14 @@ The core brand identity. Used for primary actions, key UI elements, and brand re
|
||||
|
||||
| Name | Hex | RGB | Usage |
|
||||
|------|-----|-----|-------|
|
||||
| **Primary** | `#e94560` | 233, 69, 96 | Primary buttons, active states, key accents |
|
||||
| **Primary Dark** | `#c73a52` | 199, 58, 82 | Pressed states, darker variants |
|
||||
| **Secondary** | `#9b59b6` | 155, 89, 182 | Secondary accents, gradient endpoints |
|
||||
| **Secondary Dark** | `#8e44ad` | 142, 68, 173 | Pressed states, darker variants |
|
||||
|
||||
**Primary Gradient:** `#e94560 → #9b59b6` (Rose to Purple)
|
||||
- Direction: Left to right (horizontal) or top to bottom (vertical)
|
||||
- Use for: Primary buttons, match celebrations, brand moments
|
||||
| **Primary** | `#e1306c` | 225, 48, 108 | Primary buttons, active states, key accents |
|
||||
| **Primary Dark** | `#c12055` | 193, 32, 85 | Pressed states, darker variants |
|
||||
| **Secondary** | `#9b59b6` | 155, 89, 182 | Secondary accents, gradient endpoints |
|
||||
| **Secondary Dark** | `#8e44ad` | 142, 68, 173 | Pressed states, darker variants |
|
||||
|
||||
**Primary Gradient:** `#e1306c → #9b59b6` (Rose to Purple)
|
||||
- Direction: Left to right (horizontal) or top to bottom (vertical)
|
||||
- Use for: Primary buttons, match celebrations, brand moments
|
||||
|
||||
### 2. Premium/Luxury Colors
|
||||
|
||||
@@ -53,11 +53,11 @@ Each core feature has a designated accent color for consistency and recognition.
|
||||
|
||||
| Feature | Primary Color | Hex | Gradient |
|
||||
|---------|---------------|-----|----------|
|
||||
| **Swipe/Match** | Primary | `#e94560` | Primary gradient (rose → purple) |
|
||||
| **Quiz** | Rose | `#E8A4AE` | `#E8A4AE → #D4919B` |
|
||||
| **Dares** | Gold | `#D4AF37` | `#D4AF37 → #B8860B` |
|
||||
| **Chat** | Primary | `#e94560` | Primary gradient |
|
||||
| **Profile** | Secondary | `#9b59b6` | Secondary gradient |
|
||||
| **Swipe/Match** | Primary | `#e1306c` | Primary gradient (rose → purple) |
|
||||
| **Quiz** | Rose | `#E8A4AE` | `#E8A4AE → #D4919B` |
|
||||
| **Dares** | Gold | `#D4AF37` | `#D4AF37 → #B8860B` |
|
||||
| **Chat** | Primary | `#e1306c` | Primary gradient |
|
||||
| **Profile** | Secondary | `#9b59b6` | Secondary gradient |
|
||||
|
||||
**Usage Rules:**
|
||||
- Feature icons use their designated color
|
||||
@@ -71,22 +71,31 @@ Dark, rich backgrounds that make content pop.
|
||||
|
||||
| Name | Hex | RGBA | Usage |
|
||||
|------|-----|------|-------|
|
||||
| **Background** | `#0d0d1a` | 13, 13, 26 | Primary app background |
|
||||
| **Background Light** | `#1a1a2e` | 26, 26, 46 | Cards, elevated surfaces |
|
||||
| **Surface** | — | `rgba(22, 33, 62, 0.6)` | Glass overlays |
|
||||
| **Surface Solid** | `#16213e` | 22, 33, 62 | Non-transparent surfaces |
|
||||
|
||||
### 5. Glass/Surface Colors
|
||||
|
||||
For the glass-morphism effect that defines the UI.
|
||||
|
||||
| Name | RGBA | Usage |
|
||||
|------|------|-------|
|
||||
| **Glass Background** | `rgba(22, 33, 62, 0.4)` | Standard glass cards |
|
||||
| **Glass Background Heavy** | `rgba(22, 33, 62, 0.6)` | Emphasized glass cards |
|
||||
| **Glass Border** | `rgba(255, 255, 255, 0.08)` | Subtle borders |
|
||||
| **Glass Border Light** | `rgba(255, 255, 255, 0.12)` | Prominent borders |
|
||||
| **Glass Highlight** | `rgba(255, 255, 255, 0.05)` | Top edge shine |
|
||||
| **Background** | `#0e0e11` | 14, 14, 17 | Primary app background |
|
||||
| **Background Light** | `#17171c` | 23, 23, 28 | Cards, elevated surfaces |
|
||||
| **Surface** | `#17171c` | 23, 23, 28 | Primary surface color |
|
||||
| **Surface Solid** | `#17171c` | 23, 23, 28 | Opaque surfaces |
|
||||
| **Border** | `#303036` | 48, 48, 54 | Dividers, outlines, input borders |
|
||||
|
||||
### 5. Tile/Category Colors (Home Screen)
|
||||
|
||||
Discovery/Home tiles use vibrant, solid colors for quick recognition.
|
||||
|
||||
| Token | Hex |
|
||||
|-------|-----|
|
||||
| **teal** | `#14B8A6` |
|
||||
| **purple** | `#8B5CF6` |
|
||||
| **orange** | `#F97316` |
|
||||
| **coral** | `#F87171` |
|
||||
| **emerald** | `#10B981` |
|
||||
| **indigo** | `#6366F1` |
|
||||
| **rose** | `#EC4899` |
|
||||
| **amber** | `#F59E0B` |
|
||||
|
||||
**Usage Rules:**
|
||||
- Tiles are solid fills with a subtle dark overlay for depth
|
||||
- Category colors are consistent across the app
|
||||
- Avoid gradients on tiles unless it is a premium moment
|
||||
|
||||
### 6. Text Colors
|
||||
|
||||
@@ -122,14 +131,14 @@ Consistent across all swipe interactions:
|
||||
|
||||
---
|
||||
|
||||
## Gradients
|
||||
## Gradients
|
||||
|
||||
### Brand Gradients
|
||||
|
||||
```
|
||||
Primary: #e94560 → #9b59b6 (Rose to Purple)
|
||||
Primary Subtle: rgba(233, 69, 96, 0.8) → rgba(155, 89, 182, 0.8)
|
||||
Primary Reverse: #9b59b6 → #e94560 (Purple to Rose)
|
||||
Primary: #e1306c → #9b59b6 (Rose to Purple)
|
||||
Primary Subtle: rgba(225, 48, 108, 0.8) → rgba(155, 89, 182, 0.8)
|
||||
Primary Reverse: #9b59b6 → #e1306c (Purple to Rose)
|
||||
```
|
||||
|
||||
### Premium Gradients
|
||||
@@ -142,8 +151,8 @@ Premium Rose: #E8A4AE → #D4919B
|
||||
### Background Gradients
|
||||
|
||||
```
|
||||
Background: #1a1a2e → #0d0d1a (Light to Dark)
|
||||
Background Reverse: #0d0d1a → #1a1a2e (Dark to Light)
|
||||
Background: #0e0e11 → #1f1417 → #0e0e11
|
||||
Background Reverse: #0e0e11 → #1f1417 → #0e0e11
|
||||
```
|
||||
|
||||
### Boutique Card Gradients
|
||||
@@ -163,44 +172,44 @@ Boutique Amethyst: rgba(142, 68, 173, 0.4) → rgba(44, 62, 80, 0.4)
|
||||
|
||||
## Component Patterns
|
||||
|
||||
### Buttons
|
||||
### Buttons
|
||||
|
||||
| Variant | Background | Text | Border |
|
||||
|---------|------------|------|--------|
|
||||
| **Primary** | Primary gradient | White | None |
|
||||
| **Secondary** | Glass background | White | Glass border |
|
||||
| **Ghost** | Transparent | Primary | None |
|
||||
| **Danger** | Error gradient | White | None |
|
||||
| **Feature** | Feature color gradient | White | None |
|
||||
| **Primary** | Primary gradient | White | None |
|
||||
| **Secondary** | Surface | White | Border |
|
||||
| **Ghost** | Transparent | Primary | None |
|
||||
| **Danger** | Error gradient | White | None |
|
||||
| **Feature** | Feature color gradient | White | None |
|
||||
|
||||
### Cards
|
||||
### Cards
|
||||
|
||||
| Variant | Background | Border | Use Case |
|
||||
|---------|------------|--------|----------|
|
||||
| **Glass** | Glass background | Glass border | Standard content |
|
||||
| **Glass Elevated** | Glass background heavy | Glass border light | Emphasized content |
|
||||
| **Solid** | Background light | Glass border | Non-blur contexts |
|
||||
| **Solid** | Surface | Border | Standard content |
|
||||
| **Raised** | Surface | Border | Emphasized content + shadow |
|
||||
| **Tinted** | Category color | None | Home tiles, feature promos |
|
||||
|
||||
### Inputs
|
||||
### Inputs
|
||||
|
||||
| State | Border Color | Background |
|
||||
|-------|--------------|------------|
|
||||
| **Default** | Glass border | Glass background |
|
||||
| **Focused** | Primary | Glass background |
|
||||
| **Error** | Error | Glass background |
|
||||
| **Disabled** | Glass border | Glass background (opacity 0.5) |
|
||||
| **Default** | Border | Surface |
|
||||
| **Focused** | Primary | Surface |
|
||||
| **Error** | Error | Surface |
|
||||
| **Disabled** | Border | Surface (opacity 0.6) |
|
||||
|
||||
---
|
||||
|
||||
## Tab Bar
|
||||
## Tab Bar
|
||||
|
||||
| Element | Color |
|
||||
|---------|-------|
|
||||
| **Background** | `rgba(13, 13, 26, 0.92)` with blur |
|
||||
| **Top Border** | `rgba(233, 69, 96, 0.2)` (primary tint) |
|
||||
| **Active Icon** | Primary `#e94560` |
|
||||
| **Inactive Icon** | Text secondary |
|
||||
| **Badge** | Rose `#E8A4AE` |
|
||||
| **Background** | `#0e0e11` |
|
||||
| **Top Border** | `rgba(225, 48, 108, 0.2)` (primary tint) |
|
||||
| **Active Icon** | Primary `#e1306c` |
|
||||
| **Inactive Icon** | Text secondary |
|
||||
| **Badge** | Rose `#E8A4AE` |
|
||||
|
||||
## Play Button (Center Tab)
|
||||
|
||||
@@ -208,10 +217,10 @@ The main "play" button uses the primary brand gradient for maximum brand presenc
|
||||
|
||||
| Element | Color |
|
||||
|---------|-------|
|
||||
| **Glow** | Primary glow `rgba(233, 69, 96, 0.3)` |
|
||||
| **Border** | `rgba(233, 69, 96, 0.4)` |
|
||||
| **Highlight** | Primary → Secondary gradient |
|
||||
| **Icon** | Primary `#e94560` |
|
||||
| **Glow** | Primary glow `rgba(225, 48, 108, 0.3)` |
|
||||
| **Border** | `rgba(225, 48, 108, 0.4)` |
|
||||
| **Highlight** | Primary → Secondary gradient |
|
||||
| **Icon** | Primary `#e1306c` |
|
||||
|
||||
## Radial Menu
|
||||
|
||||
@@ -219,9 +228,9 @@ Feature-specific colors for quick action items:
|
||||
|
||||
| Item | Variant | Color |
|
||||
|------|---------|-------|
|
||||
| **Match** | Primary | `#e94560` (core feature) |
|
||||
| **Dares** | Gold | `#D4AF37` (premium/adventure) |
|
||||
| **Quiz** | Rose | `#E8A4AE` (intimacy) |
|
||||
| **Match** | Primary | `#e1306c` (core feature) |
|
||||
| **Dares** | Gold | `#D4AF37` (premium/adventure) |
|
||||
| **Quiz** | Rose | `#E8A4AE` (intimacy) |
|
||||
|
||||
---
|
||||
|
||||
@@ -278,17 +287,17 @@ Feature-specific colors for quick action items:
|
||||
|
||||
| Style | Size | Weight | Line Height | Usage |
|
||||
|-------|------|--------|-------------|-------|
|
||||
| `largeTitle` | 34px | Bold | 41px | Screen titles |
|
||||
| `title1` | 28px | Bold | 34px | Section headers |
|
||||
| `title2` | 22px | Bold | 28px | Card titles |
|
||||
| `title3` | 20px | SemiBold | 25px | Subsection headers |
|
||||
| `headline` | 17px | SemiBold | 22px | Emphasized body |
|
||||
| `body` | 17px | Regular | 22px | Body text |
|
||||
| `callout` | 16px | Regular | 21px | Secondary body |
|
||||
| `subhead` | 15px | Regular | 20px | Supporting text |
|
||||
| `footnote` | 13px | Regular | 18px | Captions |
|
||||
| `caption1` | 12px | Regular | 16px | Small labels |
|
||||
| `caption2` | 11px | Regular | 13px | Tiny text |
|
||||
| `largeTitle` | 32px | Bold | 40px | Screen titles |
|
||||
| `title1` | 28px | Bold | 34px | Section headers |
|
||||
| `title2` | 24px | Bold | 30px | Card titles |
|
||||
| `title3` | 20px | SemiBold | 26px | Subsection headers |
|
||||
| `headline` | 17px | SemiBold | 22px | Emphasized body |
|
||||
| `body` | 16px | Regular | 22px | Body text |
|
||||
| `callout` | 15px | Regular | 20px | Secondary body |
|
||||
| `subhead` | 14px | Regular | 20px | Supporting text |
|
||||
| `footnote` | 13px | Regular | 18px | Captions |
|
||||
| `caption1` | 12px | Regular | 16px | Small labels |
|
||||
| `caption2` | 11px | Regular | 14px | Tiny text |
|
||||
|
||||
---
|
||||
|
||||
@@ -305,35 +314,35 @@ Feature-specific colors for quick action items:
|
||||
|
||||
---
|
||||
|
||||
## Platform Considerations
|
||||
|
||||
### iOS
|
||||
- Use BlurView for glass effects
|
||||
- Haptic feedback on interactions
|
||||
- Native-feeling animations
|
||||
|
||||
### Android
|
||||
- Fallback to solid semi-transparent backgrounds
|
||||
- Reduced blur intensity for performance
|
||||
- Adjusted shadow rendering
|
||||
## Platform Considerations
|
||||
|
||||
### iOS
|
||||
- Favor solid surfaces and shadows for depth
|
||||
- Haptic feedback on interactions
|
||||
- Native-feeling animations
|
||||
|
||||
### Android
|
||||
- Match iOS surface colors and shadows
|
||||
- Avoid blur and heavy transparency for performance
|
||||
- Adjust shadow rendering as needed
|
||||
|
||||
---
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use the primary gradient for main CTAs
|
||||
- Apply feature colors consistently within a feature
|
||||
- Use glass effects for depth and hierarchy
|
||||
- Keep text high-contrast (white on dark)
|
||||
- Use gold/rose for premium moments
|
||||
### Do
|
||||
- Use the primary gradient for main CTAs
|
||||
- Apply feature colors consistently within a feature
|
||||
- Use solid surfaces with soft shadows for depth
|
||||
- Keep text high-contrast (white on dark)
|
||||
- Use gold/rose for premium moments
|
||||
|
||||
### Don't
|
||||
- Mix feature colors within a single screen
|
||||
- Use more than 2-3 accent colors per screen
|
||||
- Apply the primary gradient to everything
|
||||
- Use pure black (#000000) for backgrounds
|
||||
- Forget to include the glow effect on premium elements
|
||||
### Don't
|
||||
- Mix feature colors within a single screen
|
||||
- Use more than 2-3 accent colors per screen
|
||||
- Apply the primary gradient to everything
|
||||
- Use glass, blur, or frosted effects
|
||||
- Use pure black (#000000) for backgrounds
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in new issue
Block a user