main character

modal · one card · one or two actions
source: static/css/components.css · static/js/web-demo/backend.js

Modal

For the rare thing that has to be read before anything else. It's a native <dialog> opened with showModal(), so focus stays inside, Escape closes it and the page behind is dimmed and inert. The one modal today is the web demo's opening notice, which says the demo follows a script. The app's own questions, such as closing a chapter, still use the browser's confirm(); the second card shows how one would look here.

The card

A --bg-raised card like the wizard's, 30rem wide at most and never closer than 1rem to the window's edge. Drawn here in place with .modal, the same rule as the open dialog. The buttons are Buttons: one send, and a quiet one when there is a way out besides Escape.

web demo

This demo follows a script

Type anything and press send. Your text is swapped for the next entry in Jordan's week, and the reply was written for that entry. The box shows what's coming next. Nothing is saved, so refresh to start over.

chapter

Close this chapter?

Your side of it becomes a journal entry, and the memory pipeline runs in the background. The next chapter starts empty.

Try it

Opens the real dialog over this page. Escape, the button, or a click on the dimmed page closes it, and focus goes back to the control that opened it. The dimmed layer is ::backdrop, which is drawn only around an open dialog, so Figma gets the card alone.

web demo

Type anything and press send. Your text is swapped for the next entry in Jordan's week, and the reply was written for that entry. The box shows what's coming next. Nothing is saved, so refresh to start over.
Anatomy
dialog.modal[aria-labelledby]   opened with showModal()
  div.eyebrow                   optional: what it's about
  h2.modal-title                the question or the news
  p.modal-body                  one short paragraph
  form.modal-actions[method=dialog]
    button.quiet                optional: the way out
    button.send                 the primary, last
card
--bg-raised, --border-default hairline, --radius-lg, padding 1.5rem, --shadow-xl. width min(30rem, 100vw − 2rem); taller than the window, it scrolls inside.
title
The app's heading voice: body serif italic, 1.3rem, --text-accent.
body
Body serif at the page size, line-height 1.55, in --text-default.
actions
Right-aligned, .5rem apart, .6rem below the body; they wrap on a narrow window. The primary is last, and it takes focus when the dialog opens.
scrim
::backdrop in --modal-scrim: the page colour at 75%.
Tokens

Fill --bg-raised; rule --border-default; title --text-accent, body --text-default, eyebrow --text-accent-muted; scrim --modal-scrim. In Figma: Modal, actions, with eyebrow, title and body properties; the buttons are Button instances.