# Prompt for Grok Build

Copy everything inside the box below into Grok Build. Upload `remly-glass-design-kit.zip` with it, or point Grok at the live URLs.

---

```text
You are continuing the design prototype for "Remly", an AI front desk app for trade
businesses. The owner of an electrical business uses it to see leads, conversations
(SMS, WhatsApp, web chat, voicemail), calls, jobs and customers. "Remy" is the AI
assistant that answers customers, takes down leads, books jobs and suggests replies.

Everything you need is in the design kit. You have no other context, so read it first:

  Zip:      remly-glass-design-kit.zip (concept files + spec/ folder)
  Online:   https://remly-ui-concepts.pages.dev/spec/            (spec index)
            https://remly-ui-concepts.pages.dev/spec/README.md   (start here)
            https://remly-ui-concepts.pages.dev/spec/starter/    (working prototype)
            https://remly-ui-concepts.pages.dev                  (the 15 concepts)
            https://remly-ui-concepts.pages.dev/6-liquid-glass.html   (primary look)
            https://remly-ui-concepts.pages.dev/2-beautiful.html      (Today dashboard)
            https://remly-ui-concepts.pages.dev/8-glass-pipeline.html (pipeline)
            https://remly-ui-concepts.pages.dev/10-calendar-glass.html (calendar)

Read in this order: spec/README.md, 01-principles.md, 02-tokens.md, 03-components.md,
04-screens.md, 05-flows.md, 06-data.md, 07-accessibility.md, 09-build-plan.md.
Then open spec/starter/index.html and study screens/today.js, inbox.js and thread.js.
They are the pattern. Every other screen is a stub in screens/stubs.js with its own
build checklist.

YOUR JOB (phase 1 in 09-build-plan.md): turn the starter into a clickable HTML
prototype of EVERY screen in 04-screens.md, in the glass style, in every state.

Deliver in this order, one at a time. Give me a short changelog after each:
  1. Leads list + lead detail (with Book a job, status change, notes sheets)
  2. Jobs: calendar Day/Week with Remy ghost slots, then the Pipeline board with drag
     and a "Move to…" sheet, then job detail
  3. Inbox > Calls segment polish + the voicemail flows in 05-flows.md
  4. Customers list (A–Z rail) + customer file + add contact sheet
  5. More + every settings page (business details, opening hours, alerts, your
     assistant, teach Remy, how much Remy answers, your calls ring, team and billing
     as web links, about with privacy/terms, sign out)
  6. Sign-in (business code, email, password, forgot, session expired), alerts primer,
     Remy sheet (the orb), and the new-business setup flow incl. the texting approval
     waiting state
  7. A pass over all screens: loading / empty / error / offline, dark mode, Reduce
     Transparency, Increase Contrast, Reduce Motion, text size XXL; then click through
     every flow in 05-flows.md

CONSTRAINTS (do not break these):
  - Fake data only, from starter/data.js. No real names, numbers or messages.
    Use 555-01xx numbers.
  - Do NOT change API field names or shapes in data.js. They match the real API.
    Anything the API lacks goes under `proposed` in data.js, and the screen must
    still look right without it. List each addition in 06-data.md.
  - Tokens only: add new values to tokens.css (and tokens.json) before using them.
    Keep spec/tokens.css and spec/starter/tokens.css identical.
  - Glass for chrome (nav bar, tab bar, sheets, floating buttons); solid surfaces for
    dense content (lists, threads, transcripts, forms). One accent colour (orange)
    for actions only. Remy's gradient is only for Remy's mark and surfaces.
  - Text contrast at least 4.5:1, icons 3:1, every tap target at least 44x44pt.
  - Copy server error and refusal text verbatim (strings are in 04-screens.md).
  - Keep the 5-second auto-send countdown with a Stop button. Never auto-send
    without it.
  - Vanilla HTML/CSS/JS, classic <script> tags, no build step, no framework. It must
    work opened as a file and from the live URL. If you ever add a CDN library, pin
    an exact version.
  - Mobile first: full screen on a phone, framed phone on desktop. No horizontal
    page scroll at 320px wide.
  - No console errors.
  - Nothing about business deals, partner pricing or private notes.

When something in the spec is unclear or two rules conflict, pick the option that
is more readable in sunlight and more like the existing three finished screens.
Write the choice down in the relevant spec file.
```