Application surfaces
Inline ships on five surfaces: the product app, the marketing site, email, documents and print, and social cards. The foundations decide how Inline looks; each surface only narrows what it may use, so every artifact reads as the same hand.
Product app
The app is the reference surface. The full system applies without translation, and nothing appears here that the foundations have not defined.
| Contract | Specification |
|---|---|
| Canvas | Paper #F6F6F3 shell; white #FFFFFF for the draft, cards, menus, and dialogs |
| Theme | Light only; a dark theme requires a complete semantic remap, never inverted primitives |
| Density | Comfortable 40px controls by default; compact 32px only in secondary desktop chrome; 44px effective targets |
| Elevation | In-flow surfaces flat; raised, overlay, and dialog mark real overlap only |
| Review workspace | Draft-led 2:1 flexible split, 24px gap, question rail 320 to 400px, height max(460px, 100dvh - 304px) |
| Rhythm | 64px between product sections below the 64px app toolbar |
| Type | UI in body-md, student writing in prose, counts and timestamps in code |
| Motion | Fade plus a translate of 12px or less at 80/160/240ms, via Motion for React |
If a product task appears to need a value the foundations have not defined, that is a system gap to resolve, not a local exception to invent.
Marketing site
The audience is professors, writing centers, and institutions. The site sells with the restraint the product teaches: it shows Inline doing its work and lets evidence carry the claims.
| Contract | Specification |
|---|---|
| Band | Centered 1120px content bands on paper |
| Rhythm | 96px between desktop sections; 64px on mobile |
| Headline | One display headline per page; sections continue in h2 and below |
| Full-bleed bands | Allowed only on this surface, and only in paper or Midnight #18213B |
| Contrast sentence | The two-part contrast sentence appears at most once per screen |
| Product imagery | Real product frames or the schematic manuscript language; never restyled or invented UI |
| Photography | Allowed only here: documentary and rare, per imagery |
| CTAs | Verbs: Request institutional pricing, Get feedback |
| Motion | Within the motion tokens, same as the product |
A claim ships with its number, source, or product frame; superlatives are not a substitute for either.
Email renders in clients Inline does not control, so the surface keeps only what survives everywhere: layout, the lockup, and one dark action.
Five questions are waiting in the margin of your draft. They stay with the essay until you rerun feedback.
Open your feedback600px · white on papersystem-uiPNG · top leftink-900 cell · 4px- One column, 600px. The outer column stays square on the paper canvas; only the button cell carries the 4px control radius.
- System stack only.
system-ui, -apple-system, "Segoe UI", sans-serif; email never loads webfonts. - The lockup is a PNG.
logo/lockup-horizontal.pngat the top left, at least 96px wide. - One button per email. An ink-900 solid padded table cell with paper text; clients that ignore the radius degrade harmlessly.
- Plain-text footer. Caption-size text behind a hairline, with preferences, privacy, and unsubscribe links.
- No yellow fills. Butter Yellow reaches email only inside the lockup artwork.
- No images of text. Headlines, body copy, and buttons are live text.
Documents and print
Legal pages and shared process reports are documents first. They read at the 680px measure on paper and must survive a grayscale printer without losing meaning.
| Contract | Specification |
|---|---|
| Measure | 680px reading measure, container.reading in layout |
| Body | Geist embedded where the workflow allows; Georgia only when embedding is unreliable |
| Print styles | Hide navigation and interactive controls; keep hairlines; never truncate content |
| Redlines | Insertions underline, deletions strikethrough; color is a redundant cue, never the only one |
The archive tells curates the story of the city.
The archive tells curates the story of the city.
underline · success-600strikethrough · danger-600decoration carries the meaningSocial and OG
A link preview earns one statement, sized to survive a thumbnail. The card stays sparse on purpose; the statement does the clicking. An avatar is the standalone mark alone.
The AI that refuses to write your essay.
1200 × 630 · shown at 50%paper300px · 64px margins92px display cut · one mark · voice canon
1624324064circlelogo/mark.svg16 / 24 / 32 / 40 / 64Midnight field reaches the edge| Artifact | Specification |
|---|---|
| OG card | 1200 × 630 paper field; lockup 300px at 64px margins; one statement in a 92px display cut, up to 12ch per line, owning the frame; at most one brand-200 mark; nothing else. The statement comes from the voice canon: the refusal line by default, and Office hours end; deadlines don't for institution-facing pages |
| Avatar | The fixed-field mark at 16/24/32/40/64; the field reaches the crop and a platform may mask it into a circle; never remove the field or enlarge the square |
Surface parity
What each capability may do on each surface. Where a cell says no, the answer is layout, type, or the lockup, not a local exception.
| Capability | Product app | Marketing site | Documents and print | Social and OG | |
|---|---|---|---|---|---|
| Shadows | Per elevation: raised, overlay, dialog | None | None | None | None |
| Motion | Within motion tokens | Within motion tokens | None | None | None; static artwork |
| Butter Yellow marks | Passage marks and selection | Marks and one highlighted phrase | Only inside the lockup art, never a fill | Marks paired with a grayscale-safe cue | One mark on the OG card; the square in the avatar |
| Full-bleed color bands | No | Paper or Midnight only | No | No | No; the avatar field is logo artwork |
| Webfonts | Geist and Geist Mono | Geist and Geist Mono | Never; system stack | Geist embedded; Georgia fallback | Baked into exported artwork |
| Photography | No | Documentary only, per imagery | No | No | No |
Rules
Five surfaces, one hand. These rules keep every artifact recognizably Inline.
- One system, five dialects. A surface may narrow the foundations, never override them or invent local values.
- Full-bleed color belongs to marketing. Bands are paper or Midnight; every other surface stays on the paper canvas.
- Email trusts nothing. A 600px column, the system stack, the PNG lockup, one ink-900 button cell, and no images of text.
- Print survives grayscale. Insertions underline, deletions strikethrough, hairlines stay; color is never the only cue.
- Yellow marks; it never fills. Butter Yellow identifies a passage, a selection, or the brand, and in email it appears only inside the lockup.
- The OG card is one statement. Paper field, lockup top left, display type, at most one mark, nothing else.
- Evidence over adjectives. Marketing shows the product through real frames or the schematic language and lets numbers carry the claims.