Tome Design System

Overview

Tome's marketing site is not available at extraction time. System in absentia. The canonical URL tome.app no longer resolves to a brand surface — it serves Vercel's default deployment-not-found page instead, and that error chrome is what this DESIGN.md captures. Where a live Tome page would carry its historical AI-narrative aesthetic with cream surfaces and an editorial pacing language, the rendered surface here is closer to the generic dev-platform error pages served by Heroku, Railway, and Render when a deployment is missing.

The captured surface contains a single hairline-bordered card centered on a white canvas. Inside the card: a charcoal "404: NOT_FOUND" title with the colon and following text in a slightly lighter weight, a Menlo monospace line carrying the deployment-error code, and a second Menlo line carrying the failed deployment ID. Beneath the card sits a softly-bordered callout in Vercel-blue ({colors.link} — #0070f3) linking to Vercel's documentation. There is no hero, no navigation, no brand voltage above a CTA accent, no display tier above the 16px body text — only the default error template. This is the inverse of the dense-token capture you see on Cloudflare or Spline; the system is a deliberate placeholder rendered by the hosting provider, not the brand itself.

The typographic surface is similarly minimal. SF Pro Text carries every text surface at 16px / 400 with the system fallback stack walking through -apple-system, system-ui, "Helvetica Neue", Helvetica, sans-serif. The inline-strong emphasis ("404" in the card title) uses the same family at weight 700. Menlo carries the deployment-error code and ID at 14.72px / 400 — Vercel's default monospace for code identifiers. The page does not declare a brand typeface; the rendered surface is whatever the operating system supplies.

Key Characteristics:

• Site in absentia — tome.app returns a Vercel deployment-not-found page at extraction time; this DESIGN.md captures that error chrome rather than the historical brand surface.
• Single hairline-bordered card on a white canvas ({colors.canvas} — #ffffff) as the entire visible UI, with a second pill-bordered link callout beneath.
• Charcoal ink ({colors.ink} — #333333) carries body text; pure black ({colors.ink-deep} — #000000) carries the inline-strong "404" emphasis and the card outline.
• Single Vercel-blue voltage ({colors.link} — #0070f3) on the documentation link callout — the only chromatic element on the page.
• SF Pro Text body at 16px / 400 with no display tier; Menlo monospace at 14.72px / 400 for the deployment ID.
• Small-step radius scale — 4px on the bordered card (the dominant value, 1 captured occurrence) and 5px on the link callout. There is no large-radius tier in the captured surface.
• No shadow tier — every surface is flat against the white canvas; depth comes from the 1px hairline border alone.
• No brand identity exposed — the captured surface is identical to what every other site hosted on Vercel serves when the deployment is missing.

Colors

Text

• Ink ({colors.ink} — #333333): frequency 5. Used as text (3), border (2). The charcoal body color across the captured surface — body paragraphs, the deployment-ID monospace line, the secondary text in the documentation callout.
• Ink Deep ({colors.ink-deep} — #000000): frequency 16. Used as text (8), border (8). The card outline, the inline strong-emphasis "404" in the heading, and the deployment-code mono identifier. Pure black is used sparingly — only for emphasis and structural borders.

Brand (placeholder)

• Link ({colors.link} — #0070f3): frequency 4. Used as text (2), border (2). The Vercel documentation-link color — saturated mid-blue, the only chromatic element on the page. This is Vercel's default link color, not Tome's brand voltage; treat it as a placeholder.

Surface

• Canvas ({colors.canvas} — #ffffff): pure white, the page floor. The single surface color in the system. There is no second surface tier and no warmth tinting; the captured Vercel error template uses plain white throughout.

Hairline

• Hairline ({colors.hairline} — #000000): pure black at hairline weight. The 1px outline on the centered error card. The captured surface uses the same value as ink-deep — the page does not distinguish a separate border tone from its primary text color, which is unusual but reflects what is actually rendered.

Typography

Font Families

The system runs the platform default sans stack with SF Pro Text as the primary preference and a long fallback walking through -apple-system, system-ui, "Helvetica Neue", Helvetica, sans-serif. The monospace strip uses Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif. There is no declared brand font and no web-font request on the captured surface — every text glyph comes from the OS.

This is the Vercel default. A live Tome page would have declared its own brand typography (historical archives show a custom editorial sans paired with a serif companion), but the captured surface inherits whatever the user's operating system supplies.

Hierarchy

Principles

There is no display tier in the captured surface. The page has no h1, no h2, no h3 — only inline-strong emphasis within a 16px body paragraph. The monospace strip is the only typographic moment that differs from the default body text. This is the minimum viable type system; a live Tome page would declare a multi-step display ladder.

Note on Font Substitutes

The system stack itself is the substitute. SF Pro Text walks through to system-ui and Helvetica Neue automatically; no font installation is required. For Menlo on non-Apple platforms, the fallback walks through to Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, and Courier New before reaching the generic monospace keyword. The Vercel default ships with the longest mono fallback chain in this directory.

Layout

Spacing System

• Base unit: undeclared on the captured surface, but the rendered card uses 20px padding consistently.
• Tokens: {spacing.xs} 8px · {spacing.sm} 16px · {spacing.base} 20px · {spacing.md} 32px · {spacing.lg} 40px · {spacing.xl} 60px.
• Card internal padding: 20px (the captured value on the bordered error card).
• Vertical centering: the card sits vertically centered on the page, with the link callout floating ~40px below it.
• No section padding: the captured surface has only one section.

Grid & Container

• Max content width: the error card renders at ~679px wide on a desktop viewport, with the page itself extending to full viewport width.
• Horizontal centering: both the error card and the link callout are horizontally centered on the page floor.
• No grid: the captured surface has no multi-column layout, no card grid, no logo wall.

Rhythm

The page has no rhythm in the multi-section sense. There is one card stacked above one callout, both centered on a vertically and horizontally neutral white canvas. The vertical spacing between the two elements is the only rhythmic gesture.

Elevation

The system has no shadow tier. Every visible surface is flat against the white canvas. Depth comes from the 1px hairline border on the error card and the 1px softer border on the link callout — there are no drop shadows, no inner shadows, no tinted halos.

• Flat (no shadow): every surface.
• Hairline outline: the error card carries a 1px {colors.hairline} border at full opacity; the link callout carries a 1px {colors.link} border in the brand-blue tone.
• No modal scrim: the captured surface has no overlay or modal element.

Shapes

The radius scale is small-step only:

• {rounded.none} 0px — implicit on the page floor and any unbordered text.
• {rounded.xs} 4px — the dominant value on the captured surface. The error card uses this radius.
• {rounded.sm} 5px — the link-callout pill uses this slightly softer radius. The captured surface contains 1 occurrence each of 4px and 5px.
• {rounded.full} 9999px — declared as a fallback token but not used on the captured surface.

There is no 8-12-16px tier and no 20px+ tier. The captured surface uses the tightest two radii available and nothing larger. A live Tome page would almost certainly declare a more generous scale; the values here belong to Vercel's default error template.

Components

error-card — White {colors.canvas} fill, 1px {colors.hairline} border at full opacity, {rounded.xs} 4px radius, 20px internal padding. Holds the "404: NOT_FOUND" heading, the deployment-code line, and the deployment-ID line. The single primary surface on the captured page.

error-card-heading — Inline strong-emphasis text within the error card. "404" renders in {colors.ink-deep} pure black at {typography.body-bold} (16px / 700); the trailing ": NOT_FOUND" reverts to the body weight at the same size.

body-paragraph — Charcoal {colors.ink} text at {typography.body-md} (SF Pro Text 16px / 400). The body lines carrying "Code:" and "ID:" labels.

mono-id — Menlo monospace at 14.72px / 400 in charcoal {colors.ink}. Used for the inline deployment-code and deployment-ID identifiers. The only non-system-sans surface in the captured page.

link-callout — White {colors.canvas} fill, 1px {colors.link} border, {rounded.xs} 4-5px radius, 16x20 padding. Holds the documentation link in {colors.link} Vercel-blue. The single chromatic element on the captured surface and the only meaningful CTA on the page.

Do's and Don'ts

Do treat this DESIGN.md as a directory artifact rather than a token set worth borrowing. The captured surface is Vercel's default deployment-not-found page, not Tome's brand chrome — using these tokens to build a "Tome-style" product would produce a Vercel error page imitation rather than a narrative-presentation tool.

Do regenerate this file if Tome returns under a different URL or owner. The current file documents a moment in time; if tome.app ever resolves to a live marketing surface again, run the extraction again and replace this spec entirely.

Do preserve the {colors.link} (#0070f3) value as a placeholder rather than a brand color. The blue is Vercel's, not Tome's; substitute your own brand link color when applying this spec to any project.

Do treat the absence of a display tier as a signal that the captured surface is incomplete. A real brand DESIGN.md should carry a 4-7-step type ladder; this file has only one body size and one mono size because that is literally what the page renders.

Don't infer Tome's historical brand voltage from the captured colors. The 19 total color occurrences in the extraction belong to Vercel's error template and carry zero information about Tome's actual design language.

Don't copy the single-card layout as a marketing-page pattern. The centered hairline-bordered card is an error-page convention; replicating it as a hero treatment would produce a page that reads as broken rather than as a deliberate brand statement.

Don't use SF Pro Text as a default brand typeface based on this spec. The system stack here is the Vercel fallback, not Tome's declared family — every live page in this directory declares a brand-specific typeface (Inter, Spline Sans, FT Kunst Grotesk, Mark Pro), and a real Tome page would do the same.

Don't add this file to a peer-comparison palette. The token counts here are an order of magnitude smaller than every other live entry in the directory; including Tome in side-by-side comparisons would mislead anyone scanning the directory for live brand systems.

Known Gaps

• Entire brand surface: the canonical URL tome.app does not serve a live Tome marketing page at extraction time. Every token captured here belongs to the Vercel deployment-not-found page that the URL currently returns. The historical Tome brand chrome — cream surfaces, editorial serif companion, slide-thumbnail rhythms — is not represented.
• No hero, no navigation, no footer: the captured surface has none of the structural blocks a live marketing page would carry.
• No display typography: there is no h1, h2, or display tier. The largest visible text is 16px body emphasis.
• No brand voltage: the only chromatic element on the captured surface is the Vercel-default link blue (#0070f3), which belongs to the hosting provider's error template rather than to Tome's brand.
• No component matrix: the captured surface contains five visual elements (card, heading emphasis, body paragraph, mono identifier, link callout). A live brand page would expose dozens of components — navigation, buttons, cards, inputs, dropdowns, footers.
• Historical asset references not preserved: prior versions of tome.app from 2023-2024 carried a substantial design system that is documented in web-archive snapshots but is not present in the live extraction. If the brand returns or the canonical URL changes hands, this file should be replaced entirely rather than amended.
• Site status: the deployment-not-found state may itself change without notice — the URL could resolve to a redirect, a new owner's landing page, a third-party squat, or a fresh Tome page at any time. The "lastUpdated" field reflects the date this extraction was run, not the date the brand site went offline.