# Purrfect Universe: Formal Brand & Design System Guide
## Constitution Review Board & Sovereign RFC Design Specifications

> **Classification:** Official Brand & Design Standard  
> **Brand Ethos:** *Care, Structure, and Accountability — powered by joyful craftsmanship.*  
> **Design Standard:** Accessible, High-Contrast Design System  
> **Package Edition:** 2026 RFC Edition v1.0  
> **Jurisdictional Anchors:** Dhaka / Savar, Bangladesh & Covent Garden, London, UK

---

## 1. Brand Ethos & Core Narrative

Purrfect Universe operates at the intersection of serious statutory rigor, high-trust worker empowerment, and joyful, playful craftsmanship. Our brand identity reflects this duality:
1. **Cosmic Stewardship (The Structure):** Deep cosmic navies, celestial cyans, and crisp, unambiguous architectural geometry reflect our commitment to corporate veil protection, statutory labor safeguards, and mathematical solvency.
2. **Warm Feline Vitality (The Care):** Solar oranges, radiant nebula magentas, and warm terracotta golds symbolize psychological safety, physical well-being, and genuine human warmth.

---

## 2. Color Palette & Brand Source Extraction

Our color system is derived directly from our canonical brand marks and logos:
- **`pu-transparent.png`**: The sovereign seal of Purrfect Universe, featuring the celestial orbit ring, feline contours, and radiant stars.
- **`psl-logo-only.png` / `psl-dark.png`**: Purrfect Software Limited's tech logomark, blending electric cyan with cosmic magenta into deep indigo space.
- **`motion-mechanics-light.png`**: The physical therapy and rehabilitation mark, providing clinical forest and leaf green accents.

### Canonical Color Values

| Role | Color Name | Hex | RGB | Contrast (Light Canvas) | Contrast (Dark Canvas) | Contrast Rating |
| :--- | :--- | :--- | :--- | :---: | :---: | :---: |
| **Primary Navy** | Cosmic Navy | `#1A365D` | `(26, 54, 93)` | **11.2:1** | — | **AAA** |
| **Dark Void** | Deep Space | `#090D16` | `(9, 13, 22)` | — | **18.5:1** (against light text) | **AAA** |
| **Tech Cyan** | PSL Electric Cyan | `#0CA6DD` | `(12, 166, 221)` | — | **9.8:1** (as accent) | **AAA** |
| **Celestial Blue** | Celestial Azure | `#34A7DF` | `(52, 167, 223)` | — | **8.4:1** | **AAA** |
| **Creative Accent**| Nebula Violet | `#D146CB` | `(209, 70, 203)` | **6.5:1** (dark text variant) | **7.5:1** (light text variant) | **AAA / AA** |
| **Solar Vitality** | Starlight Orange | `#F15E2E` | `(241, 94, 46)` | **5.2:1** (Orange 700 `#C2410C`) | **8.9:1** (Orange 400 `#FB923C`) | **AAA / AA** |
| **Craft Gold** | Terracotta Amber | `#D0824E` | `(208, 130, 78)` | **7.1:1** (`#92400E`) | **11.2:1** (`#FBBF24`) | **AAA** |

### Semantic Alert Tones

- **Steward Green (Success / Solvency):** Light: `#065F46` (7.5:1 AAA) / Dark: `#34D399` (10.5:1 AAA). Used for passing reserve gates, ratified articles, and paid employee wages.
- **Reserve Amber (Warning / Threshold):** Light: `#92400E` (7.1:1 AAA) / Dark: `#FBBF24` (11.2:1 AAA). Used for OpEx contingency warnings, 7-day show-cause countdowns, and corporate lease thresholds.
- **Redline Ruby (Danger / Statutory Redline):** Light: `#991B1B` (7.4:1 AAA) / Dark: `#F87171` (7.5:1 AAA). Used for Tier 2 BLA § 23 gross misconduct, asset withholding, and receivership triggers.
- **Civic Blue (Informational / Principle):** Light: `#1E40AF` (8.8:1 AAA) / Dark: `#38BDF8` (9.8:1 AAA). Used for safe harbor clauses, preamble maxims, and navigational guides.

---

## 3. Typography & Spacing Hierarchy

### Font Stacks
- **UI & Legal Proclamation:** `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Inter, sans-serif`
  - Body text: 16px (`1rem`), line height 1.6 (`1.6rem`).
  - H1 Document Titles: 32px (`2rem`), bold, border-bottom 2px accent.
  - H2 Article Headings: 24px (`1.5rem`), semibold, crisp accent rule.
  - H3 Clause Titles: 18px (`1.125rem`), medium.
- **Statutory Citations & Math Equations:** `"JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace`
  - Inline code: 14px, padded 2px 6px, radius 4px.
  - Mathematical models & ledger codes: 13.5px, high contrast background.

### 4px / 8px Spacing Rhythm
All margins, padding, and layout bounds conform strictly to modular multiples of 4px:
`4px (space-1)`, `8px (space-2)`, `12px (space-3)`, `16px (space-4)`, `20px (space-5)`, `24px (space-6)`, `32px (space-8)`, `48px (space-12)`.

---

## 4. Component Guidelines

1. **Buttons:**
   - Primary: Deep Cosmic Navy (Light) / Celestial Cyan (Dark) with bold legible label. Non-color active state with 2px offset focus ring.
   - Secondary / Ghost: 1px border `var(--border-strong)` with subtle hover fill.
2. **Cards & Glassmorphism:**
   - Background: `var(--bg-elevated)` with `backdrop-filter: blur(12px)`.
   - Border: 1px crisp `var(--border-subtle)`.
   - Box-shadow: Tactile depth `var(--shadow-sm)` hovering to `var(--shadow-md)`.
3. **Alert Callouts:**
   - Border-left 4px solid semantic token.
   - Never rely on color alone: always include an explicit semantic icon (e.g. 🛡️, ⚖️, ⚠️, 🚨).
4. **Data Tables:**
   - Zebra striping: `var(--bg-secondary)`.
   - Column headers: Uppercase 11px mono tracking with border bottom 2px.
   - Numeric alignment: Right-aligned with tabular figures.
5. **Stakeholder Journey Steppers:**
   - Active step: Solid brand badge with high-contrast text.
   - Completed step: Steward Green checkmark icon.
   - Pending step: Subtle border outline.

---

*Promulgated under the authority of the Universe Architect and the Founders Council of Purrfect Universe.*