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
|