mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-10-31 18:19:43 +00:00
Reposition app as relationship improvement tool
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
jjbruntonandClaude Opus 4.5 committed
1 parent
9402369246
commit
a6b3b6a251
11 files changed
+243
-238
No files matched your search
+120
-120
@@ -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 relationship 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:** Premium couples app with a warm, sophisticated feel. Think modern wellness meets connection - supportive but not clinical, premium but accessible, personal but playful.
|
||||
|
||||
**Mood:** Romantic, luxurious, warm, inviting, confident
|
||||
**Mood:** Warm, supportive, confident, inviting, growth-oriented
|
||||
|
||||
**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
|
||||
**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** | `#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
|
||||
| **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 | `#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 |
|
||||
| **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,31 +71,31 @@ Dark, rich backgrounds that make content pop.
|
||||
|
||||
| Name | Hex | RGBA | Usage |
|
||||
|------|-----|------|-------|
|
||||
| **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
|
||||
| **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
|
||||
|
||||
@@ -131,14 +131,14 @@ Consistent across all swipe interactions:
|
||||
|
||||
---
|
||||
|
||||
## Gradients
|
||||
## Gradients
|
||||
|
||||
### Brand Gradients
|
||||
|
||||
```
|
||||
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)
|
||||
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
|
||||
@@ -151,8 +151,8 @@ Premium Rose: #E8A4AE → #D4919B
|
||||
### Background Gradients
|
||||
|
||||
```
|
||||
Background: #0e0e11 → #1f1417 → #0e0e11
|
||||
Background Reverse: #0e0e11 → #1f1417 → #0e0e11
|
||||
Background: #0e0e11 → #1f1417 → #0e0e11
|
||||
Background Reverse: #0e0e11 → #1f1417 → #0e0e11
|
||||
```
|
||||
|
||||
### Boutique Card Gradients
|
||||
@@ -172,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** | Surface | White | 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 |
|
||||
|---------|------------|--------|----------|
|
||||
| **Solid** | Surface | Border | Standard content |
|
||||
| **Raised** | Surface | Border | Emphasized content + shadow |
|
||||
| **Tinted** | Category color | None | Home tiles, feature promos |
|
||||
| **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** | Border | Surface |
|
||||
| **Focused** | Primary | Surface |
|
||||
| **Error** | Error | Surface |
|
||||
| **Disabled** | Border | Surface (opacity 0.6) |
|
||||
| **Default** | Border | Surface |
|
||||
| **Focused** | Primary | Surface |
|
||||
| **Error** | Error | Surface |
|
||||
| **Disabled** | Border | Surface (opacity 0.6) |
|
||||
|
||||
---
|
||||
|
||||
## Tab Bar
|
||||
## Tab Bar
|
||||
|
||||
| Element | Color |
|
||||
|---------|-------|
|
||||
| **Background** | `#0e0e11` |
|
||||
| **Top Border** | `rgba(225, 48, 108, 0.2)` (primary tint) |
|
||||
| **Active Icon** | Primary `#e1306c` |
|
||||
| **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)
|
||||
|
||||
@@ -217,10 +217,10 @@ The main "play" button uses the primary brand gradient for maximum brand presenc
|
||||
|
||||
| Element | Color |
|
||||
|---------|-------|
|
||||
| **Glow** | Primary glow `rgba(225, 48, 108, 0.3)` |
|
||||
| **Border** | `rgba(225, 48, 108, 0.4)` |
|
||||
| **Highlight** | Primary → Secondary gradient |
|
||||
| **Icon** | Primary `#e1306c` |
|
||||
| **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
|
||||
|
||||
@@ -228,9 +228,9 @@ Feature-specific colors for quick action items:
|
||||
|
||||
| Item | Variant | Color |
|
||||
|------|---------|-------|
|
||||
| **Match** | Primary | `#e1306c` (core feature) |
|
||||
| **Dares** | Gold | `#D4AF37` (premium/adventure) |
|
||||
| **Quiz** | Rose | `#E8A4AE` (intimacy) |
|
||||
| **Match** | Primary | `#e1306c` (core feature) |
|
||||
| **Dares** | Gold | `#D4AF37` (premium/adventure) |
|
||||
| **Quiz** | Rose | `#E8A4AE` (connection) |
|
||||
|
||||
---
|
||||
|
||||
@@ -240,7 +240,7 @@ Feature-specific colors for quick action items:
|
||||
|
||||
| Feature | Icon Name | Ionicons | Description |
|
||||
|---------|-----------|----------|-------------|
|
||||
| **Swipe/Match** | `flame` | 🔥 | Fire/passion - the core swiping experience |
|
||||
| **Swipe/Match** | `flame` | 🔥 | Fire/energy - the core swiping experience |
|
||||
| **Dares** | `flash` | ⚡ | Lightning bolt - adventure, excitement, energy |
|
||||
| **Quiz** | `help-circle` | ❓ | Question mark - discovery, questions about each other |
|
||||
| **Matches** (tab) | `heart` | ❤️ | Love heart - connections made between partners |
|
||||
@@ -287,17 +287,17 @@ Feature-specific colors for quick action items:
|
||||
|
||||
| Style | Size | Weight | Line Height | Usage |
|
||||
|-------|------|--------|-------------|-------|
|
||||
| `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 |
|
||||
| `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 |
|
||||
|
||||
---
|
||||
|
||||
@@ -314,35 +314,35 @@ Feature-specific colors for quick action items:
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
## 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 solid surfaces with soft shadows for depth
|
||||
- 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 glass, blur, or frosted effects
|
||||
- Use pure black (#000000) for backgrounds
|
||||
### 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