Sauci/apps/mobile/DESIGN.md

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.

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

---

Color Hierarchy

1. Brand Colors (Primary Palette)

The core brand identity. Used for primary actions, key UI elements, and brand recognition.

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

2. Premium/Luxury Colors

The boutique palette. Used for premium features, upgrades, and luxury moments.

Name	Hex	RGB	Usage
Gold	#D4AF37	212, 175, 55	Premium badges, Dares feature, luxury accents
Gold Dark	#B8860B	184, 134, 11	Gold gradient endpoint
Rose	#E8A4AE	232, 164, 174	Quiz feature, soft premium accents
Rose Dark	#D4919B	212, 145, 155	Rose gradient endpoint
Champagne	#F7E7CE	247, 231, 206	Highlights, premium text accents

3. Feature Colors

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

Usage Rules:

• Feature icons use their designated color
• Feature headers/titles can use the color as an accent
• Feature-specific buttons should use the feature color
• Keep the feature color consistent across all screens for that feature

4. Background Colors

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

6. Text Colors

Name	RGBA	Usage
Text	#ffffff	Primary text, headings
Text Secondary	rgba(255, 255, 255, 0.7)	Secondary text, descriptions
Text Tertiary	rgba(255, 255, 255, 0.5)	Disabled, hints, captions

7. Semantic Colors

For system feedback and states.

Name	Hex	Usage
Success	#2ECC71	Yes responses, confirmations, positive states
Warning	#F39C12	Maybe responses, cautions
Error	#E74C3C	No responses, errors, destructive actions
Muted	#6c757d	Skip, disabled, inactive

---

Swipe Response Colors

Consistent across all swipe interactions:

Response	Color	Hex/RGBA	Icon
Yes	Success	#2ECC71 / rgba(46, 204, 113, 0.4)	Checkmark
No	Error	#E74C3C / rgba(231, 76, 60, 0.4)	X
Maybe	Warning	#F39C12 / rgba(243, 156, 18, 0.4)	Question mark
Skip	Muted	#6c757d / rgba(108, 117, 125, 0.4)	Forward arrow

---

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)

Premium Gradients

Premium Gold:  #D4AF37 → #B8860B
Premium Rose:  #E8A4AE → #D4919B

Background Gradients

Background:         #1a1a2e → #0d0d1a  (Light to Dark)
Background Reverse: #0d0d1a → #1a1a2e  (Dark to Light)

Boutique Card Gradients

For pack cards and premium surfaces:

Boutique Rose:     rgba(233, 69, 96, 0.4) → rgba(155, 89, 182, 0.4)
Boutique Purple:   rgba(155, 89, 182, 0.4) → rgba(233, 69, 96, 0.4)
Boutique Dusty:    rgba(183, 110, 121, 0.35) → rgba(139, 69, 87, 0.35)
Boutique Gold:     rgba(212, 175, 55, 0.25) → rgba(184, 134, 11, 0.25)
Boutique Midnight: rgba(22, 33, 62, 0.8) → rgba(13, 13, 26, 0.8)
Boutique Amethyst: rgba(142, 68, 173, 0.4) → rgba(44, 62, 80, 0.4)

---

Component Patterns

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

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

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)

---

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

Play Button (Center Tab)

The main "play" button uses the primary brand gradient for maximum brand presence.

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

Radial Menu

Feature-specific colors for quick action items:

Item	Variant	Color
Match	Primary	#e94560 (core feature)
Dares	Gold	#D4AF37 (premium/adventure)
Quiz	Rose	#E8A4AE (intimacy)

---

Feature Icons (Locked)

IMPORTANT: These icons are locked and must be used consistently across the entire app (radial menu, page headers, buttons, etc.).

Feature	Icon Name	Ionicons	Description
Swipe/Match	flame	🔥	Fire/passion - 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
Profile	person	👤	Person - user settings and profile
Home	home	🏠	Home - main dashboard
Packs	layers	📚	Layers - question pack collections

Usage Rules:

• Always use the exact icon name specified above
• Use the feature's designated color with its icon
• Never swap icons between features
• Radial menu, page headers, and any feature references must use the same icon

---

Spacing Scale

Token	Value	Usage
xs	4px	Tight spacing, icon gaps
sm	8px	Small gaps, compact layouts
md	16px	Standard spacing
lg	24px	Section spacing
xl	32px	Large gaps
xxl	48px	Major sections

---

Border Radius Scale

Token	Value	Usage
xs	4px	Small elements, tags
sm	8px	Buttons, small cards
md	12px	Standard cards
lg	16px	Large cards
xl	24px	Modal corners
xxl	32px	Large containers
full	9999px	Pills, circles

---

Typography

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

---

Shadow Scale

Style	Values	Usage
none	—	Flat elements
sm	0 2px 4px rgba(0,0,0,0.1)	Subtle lift
md	0 4px 8px rgba(0,0,0,0.15)	Standard elevation
lg	0 8px 16px rgba(0,0,0,0.2)	Prominent elevation
xl	0 12px 24px rgba(0,0,0,0.25)	Maximum elevation
glow	0 0 20px {color}Glow	Accent glow effect

---

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

---

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

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

---

File Reference

Theme Source: apps/mobile/src/theme/index.ts

All colors, gradients, spacing, and typography are defined in the theme file. Always import from theme rather than hardcoding values.

import { theme } from '@/theme';

// Usage
const styles = {
  backgroundColor: theme.colors.background,
  color: theme.colors.premium.gold,
};