Spacing
Spacing keeps long drafts workable. Inline’s 4px system controls the interface around student writing, not the amount of writing a student can preserve, review, or revise.
Scale
Use the complete 18-token scale. Working steps handle routine rhythm; supporting steps cover precision, compatibility, and large layout needs. Select any row to copy its value; bars are shown at actual size.
Working steps
Supporting steps
Semantic aliases
Aliases state relationship intent while remaining synchronized with the raw scale.
Inline
inline.xs4px- Icon to its own label
inline.sm8px- Related controls or metadata
inline.md12px- Loose inline groups
Stack
stack.xs8px- Label to supporting text
stack.sm12px- Compact stacked content
stack.md16px- Default stacked content
stack.lg24px- Groups inside a component
Inset
inset.sm16px- Compact cards and rows
inset.md24px- Default cards and panels
inset.lg32px- Spacious panels and dialogs
Layout
page-gutter.mobile16px- Mobile shell gutter
page-gutter.desktop24px- Desktop shell gutter
section.product64px- Product and mobile sections
section.marketing96px- Marketing desktop sections
workspace-gap24px- Draft-to-question separation
Component insets
Insets describe internal whitespace. Control heights, target areas, icons, and density modes live in Sizing and density.
| Element | Inset | Size or note |
|---|---|---|
| Button sm | 12px horizontal | 32px height |
| Button md | 16px horizontal | 40px height |
| Button lg | 20px horizontal | 44px height |
| Input/select | 16px horizontal | 40px default · 44px touch |
| Long-form textarea | 20px vertical · 24px horizontal | Minimum 280px current workflow baseline |
| Question card | 16px | Neutral working surface |
| General card/panel | 24px | Default inset |
| Dialog | 24px mobile / 32px from 640px | Stack actions when needed |
| Toast/banner | 12px × 16px | Message and action stay grouped |
| Navigation row | 12px × 16px | Effective target ≥44px |
| Menu row | 8px × 12px | Desktop pointer surface; touch raises rows to 44px |
| Table/list cell | 12px × 16px | Preserve scanability |
| Section panel | 24px compact / 32px spacious | One density per region |
Spacing contracts for the redesign, not finished component appearance.
Draft workspace
Draft/Starting material → Assignment → Review keeps its order, preservation, and responsive stack. At desktop review widths, the draft is the dominant column and the workbench fits the available viewport with a 460px minimum; long content scrolls inside it.
Diagram shows relationships; labels carry actual dimensions. Scroll desktop scenes horizontally on narrow screens.
Unbroken draft: manuscript lines continue through every scene. All authored text and every generated feedback or brainstorming card remain available; no line clamp or truncation.
Capacity contracts
These behavioral guarantees hold on every plan and stay independent from visual measure and spacing.
| Surface | Guarantee |
|---|---|
| Draft textarea | Never truncates or caps input client-side; no maxLength on the control |
| Saved draft | Preserved even when too large to run |
| Upload | One file; PDF, DOCX, MD, or TXT; a failed upload leaves the typed draft untouched |
| Brainstorming | May start from an empty page when an assignment exists |
| Draft feedback | Requires a nonblank draft; a short draft gets a soft notice, not a block |
They are owned by the product’s database migrations (inline-platform/supabase/migrations); interfaces render whatever those tables say and never hard-code a number.
Any surface showing a limit treats the number as data, sized for the widest realistic value in Geist Mono tabular figures.
Responsive behavior
Breakpoints follow content collision, never device names. The system stacks regions before it squeezes writing.
| Breakpoint | Value | Behavior |
|---|---|---|
| Base / mobile | — | 16px gutter and stacked flow |
sm | 640px | 24px shell gutter |
md | 768px | Roomier metadata |
lg | 1024px | Desktop progress rail and draft-led review split |
xl | 1280px | Question rail may grow toward 400px; draft remains dominant |
2xl | 1536px | Adds whitespace, not wider prose |
Container max 1200px · gutters 16/24px · 24px desktop workspace gap · reading max 680px only when room exists · flexible editor workbench up to current 920px baseline.
Rhythm and scrolling
Page hierarchy uses the shared scale. Each workflow region has one scroll owner, so actions and long drafts remain reachable.
Page hierarchy
Intro copy prepares the section.
48px Content beginsScroll ownership
- Compose
- Content scrolls; footer actions remain retained.
- Desktop review
- Draft and question rail may scroll independently.
- Mobile review
- One document flow owns scrolling.
Draft paragraph spacing and line height come from prose typography, not page-section gaps. Sections use 64px in product/mobile contexts and 96px on marketing desktop.
Rules
Use spacing to protect meaning, capacity, and concentration.
- Proximity carries meaning. Within-group gaps stay at most half of between-group gaps.
- Use the scale only. No one-off spacing or 14px/18px exceptions.
- Preserve authored content. Spacing never removes, clamps, or truncates writing.
- Stack before squeezing. Move regions into flow before making them unreadably narrow.
- Scroll, do not truncate. Give each region one scroll owner and keep all content reachable.
- Measure is width, not capacity. Preferred line length never becomes an input limit.
- Protect touch targets. Controls reach 44×44px effectively; inline prose links are the exception.
- Use space before borders. Add a neutral hairline only when distance cannot show the boundary.
- Attach headings downward. Keep more space above a heading than below it.
- Respond to content. Breakpoints activate when content collides, not by device category.