132 lines
2.4 KiB
Markdown
132 lines
2.4 KiB
Markdown
---
|
||
name: design-rules
|
||
description: This is a design styling rules
|
||
---
|
||
Use https://gluestack.io/ v3 for components.
|
||
Design Guidelines – Color & Visual Style
|
||
1. 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.
|
||
|
||
2. 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)
|
||
|
||
4. 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
|
||
|
||
5. 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.
|
||
|
||
6. 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
|