2.4 KiB
name, description
| name | description |
|---|---|
| design-rules | This is a design styling rules |
Use https://gluestack.io/ v3 for components. Design Guidelines – Color & Visual Style
- Core Principle
Use calm, human, and timeless visuals. The interface should feel warm, trustworthy, and familiar, supporting long conversations and emotional storytelling.
Clarity over decoration. Restraint over novelty.
- Color System (Solid Colors Only)
⚠️ Gradients are strictly forbidden. Only pure, solid color blocks may be used.
Primary Palette Color Hex Usage Deep Purple #200028 Primary text, titles, important content Slate Purple #8C8EA3 Secondary text, placeholders, timestamps Medium Purple #A177A6 Primary brand color, buttons, headers, user chat bubbles Lavender #CEB0DA Highlights, AI avatar background, subtle emphasis Blush Pink #DBBABA User avatar background, warm accents Cream #FAF7F8 App background White #FFFFFF Cards, chat bubbles, content containers 3. Color Usage Rules Text
Primary text: #200028
Secondary or helper text: #8C8EA3
Never use pure black (#000000)
Backgrounds
Main app background: #FAF7F8
Card / bubble background: #FFFFFF
Header / navigation background: #A177A6
Chat Bubbles
AI messages:
Background: #FFFFFF
Text: #200028
User messages:
Background: #A177A6
Text: #FFFFFF
Highlights & Accents
Use #CEB0DA sparingly for:
Selected states
Important quotes
Progress indicators
Use #DBBABA only for warm, human elements (e.g. user identity)
- Strict Visual Constraints ❌ Forbidden
Gradients (linear, radial, mesh, etc.)
Drop shadows with color tint
Neon or high-contrast colors
Overuse of accents
Decorative textures
✅ Allowed
Flat, solid color fills
Soft spacing and typography
Clear visual hierarchy
White space as a design tool
- Emotional Tone
The color system should communicate:
Calm
Safety
Memory
Warmth
Continuity over time
This is not a “tech product” color system. It is a memory-keeping companion.
- Consistency Rule (Non-Negotiable)
The same semantic meaning must always map to the same color.
Example:
Primary action → always #A177A6
Secondary text → always #8C8EA3
Reading background → always #FAF7F8
No exceptions.
If you want, next I can:
Turn this into a Design Token spec (JSON / Style Dictionary)
Adapt it for iOS (UIKit / SwiftUI) and Android (Material / Compose)
Or write a “Do / Don’t” one-page visual guide for designers & devs