Surface A · The matched Access screen

One continuous moment, across a seam we don’t own

The middle screen is Cloudflare’s — but on our dark canvas, wearing our mark. The eye reads “still Mallory” and glides past the one button we can’t fully restyle.

1 · Threshold (ours)
MALLORY_
What’s the brief?
Enter
→
2 · Access sign-in (branded)
MALLORY_
secured by Cloudflare Access
Enter your email to receive a code
A one-time PIN keeps the desk private.
→
3 · The app (greeting follows)
MALLORY_

Good evening, Alex.
The desk is quiet.

Hold a thought…

The button is the one stubborn element. Default is Cloudflare orange; some plans accept a custom CSS URL that lets us tint it oxblood. We design assuming the default, and treat oxblood as a bonus.

◆ What we control

  • Background colour → #0e0f13
  • Logo → the MALLORY_ mark (SVG)
  • Header & footer text → in our voice
  • Single identity provider → skips the selector

◇ What stays Cloudflare’s

  • Email / OTP input chrome
  • “Send code” button styling (unless custom CSS)
  • Error & rate-limit copy
  • The exact layout of the form

The one thing to confirm at build time: is the PWA public (Threshold first → Enter → Access for the API) or gated (Access literally first → Threshold becomes the post-sign-in splash)? Either way the three screens above hold together.

Happy with the front-door story? If so I’ll capture all of Surface A into the guide and move to B · the voice states — the listening waveform and the speaking indicator.