Home / Ops / More in this area

Maya player screen, FROZEN SPEC v1 (approved 2026-06-27)

Updated Jun 28, 2026 · Affirmology_Maya_Player_Spec_v1.md

Maya player screen, FROZEN SPEC v1 (approved 2026-06-27)

Jeff approved this design in the Cowork mockup (maya_player_redesign_v2_orb_logo). This is the exact target for Code to implement in the React Native consumer app (Maya). Build to match; do not improvise the layout.

Brand tokens (use these exactly)

• Backgrounds: page emerald #0a2014, darkest #061b10, card emerald #112e26, quiet glass rgba(16,46,36,0.5).
• Astrolabe well background: radial gradient center #0c241a -> #071a11 -> edge #050f0a (so the art's near-black edges MERGE, no frame).
• Gold: #c89b3c, soft #d9b15a, bright #ecd9a8. Cream: #faf6ee, muted #cdbfa3. Line: #1f4536, soft gold line rgba(217,177,90,0.18).
• Fonts: Cormorant Garamond (titles), Inter 300/400 (body), JetBrains Mono (eyebrows/labels, uppercase, letter-spacing 0.3em).

Layout (top to bottom, no dead space at the top)

1. TOP BAR (sits at the very top, no empty space above): a back chevron on the left, and centered the ONE-ORB logo + the gold "AFFIRMOLOGY AI" mono wordmark. Logo is the real asset Brand/transparent/Affirmology Logo One Orb Transparent.png (transparent PNG), ~20px, to the LEFT of the wordmark. Wordmark gold #c89b3c, JetBrains Mono ~10-11px, letter-spacing 0.34em.
2. TITLE BAR (thin, with a hairline rgba(217,177,90,0.12) under it): eyebrow = category in mono gold caps (e.g. "DAILY"); title = the track name in Cormorant Garamond weight 600 UPRIGHT (NOT italic), cream #faf6ee, ~25px; sub = duration in muted-cream mono caps (e.g. "27 MINUTES").
3. ASTROLABE WELL: the looping astrolabe VIDEO, centered, sitting directly on the radial-gradient dark well above. NO card/box around it; its near-black edges blend into the well. (See video behavior below.)
4. CONTROLS CARD (card emerald #112e26, 16px radius, 1px gold-tinted border, a brighter gold thread rgba(217,177,90,0.4) along the TOP edge only): contains ONLY the player controls. - Transport row, all visible on load in a paused state: rewind, a round gold play/pause button (gold #c89b3c, dark glyph), forward. - Scrubber: thin track #1f4536 with a gold #c89b3c progress fill and a bright #ecd9a8 dot at the playhead. - Below: current time (left), a centered Repeat toggle (mono caps), total time (right), all muted-cream mono ~10px.
5. FEEDBACK CARD (quieter glass rgba(16,46,36,0.5)): eyebrow "HOW DID THIS LAND?" mono gold caps; a 5-star row (gold #c89b3c, unfilled stars at 0.3 opacity); a note field (dark #0a2014, line border, Cormorant italic placeholder "What landed for you?").

Video behavior (Jeff's spec, 2026-06-27)

The astrolabe video is BOUND TO THE AUDIO PLAY STATE: - On PLAY: the video starts/plays. - On PAUSE: the video pauses (freezes on its current frame). - It loops while playing. - BACKGROUND/RETURN: if the user leaves the app (or this screen) while audio keeps playing and then RETURNS to this screen, the video RESUMES in sync with the audio (re-attach and play on screen focus if audio is playing; stay paused if audio is paused). This fixes the earlier bug where the video stopped and did not come back. - Implementation note: sync the video player to the audio player's isPlaying state, and re-sync on screen focus / app foreground (useFocusEffect / AppState 'active').

Also true (carried from feedback rounds)

• Transport + progress bar render on load (paused), not only after first play.
• The astrolabe is a VIDEO, not a static image.
• Logo placement uses the transparent one-orb asset; wordmark at top.
• Hierarchy comes from the brand's tonal range (darker astrolabe well vs lighter controls card vs quiet feedback card), gold accents, the gold thread, breathing room. No new colors.

Notes for Code

• Match the mockup proportions (orb ~20px, astrolabe well generous, controls card compact). Jeff approved these proportions.
• Real astrolabe video asset: confirm/where it lives; the mockup used a placeholder orbital SVG.
• Keep dev-only ATS exception for local http media; production media is HTTPS from R2.
• No em dashes anywhere.