# UI — Product chrome + pointer to Design Contract

**Visual / component rules:** `.ai/design/design-system.md` (mandatory before UI work).  
**Catalog:** `.ai/design/component-catalog.md`  
**Platform:** `.ai/design/platform/h5.md` (default) · `mini-program.md` · `website.md` · `flutter.md`

---

## Brand (summary)

- Primary `#E54D42` → `--color-primary` / `--yxg-pri`
- Atmosphere: peach wash → white sheet
- Mobile-first; user column ~430px
- Unicode symbols over emoji in chrome

---

## H5 structure

```
apps/user-h5/src/
  pages/
  components/
  layouts/
  hooks/
  api/
  stores/
  router/
  assets/
```

No raw `fetch` in `pages/`. Tokens from `packages/ui`.

---

## Tabs (product IA)

Home / Explore / **Ask** / Companion / Mine.  
Ask is the strategic center tab.

---

## Copy / compliance

- No medical cure claims
- No 吉凶祸福
- Report screens include disclaimer
- Brand voice: see design-system §13

---

## Interaction

- One job per section
- Home first viewport: brand, decode entry, then content sheet
- Loading / empty / error required for network views

---

## Mini program

- Own `components/`; share tokens from `packages/ui`, not Vue SFCs
- Pages → `services/*` only
- See `design/platform/mini-program.md`