Authnear 400px
Single narrow card on paper for sign in, sign up, and reset.
Layout and templates
Inline keeps one calm frame around the manuscript: a 64px navigation, a centered column, and a short list of page templates. Layout work is choosing the right container, not inventing a new arrangement.
Containers
Four widths cover the product. The shell centers everything; reading, forms, and the compose workbench each take the narrowest container that serves their content.
Widths comparedEach bar is a document plane at proportional scale
gutters 16px mobile · 24px desktop| Container | Token | Value | Use |
|---|---|---|---|
| App shell | container.max | 1200px | Centered column for every product screen |
| Compose workbench | — | 920px | Current growth limit for the flexible editor |
| Reading measure | container.reading | 680px | Legal pages, shared reports, long document reading |
| Narrow forms | — | near 400px | Auth and short single-purpose forms |
| Mobile gutter | container.gutter-mobile | 16px | Shell edge padding below sm |
| Desktop gutter | container.gutter-desktop | 24px | Shell edge padding from sm |
The band, workbench, and narrow widths carry container.band, container.workbench, and container.narrow.
Breakpoints
Inline is mobile first: base styles serve the smallest screen and breakpoints only add arrangement. The responsive behavior of the draft workspace itself, gutter aliases included, lives in Spacing.
| Token | Value | Shell behavior |
|---|---|---|
| Base | — | Single column on the mobile gutter; regions stack |
breakpoint.sm | 640px | Desktop gutter takes over |
breakpoint.md | 768px | Roomier headers and metadata |
breakpoint.lg | 1024px | Compose progress rail and the review split mount |
breakpoint.xl | 1280px | Question rail may reach its maximum |
breakpoint.2xl | 1536px | The shell gains whitespace, never wider prose |
Breakpoints answer collisions, not devices.
A layout changes at the width where its content stops fitting, so a new template may introduce no new breakpoints at all.
The app shell
One 64px navigation and one centered column on the same 1200px container, with no persistent product sidebar. Full-bleed color bands exist only on marketing surfaces; the product never paints edge to edge.
App shellLogo left · primary action and account right · no secondary nav
nav 64px · container 1200px
Every screen owns its h1.
The shell carries the logo, primary action, and account; the page below it renders its own heading.
Page templates
Six templates cover the product today; a new screen adapts one of them before inventing a new arrangement. The split ratios and the workbench height contract behind Compose and Review live in Sizing and density.
Documents1200px shell
Heading row with the primary action, then search, then document rows.
Composerail 248px · from lg
Fixed shell below the nav: progress rail, flexible editor, retained footer actions.
Reviewdraft-led · from lg
The draft leads beside the question rail; below
lg questions follow the full-width draft.Settingstab rail from lg
Section list with a side tab rail; tabs stack above the sections below
lg.Document reading680px measure
Legal pages and shared reports read at the 680px measure on paper.
Planned templates
Planned for the professor and institution audience, grounded in the product roadmap. They stay schematic until their components are defined.
Professor dashboardPlanned
Stat tiles and aggregate charts; small cohorts render a privacy-suppressed state instead of numbers.
Class managementPlanned
Roster and assignment tables for one class.
Rules
Layout keeps every screen inside one predictable frame.
- One shell. Every product screen sits in the same 64px navigation and centered main column; there is no persistent sidebar.
- Center at 1200px. The shell never grows wider; above 1536px extra room becomes whitespace, never wider prose.
- Pick the narrowest container that serves the content. Reading at 680px, forms near 400px, and the workbench up to 920px all sit inside the shell.
- Change layout when content collides. Breakpoints are mobile first and respond to content, not to device names.
- Every screen owns its h1. The shell carries navigation and the primary action; it never carries the page title.
- Start from a template. A new screen adapts one of the documented templates before inventing a new arrangement.
- Keep the product edge-quiet. Full-bleed color bands belong to marketing surfaces only.