DESIGN

rechaj-selene-app — product design

Selene — mobile app.

Rationale

(Why this product looks the way it does. Audience, primary jobs-to-be-done, the visual decisions that diverge from the global system and why.)

Inherits from global DESIGN.md

This is a mobile app built on the canonical rsm-* scaffold defined in the master DESIGN.md. Before adding a new screen, read these sections — everything you need to match the design system is in the global file:

• Mobile App Anatomy — rsm-* scaffold — .phone device shell, .rsm-page-head, .rsm-body, .rsm-nav, section heads, summary cards, queue rows, result bands, stat tiles, Profile screen anatomy, bottom-sheet shell.
• Status chips — canonical 3-color rule.
• Class-name prefix ownership — declare this product’s prefix(es) at the top of this file.
• Activated-sheet Success Modal — full-screen confirmation for major transitions.
• Inline error sheet — bottom-sheet for recoverable input errors.
• Read-only Evidence Sheet + Edit-submission affordance.
• Camera-only evidence — no infrastructure hints.
• Starter checklist for a new app — 12-point checklist to walk through before the first screen ships.

Class-name prefix

selene-* for Selene-specific components beyond the shared rsm-* scaffold. Register any new prefix in the global class-name ownership table.

Cards — no strokes

Restating the global rule because every product CSS extension tries to drift back into single-side accent stripes:

• ❌ border: 1px solid var(--grey3) (or any colour) on any card, readonly tile, sheet, row, or grouping container.
• ❌ Single-side accent stripes — no border-left, border-top, border-right, or border-bottom to colour-code state.
• ✅ background: <neutral or tinted bg> + box-shadow: var(--sh-card) + border-radius: 14px.

Screens

See screens/ for canonical interactive HTML mockups.

Prototypes

See prototypes/ for narrated end-to-end flows.