How the pieces sit on the page.

Every AI output is typeset as a note from a research desk. The anatomy is fixed; only the copy changes per feature via its i18nPrefix. Reuse it for any surface that presents a generated or curated analysis.

1. 1Eyebrow. Diamond U+25C6 as a text node in ink, then the feature eyebrow from ai.eyebrow, then a mono square stamp for Beta.
2. 2Serif title. Playfair 600, 1.55rem in the sheet, balanced wrap.
3. 3Subtitle. 0.88rem secondary, line-height 1.5.
4. 4Ledger strip. Surface-2 band, 42px, hairlines above and below. Usage badge left, live dot right.
5. 5Prose. One scale for every analyzer. h2 carries a faint diamond. Blockquote in italic serif behind a 2px ink bar. Stream deltas render as they arrive, with a blinking caret on the last block.
6. 6Sources. Collapsible, count in mono, zero-padded index, host in ink, path in tertiary, truncated at 34 characters.
7. 7Actions. One ink button plus square icon buttons. Regenerate always confirms through the dialog.
8. 8Disclaimer. 0.74rem tertiary above a hairline. Scrolls with the note; there is no fixed footer.

Banner, masthead, main, footer, then the floating layers. Main is a flex column so the footer is pushed to the bottom on short pages.

<template>
  <div class="app">
    <AnnouncementBanner />
    <Navbar />
    <main class="main-content"><slot /></main>
    <Footer />
    <ToastNotifications />
  </div>
</template>

<style scoped>
.app { min-height: 100vh; display: flex; flex-direction: column; }
.main-content { flex: 1; width: 100%; max-width: 1600px; margin: 0 auto; padding: 20px; }
</style>

Footer

• Opens with the folio rule: 3px ink, then 1px hairline 3px below.
• Masthead row: wordmark at clamp(26px, 2.6vw, 40px) and a 52ch tagline, aligned to the baseline, padding 44px top and 32px bottom, hairline under.
• Sitemap: six columns, gap 32px. Column headings are 10.5px uppercase 0.14em in ink over a hairline. Links 13.5px secondary.
• Colophon: divided segmented controls for language and theme, bylines at 12.5px tertiary with 16px round avatars, a 30px outline back-to-top.
• Under 768px the sitemap becomes an accordion with 52px toggles and the colophon reverses.

Every block on a page opens the same way: an eyebrow, a serif title, an optional "see all" link on the right, then a hairline. The heads on this site follow the pattern with a folio number added.

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border-color); margin-bottom: 24px;
}
.section-eyebrow { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); }
.section-title { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 6px; }

The portfolio page is the reference for anything ledger-like. Top to bottom:

1. Masthead row. Eyebrow with a live dot, serif page title, sector pills, and one ink button (Import) on the right.
2. Statement hero. Three or four borderless figures on a subgrid. The primary figure is 3rem serif; secondary figures are 1.75rem.
3. Ledger. Two bordered columns of label and value pairs, hairline above and below.
4. Controls row. Search box on the left, drawn radios and the view toggle on the right.
5. Rows. Position cards or a dense table. Rows separate with --border-lighter, hover tints with 6% accent.
6. AI rebalance. A research-note sheet toggle, never inline.

Gain and loss are bare coloured text at weight 600. Short positions carry a small red stamp and a red figure. Thresholds use amber for upcoming earnings and tertiary for past.

1. Head. Eyebrow, serif title, the sliding billing toggle centred beneath.
2. Plan grid. Four cells in a 1px-gap grid. Plan ink in a 2px cap; featured gets 4px plus a 4.5% tint and a square tag. Prices in 2.6rem serif with a raised half-size currency mark. Coffee line in italic serif.
3. Comparison table. Sticky first column, tier columns with a 2px ink top rule, category rows on surface-2 with 0.6rem 0.15em labels. Under 768px a segmented picker shows one tier at a time.
4. FAQ. Hairline accordion, serif questions.
5. Sticky mobile CTA. Fixed bottom bar with a hairline top, safe-area padding, slides up.

Design the phone layout on purpose. The rules that carry across pages: