---
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