# Concept 6: Emoji-Native UI — Full Design Language

**Status:** Canonical spec v1  
**Date:** 2026-05-20  
**Replaces:** Any text-based label, button, or notification in the canonical UI  
**Supersedes:** Concept 1-5 assumptions about text in the product

---

## The Design Premise

**Cascade is fully emoji-native.** Every screen, every interaction, every state communicates through emoji and visual form. Text exists only as a hidden accessibility layer (screen readers, ARIA labels). The app is designed for someone who cannot read English.

This is not a "mode" or a "toggle." It is the canonical surface. The entire planet is your audience.

---

## The Emoji Vocabulary

### Ring Structure — Visual, No Translation Needed

| Ring | Visual | Meaning |
|------|--------|---------|
| R0 YOU | ⬡ | Your center — the hex you're always inside |
| R1 (Inner Circle) | ⬢⬢⬢⬢⬢⬢ | 6 hexes, filled when claimed, dim when empty |
| R2 (Archetypes) | ⬡ | 12 hexes arranged around R1 |
| R3 (Vectors) | 🧭 | Orientation indicator, direction of reach |
| R4 (Echoes) | 🔊 | Sound wave radiating outward |
| R5 (Waves) | 🌊 | Wave moving through the lattice |
| R6 (Ambient) | 🌡️ | Temperature — warm/cool gradient |

### Cart Categories

| Category | Emoji | What It Reveals | Audio Mapping |
|----------|-------|-----------------|----------------|
| Food | 🍽️ | How you nourish yourself | Warmth → timbre warmth |
| Activities | ⚡ | What you do with energy | Brightness → oscillator brightness |
| Habitat | 🏠 | Who you are when alone | Depth → drone presence |
| Music | 🎵 | What moves through you | Melodic direction → melody contour |

Music is the fourth category — it is both an identity mirror AND the direct input to the generative audio system. A user's music cart shapes their ambient sound. Music is the connective tissue between identity and audio.

### The Five Tokens (Signals)

| Token | Emoji | Earned When |
|-------|-------|-------------|
| Heart | 💜 | Exact cart item match |
| Star | ⭐ | Category-level congruence |
| Moon | 🌙 | Complementary pattern (habitat fills activity gap) |
| Hourglass | ⏳ | Time-based pattern (same day of week) |
| Balloon | 🎈 | Rare, seasonal, or aspirational alignment |

### Resonance State

| State | Visual | What It Means |
|-------|--------|---------------|
| Cold | 🔵 | No resonance yet |
| Warming | 🟠 | Signal detected |
| Warm | 🟡 | Threshold approaching |
| Confirmed | 💜 | Ring confirmed — bond established |
| Dissolving | 🔘 | Dim hex — bond faded but marker remains |

### Navigation (No Text)

| Action | Visual |
|--------|--------|
| Go back | ↩️ |
| Open cart | 🛒 |
| Open constellation | ⬡⬢ |
| Confirm bond | 🤝 |
| Send seed | 🌱 |
| Settings | ⚙️ |
| Profile | ◉ |

---

## The Screen Map — Emoji Only

### Splash / Onboarding

```
🌌
[Animated: hex lattice assembles from center outward]
👤 → 🛒 → ⬡⬢⬢⬢⬢⬢ → 🤝
"this is you"   "add what you love"  "your ring grows"
```

No text instructions. Screen 1: "this is you." Screen 2: "add 3 of what you love." Screen 3: "here is your ring." Screen 4: "claim one."

### Home Screen (Constellation View)

```
⬡⬢⬢⬢⬢⬢  ← 6 R1 hexes, filled or empty
  ⬡⬡⬡⬡    ← R2 archetypes, color-coded by zodiac
    🧭     ← R3 vectors floating, direction indicator
```

No labels. The visual is the UI. Tap a hex → opens that person.

### Cart Screen

```
🍽️ ⚡ 🏠 🎵   ← category tabs (all four visible)
🛒 (12)      ← cart count badge
[grid of items as emoji cards]
```

Items appear as emoji cards with warmth gradient underneath. Tap to reveal. No text descriptions needed.

### Bond Confirmation

```
💜💜💜 → 🔔 → 🤝
3 signals → pulse → bidirectional handshake
```

The confirmation is a physical-feeling event. Visual pulse, haptic feedback, audio chord.

### Vector Declaration (R3)

```
🧭 → [category emoji] → [direction angle] → [confirm]
```

Swipe to set direction. Select category. Confirm. Vector appears in your constellation as a heading indicator.

---

## Generative Audio — The Voice of the System

Emoji-native UI means text doesn't compete with music. Audio becomes the system's voice for every event. All audio synthesized on-device via Web Audio API. No streaming, no royalties.

### Event Sound Map

| Event | Audio Synthesis | Musical Meaning |
|-------|----------------|-----------------|
| Ring confirmed | Major chord ascending, complexity = ring number | Major = bond established, higher ring = richer harmonic |
| New R1 bond | Warm sine sweep 220→440Hz, 0.3s | Arrival — someone enters your core |
| 💜 Heart signal | Crystalline ping 880Hz, 50ms, reverb tail | Exact match — pure resonance |
| ⭐ Star signal | Two-note bright ping, root then major third | Category congruence |
| 🌙 Moon signal | Low triangle tone 165Hz, soft attack | Complement — fills a gap |
| ⏳ Hourglass signal | Paired pings at 0.3s interval | Time pattern — rhythm of life |
| 🎈 Balloon signal | Ascending shimmer, 5 rapid sine partials | Rare event — special |
| Seed received | Crystalline drop + bloom | Something new arriving |
| Seed opened | Generative bloom — resonant reverb tail | Content revealed |
| R6 Ambient active | Sub-bass drone enters, shifts with warmth | The current is felt |

### Ambient Score — Continuous Generative Music

The ambient layer is always present (user can mute). It is driven entirely by the user's lattice state:

```typescript
// Lattice state drives audio parameters
latticeState = {
  r1Count, r2Active, r3Vectors,
  cartWeights: { food, activity, habitat, music },
  ambientWarmth: r6Warmth,
  hour, dayOfYear
}

→ audioEngine.setParams(latticeToAudioParams(latticeState))
```

**What changes with state:**
- More R1 bonds → higher base frequency, richer chord complexity
- More R3 vectors → denser rhythmic pulse
- Music cart dominance → melody contour from music items
- Time of day → reverb wet/dry (dawn sparse, dusk rich)
- Season → major/minor key center (summer major, winter minor)
- R6 warmth → drone presence (warm = drone enters)

### Cross-Modal Content Processing

When a Fractal Seed carries Cascade-processed media:
1. Server validates and processes the image
2. Audio engine analyzes dominant color palette
3. Resonant note generated to match the visual tone
4. Note plays when artifact is revealed

The visual and its sound are generated together, always.

### Visualization

The ambient layer drives a subtle waveform display behind the constellation view — not foregrounded, but always present, showing that sound is happening. Rendered from AnalyserNode FFT data.

### Reference

Full generative audio specification: `file 'Cascade/concepts/07-GENERATIVE-AUDIO.md'`

---

## Accessibility Layer

```html
<!-- Every emoji element has text fallback -->
<span role="img" aria-label="Ring 1 — Inner Circle: 6 positions, 2 claimed">
  ⬢⬢⬢⬜⬜⬜
</span>

<span role="img" aria-label="Heart signal: you and this person both have pizza in your cart">
  💜
</span>
```

Screen reader users get the full semantic description. No text UI needed for accessibility — the aria labels carry the meaning.

---

## Onboarding Flow — Zero Text

```
Screen 1:
🌌
[animation: hex lattice builds from center outward]
[auto-advance after 3s]

Screen 2:
👤
[phone camera opens, or: "skip" ↩️]
[auto-advance after 2s]

Screen 3:
🍽️ ⚡ 🏠 🎵
[pick one]
→ expanded picker:
  🍕 🍜 🍣 🍔 🌮 🍰 🥗 ☕ 🍷 🍪
[select 3]
→ ⬡⬡⬢⬢⬜⬜
[auto-advance when 3 selected]

Screen 4:
⚡
[pick activities]
  🎸 🏃 🎮 🎨 🧘 🏕 📚 🎭 🪂 🍳
[select 3]

Screen 5:
🏠
[pick habitat]
  🌿 🐕 🐈 🛋️ 📚 🪴 ☕ 🕯️ 🎧
[select 3]

Screen 6:
🎵
[pick music]
  🎧 🎹 🎤 🪘 🎻 🪇
[select 2 minimum]

Screen 7:
⬡⬢⬢⬢⬢⬢
[your ring appears, animated]
[0.5s pause]
🤝
[one empty R1 hex pulses — "claim someone"]
```

That's onboarding in 7 screens. No text. No explanation. Pure visual intuition.

---

## The Ring Label Question — Solved

R1 / R2 / R3 are numbers. In emoji-native design, the numbers don't appear. The ring is what it is:

```
⬡⬢⬢⬢⬢⬢  ← Inner Circle (no label needed)
  ⬡⬡⬡⬡    ← Archetypes (auto-labeled by zodiac shape)
    🧭     ← Vectors (direction, not ring number)
      🔊   ← Echoes (sound radiating)
        🌊 ← Waves (wave pattern)
          🌡️ ← Ambient (temperature)
```

Ring position is determined by distance from center. No "R2" label required. The system knows. The user experiences.

---

## What This Changes About Concepts 1-7

| Concept | Change |
|---------|--------|
| R4/R5 Thresholds | Confirmation feedback becomes 💜💜💜 → 🌊 (visual + audio, no text) |
| R3 Vector System | Declaration UI becomes 🧭 + direction swipe, no label needed |
| Fractal Seed | Seed card shows 🌱 + visual preview + resonant audio, no description text |
| Cart Pattern Recognition | Signal badges are 💜⭐🌙⏳🎈, no "Heart" label needed |
| Type Taxonomy | Item names are emoji. Music cart added as fourth category, drives generative audio |
| Generative Audio | Music cart items directly shape ambient score melody contour, mode, and rhythm |

The entire product can be built and experienced without reading a single word.

---

## Status

**Ready for:** Visual design brief, prototype wireframe, audio generative spec

*Concept 6 — emoji-native design language — complete*