From 1bc4ab4b60b264dcea7f529c2c5a8e559b5330b3 Mon Sep 17 00:00:00 2001
From: James Morton <james.morton@quackback.io>
Date: Sat, 31 Oct 2026 12:41:34 +0000
Subject: [PATCH] feat(design): type with character, and the header shows the
 logo a design chooses

A design can now set its headline scale (standard, large or display),
tight heading tracking, upper-case headlines and upper-case labels for
the menu and buttons, and set a phrase of a headline apart in the accent
colour or highlighted. The accent colour is moved until it reads on the
band. Absent choices read as today's type.

The header now follows the design's logo display: a wordmark file, with
its dark file in dark mode; the mark alone; or, new, the name set in the
heading font as a wordmark for brands without a logo file. A wordmark
with no file yet shows the mark and name. The admin preview follows the
draft's logo.
---
 .../settings/appearance/use-design-draft.ts   |   1 +
 .../public/__tests__/portal-band.test.tsx     |  31 +++++
 .../__tests__/portal-header-logo.test.tsx     | 131 ++++++++++++++++++
 .../feedback/feedback-header-animated.tsx     |   2 +
 .../components/public/home/home-blocks.tsx    |   1 +
 .../web/src/components/public/portal-band.tsx |  31 ++++-
 .../src/components/public/portal-header.tsx   |  73 +++++++---
 .../public/portal-preview-design.ts           |  39 +++++-
 .../public/portal-preview-listener.tsx        |  17 ++-
 .../public/preview-draft-context.tsx          |  13 +-
 .../__tests__/design.service.db.test.ts       |   2 +-
 .../design/__tests__/components.test.ts       |  54 ++++++++
 .../design/__tests__/design-view.test.ts      |  20 +++
 .../design/__tests__/fixtures/kiln.json       |  11 +-
 .../design/__tests__/fixtures/orbit.json      |  12 +-
 .../design/__tests__/fixtures/plume.json      |   6 +-
 .../design/__tests__/reference-brands.test.ts |  24 +++-
 .../shared/design/__tests__/resolve.test.ts   |   4 +-
 .../design/__tests__/stored-design.test.ts    |   4 +-
 .../lib/shared/design/__tests__/view.test.ts  |  25 ++++
 apps/web/src/lib/shared/design/components.ts  |  50 +++++++
 apps/web/src/lib/shared/design/design-view.ts |  18 ++-
 apps/web/src/lib/shared/design/options.ts     |  11 +-
 apps/web/src/lib/shared/design/parts.ts       |   9 +-
 apps/web/src/lib/shared/design/resolve.ts     |   2 +-
 apps/web/src/lib/shared/design/schema.ts      |  18 ++-
 apps/web/src/lib/shared/design/view.ts        |  14 +-
 27 files changed, 572 insertions(+), 51 deletions(-)
 create mode 100644 apps/web/src/components/public/__tests__/portal-header-logo.test.tsx

diff --git a/apps/web/src/components/admin/settings/appearance/use-design-draft.ts b/apps/web/src/components/admin/settings/appearance/use-design-draft.ts
index bf01effb6e..3f5e5e5e49 100644
--- a/apps/web/src/components/admin/settings/appearance/use-design-draft.ts
+++ b/apps/web/src/components/admin/settings/appearance/use-design-draft.ts
@@ -149,6 +149,7 @@ export function useDesignDraft() {
       nav: view.nav,
       vocabulary: view.vocabulary,
       copy: view.feedback.copy,
+      logo: view.logo,
     }
   }, [design])
 
diff --git a/apps/web/src/components/public/__tests__/portal-band.test.tsx b/apps/web/src/components/public/__tests__/portal-band.test.tsx
index c7229177b7..0c38d6dcc5 100644
--- a/apps/web/src/components/public/__tests__/portal-band.test.tsx
+++ b/apps/web/src/components/public/__tests__/portal-band.test.tsx
@@ -81,4 +81,35 @@ describe('PortalBand', () => {
     mount(null)
     expect(screen.queryByRole('heading')).toBeNull()
   })
+
+  it('sets the accent phrase apart, in the visitor’s language', () => {
+    root.portalDesign = view({
+      title: { en: 'Charge anywhere. Shape what’s next.', de: 'Überall laden. Mitgestalten.' },
+      subtitle: {},
+      accent: { style: 'colour', text: { en: 'Shape what’s next.', de: 'Mitgestalten.' } },
+    })
+    mount()
+    const accent = screen.getByText('Mitgestalten.')
+    expect(accent.getAttribute('data-qb-accent')).toBe('colour')
+    expect(accent.className).toContain('var(--qb-band-accent)')
+    expect(screen.getByRole('heading').textContent).toBe('Überall laden. Mitgestalten.')
+  })
+
+  it('highlights a phrase, and leaves a title alone that does not hold it', () => {
+    root.portalDesign = view({
+      title: { en: 'Make it work harder' },
+      subtitle: {},
+      accent: { style: 'highlight', text: { en: 'harder' } },
+    })
+    mount()
+    expect(screen.getByText('harder').className).toContain('var(--qb-band-highlight)')
+    cleanup()
+    root.portalDesign = view({
+      title: { en: 'Make it work' },
+      subtitle: {},
+      accent: { style: 'highlight', text: { en: 'harder' } },
+    })
+    mount()
+    expect(screen.getByRole('heading').innerHTML).toBe('Make it work')
+  })
 })
diff --git a/apps/web/src/components/public/__tests__/portal-header-logo.test.tsx b/apps/web/src/components/public/__tests__/portal-header-logo.test.tsx
new file mode 100644
index 0000000000..26f2f570e8
--- /dev/null
+++ b/apps/web/src/components/public/__tests__/portal-header-logo.test.tsx
@@ -0,0 +1,131 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { IntlProvider } from 'react-intl'
+import {
+  RouterProvider,
+  createMemoryHistory,
+  createRootRouteWithContext,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router'
+import { DEFAULT_FEATURE_FLAGS } from '@/lib/shared/types/settings'
+
+vi.mock('next-themes', () => ({ useTheme: () => ({ theme: 'system', setTheme: vi.fn() }) }))
+vi.mock('@/components/auth/auth-popover-context', () => ({
+  useAuthPopoverSafe: () => ({ openAuthPopover: vi.fn() }),
+}))
+vi.mock('@/lib/server/functions/conversation', () => ({ getMyConversationsFn: vi.fn() }))
+vi.mock('@/lib/client/hooks/use-auth-broadcast', () => ({ useAuthBroadcast: () => {} }))
+vi.mock('@/lib/client/auth-client', () => ({ signOut: vi.fn() }))
+vi.mock('@/components/notifications', () => ({ NotificationBell: () => null }))
+vi.mock('@/components/shared/user-stats', () => ({ UserStatsBar: () => null }))
+
+const { PortalHeader } = await import('../portal-header')
+const { PreviewLogoContext } = await import('../preview-draft-context')
+
+afterEach(cleanup)
+
+type Logo = {
+  display: 'mark_and_name' | 'mark' | 'wordmark' | 'name'
+  name: string | null
+  wordmark: { light: string | null; dark: string | null }
+}
+
+const design = (logo: Partial<Logo>) => ({
+  engine: 'v2',
+  attributes: {},
+  logo: { display: 'mark_and_name', name: null, wordmark: { light: null, dark: null }, ...logo },
+})
+
+async function mount(portalDesign?: unknown, preview?: Logo) {
+  const rootRoute = createRootRouteWithContext<object>()({
+    beforeLoad: () => ({
+      session: null,
+      settings: { featureFlags: DEFAULT_FEATURE_FLAGS, portalDesign: portalDesign as never },
+      registeredAuthProviders: [],
+    }),
+    component: () => (
+      <PreviewLogoContext.Provider value={preview}>
+        <PortalHeader orgName="Harbor" userRole="user" />
+      </PreviewLogoContext.Provider>
+    ),
+  })
+  const home = createRoute({ getParentRoute: () => rootRoute, path: '/' })
+  const router = createRouter({
+    routeTree: rootRoute.addChildren([home]),
+    history: createMemoryHistory({ initialEntries: ['/'] }),
+    context: {},
+  })
+  const view = render(
+    <QueryClientProvider client={new QueryClient()}>
+      <IntlProvider locale="en" messages={{}} onError={() => {}}>
+        <RouterProvider router={router} />
+      </IntlProvider>
+    </QueryClientProvider>
+  )
+  await waitFor(() => expect(view.container.querySelector('[data-qb-part=logo]')).not.toBeNull())
+  return view.container.querySelector('[data-qb-part=logo]')!
+}
+
+describe('the header logo a design chooses', () => {
+  it('shows the mark and the workspace name by default, and on the legacy theme', async () => {
+    const logo = await mount()
+    expect(logo.textContent).toBe('HHarbor')
+  })
+
+  it('shows the wordmark file, with its dark file in dark mode', async () => {
+    const logo = await mount(
+      design({
+        display: 'wordmark',
+        wordmark: { light: '/api/storage/logos/ink.svg', dark: '/api/storage/logos/paper.svg' },
+      })
+    )
+    const files = [...logo.querySelectorAll('img')]
+    expect(files.map((img) => [img.getAttribute('src'), img.getAttribute('alt')])).toEqual([
+      ['/api/storage/logos/ink.svg', 'Harbor'],
+      ['/api/storage/logos/paper.svg', 'Harbor'],
+    ])
+    expect(files[0]!.className).toContain('dark:hidden')
+    expect(files[1]!.className).toContain('dark:block')
+    expect(logo.textContent).toBe('')
+  })
+
+  it('keeps the one wordmark file in dark mode when there is no dark file', async () => {
+    const logo = await mount(
+      design({ display: 'wordmark', wordmark: { light: '/api/storage/logos/ink.svg', dark: null } })
+    )
+    const files = [...logo.querySelectorAll('img')]
+    expect(files).toHaveLength(1)
+    expect(files[0]!.className).not.toContain('dark:hidden')
+  })
+
+  it('falls back to the mark and name while a wordmark has no file', async () => {
+    const logo = await mount(design({ display: 'wordmark' }))
+    expect(logo.getAttribute('data-qb-logo')).toBe('mark_and_name')
+    expect(logo.textContent).toBe('HHarbor')
+  })
+
+  it('sets the name as a wordmark in the heading font, without the mark', async () => {
+    const logo = await mount(design({ display: 'name', name: 'Harbor & Pine' }))
+    const name = logo.querySelector('.portal-header__name')!
+    expect(logo.textContent).toBe('Harbor & Pine')
+    expect(name.className).toContain('[font-family:var(--qb-font-heading)]')
+    expect(name.className).not.toContain('hidden')
+  })
+
+  it('shows the mark alone for mark', async () => {
+    const logo = await mount(design({ display: 'mark' }))
+    expect(logo.textContent).toBe('H')
+  })
+
+  it('follows the draft’s logo in the preview', async () => {
+    const logo = await mount(design({ display: 'mark' }), {
+      display: 'name',
+      name: 'Draft name',
+      wordmark: { light: null, dark: null },
+    })
+    expect(logo.textContent).toBe('Draft name')
+  })
+})
diff --git a/apps/web/src/components/public/feedback/feedback-header-animated.tsx b/apps/web/src/components/public/feedback/feedback-header-animated.tsx
index d12c1fd414..e3d41e1746 100644
--- a/apps/web/src/components/public/feedback/feedback-header-animated.tsx
+++ b/apps/web/src/components/public/feedback/feedback-header-animated.tsx
@@ -541,6 +541,7 @@ export function FeedbackHeaderAnimated({
                   type="button"
                   variant="ghost"
                   size="sm"
+                  data-qb-label=""
                   onClick={handleCancel}
                   disabled={createPost.isPending}
                 >
@@ -548,6 +549,7 @@ export function FeedbackHeaderAnimated({
                 </Button>
                 <Button
                   size="sm"
+                  data-qb-label=""
                   onClick={handleSubmit}
                   disabled={createPost.isPending || !canSubmit}
                   title={
diff --git a/apps/web/src/components/public/home/home-blocks.tsx b/apps/web/src/components/public/home/home-blocks.tsx
index 97b6da66cd..d1b554c122 100644
--- a/apps/web/src/components/public/home/home-blocks.tsx
+++ b/apps/web/src/components/public/home/home-blocks.tsx
@@ -199,6 +199,7 @@ function ComposerBlock({ block, index }: { block: HomeBlock; index: number }) {
         />
         <button
           type="submit"
+          data-qb-label=""
           className="shrink-0 rounded-full px-3 py-1.5 text-sm font-medium text-[var(--qb-accent-text,var(--primary))] hover:bg-muted"
         >
           {copy.submit ?? intl.formatMessage(homeMessages.composerContinue)}
diff --git a/apps/web/src/components/public/portal-band.tsx b/apps/web/src/components/public/portal-band.tsx
index e5097c82bd..1b96798509 100644
--- a/apps/web/src/components/public/portal-band.tsx
+++ b/apps/web/src/components/public/portal-band.tsx
@@ -1,5 +1,6 @@
 import { useIntl } from 'react-intl'
 import { useRouteContext } from '@tanstack/react-router'
+import type { ReactNode } from 'react'
 import { usePreviewHeadline, usePreviewHome } from './preview-draft-context'
 
 /** Text in the visitor's language, else its base language, else English, else any. */
@@ -12,6 +13,31 @@ export function textForLocale(
   return text[locale] || text[base] || text.en || Object.values(text).find(Boolean)
 }
 
+const ACCENT_CLASS = {
+  colour: 'text-[var(--qb-band-accent)]',
+  highlight:
+    'px-[0.08em] [box-decoration-break:clone] [background:linear-gradient(transparent_58%,var(--qb-band-highlight)_58%,var(--qb-band-highlight)_92%,transparent_92%)]',
+} as const
+
+/** The title with its accent phrase set apart, when the title holds it. */
+function accented(
+  title: string,
+  phrase: string | undefined,
+  style: keyof typeof ACCENT_CLASS | undefined
+): ReactNode {
+  const at = phrase && style ? title.indexOf(phrase) : -1
+  if (at < 0) return title
+  return (
+    <>
+      {title.slice(0, at)}
+      <span data-qb-accent={style} className={ACCENT_CLASS[style!]}>
+        {phrase}
+      </span>
+      {title.slice(at + phrase!.length)}
+    </>
+  )
+}
+
 /**
  * The band at the top of the feedback page or Home, behind its headline. Its look
  * comes from the design's band tokens and data-qb-band. With no headline
@@ -35,6 +61,7 @@ export function PortalBand({ page = 'feedback' }: { page?: 'feedback' | 'home' }
         : design.feedback.headline
   const title = textForLocale(headline?.title, intl.locale)
   const subtitle = textForLocale(headline?.subtitle, intl.locale)
+  const phrase = textForLocale(headline?.accent?.text, intl.locale)
   if (!title && !subtitle) return null
   return (
     <section
@@ -48,9 +75,9 @@ export function PortalBand({ page = 'feedback' }: { page?: 'feedback' | 'home' }
           {title && (
             <h1
               data-qb-part="headline"
-              className="text-2xl font-semibold text-[var(--qb-band-ink)] sm:text-3xl"
+              className="font-semibold text-[var(--qb-band-ink)] [font-size:var(--qb-headline-size)] [line-height:var(--qb-headline-leading)]"
             >
-              {title}
+              {accented(title, phrase, headline?.accent?.style)}
             </h1>
           )}
           {subtitle && (
diff --git a/apps/web/src/components/public/portal-header.tsx b/apps/web/src/components/public/portal-header.tsx
index 5f6b4e74da..f8ae737f58 100644
--- a/apps/web/src/components/public/portal-header.tsx
+++ b/apps/web/src/components/public/portal-header.tsx
@@ -44,7 +44,7 @@ import { removeViewerScopedPortalQueries } from '@/lib/client/queries/portal'
 import { useAuthBroadcast } from '@/lib/client/hooks/use-auth-broadcast'
 import { NotificationBell } from '@/components/notifications'
 import { useSessionContext, useWorkspaceSettings } from '@/lib/client/hooks/use-root-context'
-import { usePreviewDesignAttributes } from './preview-draft-context'
+import { usePreviewDesignAttributes, usePreviewLogo } from './preview-draft-context'
 import { PORTAL_LANDING } from '@/lib/shared/design/paths'
 
 interface PortalHeaderProps {
@@ -263,6 +263,7 @@ export function PortalHeader({
           <Button
             variant={showSignup ? 'ghost' : 'default'}
             size="sm"
+            data-qb-label=""
             onClick={() =>
               soleOidcProviderId ? redirectToSoleProvider() : openAuthPopover({ mode: 'login' })
             }
@@ -272,6 +273,7 @@ export function PortalHeader({
           {showSignup && (
             <Button
               size="sm"
+              data-qb-label=""
               onClick={() =>
                 soleOidcProviderId ? redirectToSoleProvider() : openAuthPopover({ mode: 'signup' })
               }
@@ -292,29 +294,68 @@ export function PortalHeader({
     (savedDesign?.engine === 'v2' ? savedDesign.attributes['data-qb-header'] : undefined) ??
     'stacked'
 
+  // How the design shows the brand; in the admin preview, the draft's.
+  const previewLogo = usePreviewLogo()
+  const designLogo = previewLogo ?? (savedDesign?.engine === 'v2' ? savedDesign.logo : undefined)
+  const brandName = designLogo?.name || orgName
+  const wordmark = designLogo?.wordmark
+  // A wordmark without a file shows the mark and name, as before one is uploaded.
+  const display =
+    designLogo?.display === 'wordmark' && !wordmark?.light && !wordmark?.dark
+      ? 'mark_and_name'
+      : (designLogo?.display ?? 'mark_and_name')
+
+  const mark = orgLogo ? (
+    <img src={orgLogo} alt={orgName} className="h-8 w-8 [border-radius:calc(var(--radius)*0.6)]" />
+  ) : (
+    <div className="h-8 w-8 [border-radius:calc(var(--radius)*0.6)] bg-primary flex items-center justify-center text-primary-foreground font-semibold">
+      {nameInitial(orgName)}
+    </div>
+  )
   const logo = (
     <Link
       to={PORTAL_LANDING}
       className="portal-header__logo flex items-center gap-2"
       data-qb-part="logo"
+      data-qb-logo={display}
     >
-      {orgLogo ? (
-        <img
-          src={orgLogo}
-          alt={orgName}
-          className="h-8 w-8 [border-radius:calc(var(--radius)*0.6)]"
-        />
+      {display === 'wordmark' ? (
+        <>
+          {/* The light file shows in dark mode too when there is no dark one. */}
+          <img
+            src={(wordmark?.light ?? wordmark?.dark)!}
+            alt={brandName}
+            className={`h-8 w-auto max-w-[12rem] object-contain ${wordmark?.dark && wordmark.light ? 'dark:hidden' : ''}`}
+          />
+          {wordmark?.dark && wordmark.light ? (
+            <img
+              src={wordmark.dark}
+              alt={brandName}
+              className="hidden h-8 w-auto max-w-[12rem] object-contain dark:block"
+            />
+          ) : null}
+        </>
+      ) : display === 'name' ? (
+        // The name as a wordmark: set in the heading font, and shown on phones too.
+        <span
+          title={brandName}
+          className="portal-header__name max-w-[18ch] truncate text-xl leading-none text-[var(--header-foreground)] [font-family:var(--qb-font-heading)] [font-weight:var(--qb-heading-weight)] [letter-spacing:var(--qb-heading-tracking)]"
+        >
+          {brandName}
+        </span>
       ) : (
-        <div className="h-8 w-8 [border-radius:calc(var(--radius)*0.6)] bg-primary flex items-center justify-center text-primary-foreground font-semibold">
-          {nameInitial(orgName)}
-        </div>
+        <>
+          {mark}
+          {display === 'mark_and_name' ? (
+            <span
+              title={brandName}
+              className="portal-header__name font-semibold hidden sm:block max-w-[18ch] truncate text-[var(--header-foreground)]"
+            >
+              {brandName}
+            </span>
+          ) : null}
+        </>
       )}
-      <span
-        title={orgName}
-        className="portal-header__name font-semibold hidden sm:block max-w-[18ch] truncate text-[var(--header-foreground)]"
-      >
-        {orgName}
-      </span>
     </Link>
   )
   const navigation = (
diff --git a/apps/web/src/components/public/portal-preview-design.ts b/apps/web/src/components/public/portal-preview-design.ts
index 27cf5cc708..d293601e9c 100644
--- a/apps/web/src/components/public/portal-preview-design.ts
+++ b/apps/web/src/components/public/portal-preview-design.ts
@@ -6,10 +6,16 @@
  * shared code into a chunk of its own.
  */
 
-import type { PortalWords } from '@/lib/shared/design/view'
+import type { DesignLogo, PortalWords } from '@/lib/shared/design/view'
+
+type TextByLocale = Record<string, string>
 
 /** A page headline by locale; the same shape the preview context carries. */
-type Headline = { title: Record<string, string>; subtitle: Record<string, string> } | null
+type Headline = {
+  title: TextByLocale
+  subtitle: TextByLocale
+  accent?: { style: 'colour' | 'highlight'; text: TextByLocale }
+} | null
 
 /** A draft's Home: its headline and blocks, as the design stores them. */
 type Home = { headline: Headline; blocks: Array<Record<string, unknown>> }
@@ -32,6 +38,24 @@ export interface DesignPreview {
   words: PortalWords | null
   /** The draft's own wording, by language. */
   copy: Partial<Record<'prompt' | 'submit' | 'emptyTitle', Record<string, string>>> | null
+  logo: DesignLogo | null
+}
+
+const LOGO_DISPLAYS = new Set(['mark_and_name', 'mark', 'wordmark', 'name'])
+/** A wordmark comes from the workspace's own storage. */
+const STORED_FILE = /^\/api\/storage\/[\w./-]+$/
+
+function readLogo(value: unknown): DesignLogo | null {
+  if (!value || typeof value !== 'object') return null
+  const { display, name, wordmark } = value as Record<string, unknown>
+  if (!LOGO_DISPLAYS.has(display as string)) return null
+  const file = (url: unknown) => (typeof url === 'string' && STORED_FILE.test(url) ? url : null)
+  const marks = (wordmark ?? {}) as Record<string, unknown>
+  return {
+    display: display as DesignLogo['display'],
+    name: typeof name === 'string' ? name.slice(0, 60) : null,
+    wordmark: { light: file(marks.light), dark: file(marks.dark) },
+  }
 }
 
 const COPY_FIELDS = ['prompt', 'submit', 'emptyTitle'] as const
@@ -108,8 +132,12 @@ const isTextByLocale = (value: unknown): value is Record<string, string> =>
 
 function readHeadline(value: unknown): Headline {
   if (!value || typeof value !== 'object') return null
-  const { title, subtitle } = value as Record<string, unknown>
-  return isTextByLocale(title) && isTextByLocale(subtitle) ? { title, subtitle } : null
+  const { title, subtitle, accent } = value as Record<string, unknown>
+  if (!isTextByLocale(title) || !isTextByLocale(subtitle)) return null
+  const { style, text } = (accent ?? {}) as Record<string, unknown>
+  return (style === 'colour' || style === 'highlight') && isTextByLocale(text)
+    ? { title, subtitle, accent: { style, text } }
+    : { title, subtitle }
 }
 
 const DESIGN_ATTRIBUTE = /^data-qb-[a-z]+$/
@@ -118,7 +146,7 @@ const DESIGN_VALUE = /^[a-z_]+$/
 /** The message's design, keeping only the structural attributes a design sets. */
 export function readDesignPreview(value: unknown): DesignPreview | null {
   if (!value || typeof value !== 'object') return null
-  const { css, attributes, fontIds, headline, home, nav, vocabulary, copy } = value as Record<
+  const { css, attributes, fontIds, headline, home, nav, vocabulary, copy, logo } = value as Record<
     string,
     unknown
   >
@@ -138,6 +166,7 @@ export function readDesignPreview(value: unknown): DesignPreview | null {
     nav: readNav(nav),
     words: readWords(vocabulary),
     copy: readCopy(copy),
+    logo: readLogo(logo),
   }
 }
 
diff --git a/apps/web/src/components/public/portal-preview-listener.tsx b/apps/web/src/components/public/portal-preview-listener.tsx
index 4eddb9657a..65068d9491 100644
--- a/apps/web/src/components/public/portal-preview-listener.tsx
+++ b/apps/web/src/components/public/portal-preview-listener.tsx
@@ -4,6 +4,7 @@ import { PortalWordsIntl } from '@/lib/client/hooks/use-intl-setup'
 import {
   PreviewDraftProvider,
   PreviewAttributesContext,
+  PreviewLogoContext,
   PreviewHeadlineContext,
   PreviewPagesContext,
   FeedCopyContext,
@@ -149,13 +150,15 @@ export function PortalPreviewProvider({
       <PreviewHeadlineContext.Provider value={design ? design.headline : undefined}>
         <PreviewPagesContext.Provider value={pages}>
           <PreviewAttributesContext.Provider value={design?.attributes}>
-            <DraftCopy copy={design?.copy}>
-              {design?.words ? (
-                <PortalWordsIntl words={design.words}>{children}</PortalWordsIntl>
-              ) : (
-                children
-              )}
-            </DraftCopy>
+            <PreviewLogoContext.Provider value={design?.logo ?? undefined}>
+              <DraftCopy copy={design?.copy}>
+                {design?.words ? (
+                  <PortalWordsIntl words={design.words}>{children}</PortalWordsIntl>
+                ) : (
+                  children
+                )}
+              </DraftCopy>
+            </PreviewLogoContext.Provider>
           </PreviewAttributesContext.Provider>
         </PreviewPagesContext.Provider>
       </PreviewHeadlineContext.Provider>
diff --git a/apps/web/src/components/public/preview-draft-context.tsx b/apps/web/src/components/public/preview-draft-context.tsx
index f9cf6d936e..00f47cf1fb 100644
--- a/apps/web/src/components/public/preview-draft-context.tsx
+++ b/apps/web/src/components/public/preview-draft-context.tsx
@@ -1,6 +1,7 @@
 import { createContext, useContext, useMemo, type ReactNode } from 'react'
 import { useIntl } from 'react-intl'
 import type { PortalDesign } from '@/lib/shared/design/schema'
+import type { DesignLogo } from '@/lib/shared/design/view'
 import type { PortalNavConfig, PortalWelcomeCard } from '@/lib/shared/types/settings'
 
 /**
@@ -84,10 +85,7 @@ export function usePreviewCss(): string | undefined {
 }
 
 /** A draft design's page headline: undefined outside a design preview, null when it has none. */
-export type PreviewHeadline = {
-  title: Record<string, string>
-  subtitle: Record<string, string>
-} | null
+export type PreviewHeadline = NonNullable<PortalDesign['pages']['feedback']['headline']> | null
 
 export const PreviewHeadlineContext = createContext<PreviewHeadline | undefined>(undefined)
 
@@ -140,6 +138,13 @@ export function useFeedCopy(): { prompt?: string; submit?: string; emptyTitle?:
   )
 }
 
+export const PreviewLogoContext = createContext<DesignLogo | undefined>(undefined)
+
+/** A draft design's logo, or undefined (always, outside a design preview). */
+export function usePreviewLogo(): DesignLogo | undefined {
+  return useContext(PreviewLogoContext)
+}
+
 export const PreviewAttributesContext = createContext<Record<string, string> | undefined>(undefined)
 
 /** A draft design's structural attributes, or undefined (always, outside a design preview). */
diff --git a/apps/web/src/lib/server/domains/design/__tests__/design.service.db.test.ts b/apps/web/src/lib/server/domains/design/__tests__/design.service.db.test.ts
index d8231f97c5..b47366194d 100644
--- a/apps/web/src/lib/server/domains/design/__tests__/design.service.db.test.ts
+++ b/apps/web/src/lib/server/domains/design/__tests__/design.service.db.test.ts
@@ -174,7 +174,7 @@ describe('a design saved by a newer build', () => {
     const doc = structuredClone(stored) as ReturnType<typeof defaultDesign>
     return {
       ...doc,
-      brand: { ...doc.brand, logo: { ...doc.brand.logo, display: 'name', tagline: 'Hi' } },
+      brand: { ...doc.brand, logo: { ...doc.brand.logo, display: 'banner', tagline: 'Hi' } },
       layout: { ...doc.layout, bandShape: 'panel' },
     }
   }
diff --git a/apps/web/src/lib/shared/design/__tests__/components.test.ts b/apps/web/src/lib/shared/design/__tests__/components.test.ts
index 183570cea9..0b21d68155 100644
--- a/apps/web/src/lib/shared/design/__tests__/components.test.ts
+++ b/apps/web/src/lib/shared/design/__tests__/components.test.ts
@@ -55,6 +55,60 @@ describe('size tokens of the default design', () => {
   })
 })
 
+describe('a headline’s accent phrase', () => {
+  it('is the brand colour where it reads, and readable on a band of the brand colour', () => {
+    const plain = resolveDesign(design((d) => (d.brand.light.accent = '#0f766e'))).tokens.light
+    expect(plain['--qb-band-accent']).toBe('#0f766e')
+    const filled = resolveDesign(
+      design((d) => {
+        d.brand.light.accent = '#0f766e'
+        d.layout.band = 'brand'
+      })
+    ).tokens.light
+    const [accent, band] = [filled['--qb-band-accent']!, filled['--qb-band-bg']!]
+    expect(contrastRatio(accent, band)).toBeGreaterThanOrEqual(3)
+  })
+})
+
+describe('type style', () => {
+  it('keeps today’s headline size, tracking and case', () => {
+    const { tokens } = resolveDesign(design())
+    expect(tokens.base).toMatchObject({
+      '--qb-headline-size': 'clamp(1.5rem, 1.25rem + 1vw, 1.875rem)',
+      '--qb-heading-tracking': '-0.02em',
+      '--qb-headline-case': 'none',
+      '--qb-label-case': 'none',
+      '--qb-label-tracking': 'normal',
+    })
+  })
+
+  it('sets display headlines large, tight and upper case, and spaces upper-case labels', () => {
+    const { tokens } = resolveDesign(
+      design((d) => {
+        Object.assign(d.brand.fonts, {
+          scale: 'display',
+          tracking: 'tight',
+          headlineCase: 'upper',
+          labelCase: 'upper',
+        })
+      })
+    )
+    expect(tokens.base).toMatchObject({
+      '--qb-headline-size': 'clamp(2.25rem, 1.2rem + 4.6vw, 4.75rem)',
+      '--qb-headline-leading': '1.02',
+      '--qb-heading-tracking': '-0.035em',
+      '--qb-headline-case': 'uppercase',
+      '--qb-label-case': 'uppercase',
+      '--qb-label-tracking': '0.06em',
+    })
+  })
+
+  it('sizes large between the two', () => {
+    const { tokens } = resolveDesign(design((d) => (d.brand.fonts.scale = 'large')))
+    expect(tokens.base['--qb-headline-size']).toBe('clamp(2rem, 1.5rem + 2.2vw, 3rem)')
+  })
+})
+
 describe('shape and layout choices', () => {
   it('squares every corner for sharp', () => {
     const { tokens } = resolveDesign(design((d) => (d.shape.corners = 'sharp')))
diff --git a/apps/web/src/lib/shared/design/__tests__/design-view.test.ts b/apps/web/src/lib/shared/design/__tests__/design-view.test.ts
index 11f2243553..dedccb6180 100644
--- a/apps/web/src/lib/shared/design/__tests__/design-view.test.ts
+++ b/apps/web/src/lib/shared/design/__tests__/design-view.test.ts
@@ -34,4 +34,24 @@ describe('designView', () => {
       subtitle: {},
     })
   })
+
+  it('carries how the header shows the brand, with its wordmark files', () => {
+    const doc = defaultDesign()
+    doc.brand.logo = {
+      ...doc.brand.logo,
+      display: 'wordmark',
+      wordmark: { light: { key: 'logos/ink.svg' }, dark: null },
+    }
+    expect(designView(doc, 1).logo).toEqual({
+      display: 'wordmark',
+      name: null,
+      wordmark: { light: '/api/storage/logos/ink.svg', dark: null },
+    })
+  })
+
+  it('carries a name the header shows in place of the workspace’s', () => {
+    const doc = defaultDesign()
+    doc.brand.logo = { ...doc.brand.logo, display: 'name', name: 'Harbor & Pine' }
+    expect(designView(doc, 1).logo).toMatchObject({ display: 'name', name: 'Harbor & Pine' })
+  })
 })
diff --git a/apps/web/src/lib/shared/design/__tests__/fixtures/kiln.json b/apps/web/src/lib/shared/design/__tests__/fixtures/kiln.json
index 1d5c25ea0d..d32209f26f 100644
--- a/apps/web/src/lib/shared/design/__tests__/fixtures/kiln.json
+++ b/apps/web/src/lib/shared/design/__tests__/fixtures/kiln.json
@@ -25,7 +25,10 @@
         "kind": "bundled",
         "id": "inter"
       },
-      "headingWeight": 700
+      "headingWeight": 700,
+      "scale": "display",
+      "tracking": "tight",
+      "headlineCase": "upper"
     },
     "logo": {
       "mark": {
@@ -75,6 +78,12 @@
         },
         "subtitle": {
           "en": "Ideas from players shape every update."
+        },
+        "accent": {
+          "style": "colour",
+          "text": {
+            "en": "next season"
+          }
         }
       },
       "welcome": {
diff --git a/apps/web/src/lib/shared/design/__tests__/fixtures/orbit.json b/apps/web/src/lib/shared/design/__tests__/fixtures/orbit.json
index d4f4bca4df..644bd4d93f 100644
--- a/apps/web/src/lib/shared/design/__tests__/fixtures/orbit.json
+++ b/apps/web/src/lib/shared/design/__tests__/fixtures/orbit.json
@@ -16,7 +16,9 @@
         "kind": "bundled",
         "id": "manrope"
       },
-      "headingWeight": 700
+      "headingWeight": 700,
+      "scale": "large",
+      "labelCase": "upper"
     },
     "logo": {
       "mark": {
@@ -31,7 +33,7 @@
         "light": null,
         "dark": null
       },
-      "display": "mark_and_name",
+      "display": "name",
       "name": "orbit"
     },
     "favicon": {
@@ -65,6 +67,12 @@
         },
         "subtitle": {
           "en": "What we are shipping, what is next, and how it is running."
+        },
+        "accent": {
+          "style": "highlight",
+          "text": {
+            "en": "Orbit"
+          }
         }
       },
       "blocks": [
diff --git a/apps/web/src/lib/shared/design/__tests__/fixtures/plume.json b/apps/web/src/lib/shared/design/__tests__/fixtures/plume.json
index 48c6314fcd..cb464f52e2 100644
--- a/apps/web/src/lib/shared/design/__tests__/fixtures/plume.json
+++ b/apps/web/src/lib/shared/design/__tests__/fixtures/plume.json
@@ -17,7 +17,11 @@
         "kind": "bundled",
         "id": "dm-sans"
       },
-      "headingWeight": 500
+      "headingWeight": 500,
+      "tracking": "normal",
+      "headlineCase": "sentence",
+      "labelCase": "sentence",
+      "scale": "standard"
     },
     "logo": {
       "mark": {
diff --git a/apps/web/src/lib/shared/design/__tests__/reference-brands.test.ts b/apps/web/src/lib/shared/design/__tests__/reference-brands.test.ts
index e837f4bed4..794780f482 100644
--- a/apps/web/src/lib/shared/design/__tests__/reference-brands.test.ts
+++ b/apps/web/src/lib/shared/design/__tests__/reference-brands.test.ts
@@ -8,20 +8,30 @@
 import { describe, expect, it } from 'vitest'
 import { BLOCK_WIDTHS, DESIGN_OPTIONS, type DesignOption } from '../options'
 
+type Headline = { title: unknown; accent?: { style: string } } | null
+
 interface Fixture {
   version: number
   mode: string
   brand: {
     light: Record<string, string>
     dark?: Record<string, string>
-    fonts: { heading: { kind: string }; body: { kind: string }; headingWeight: number }
+    fonts: {
+      heading: { kind: string }
+      body: { kind: string }
+      headingWeight: number
+      scale?: string
+      tracking?: string
+      headlineCase?: string
+      labelCase?: string
+    }
     logo: { display: string }
   }
   shape: { corners: string }
   layout: Record<'header' | 'nav' | 'band' | 'cards' | 'density' | 'width' | 'filters', string>
   pages: {
     home: {
-      headline: unknown
+      headline: Headline
       blocks: Array<{
         type: string
         width: string
@@ -31,7 +41,7 @@ interface Fixture {
       }>
     }
     feedback: {
-      headline: unknown
+      headline: Headline
       welcome: { show: boolean }
       defaultSort: string
       copy: Record<string, Record<string, string>>
@@ -63,6 +73,14 @@ function used(): Record<DesignOption, Set<string>> {
     add('fontKind', doc.brand.fonts.heading.kind)
     add('fontKind', doc.brand.fonts.body.kind)
     add('logoDisplay', doc.brand.logo.display)
+    // An absent type choice is today's type.
+    const { scale, tracking, headlineCase, labelCase } = doc.brand.fonts
+    add('typeScale', scale ?? 'standard')
+    add('tracking', tracking ?? 'normal')
+    add('textCase', headlineCase ?? 'sentence')
+    add('textCase', labelCase ?? 'sentence')
+    for (const headline of [doc.pages.home.headline, doc.pages.feedback.headline])
+      if (headline?.accent) add('headlineAccent', headline.accent.style)
     for (const key of ['header', 'nav', 'band', 'cards', 'density', 'width', 'filters'] as const)
       add(key, doc.layout[key])
     add('sort', doc.pages.feedback.defaultSort)
diff --git a/apps/web/src/lib/shared/design/__tests__/resolve.test.ts b/apps/web/src/lib/shared/design/__tests__/resolve.test.ts
index da2d262166..ae7584f819 100644
--- a/apps/web/src/lib/shared/design/__tests__/resolve.test.ts
+++ b/apps/web/src/lib/shared/design/__tests__/resolve.test.ts
@@ -124,7 +124,7 @@ describe('renderDesignCss', () => {
     expect(css).not.toContain('!important')
   })
 
-  it('sets the heading family, in a layer utilities can override, and the heading weight', () => {
+  it('sets the heading family, in a layer utilities can override, the heading weight and tracking, and headline and label case', () => {
     const doc = defaultDesign()
     doc.brand.fonts.heading = { kind: 'bundled', id: 'fraunces' }
     doc.brand.fonts.headingWeight = 700
@@ -136,7 +136,7 @@ describe('renderDesignCss', () => {
       '@layer base { [data-portal-theme] :is(h1, h2, h3) { font-family: var(--qb-font-heading); } }'
     )
     expect(css).toContain(
-      '@layer design { [data-portal-theme] { letter-spacing: -0.01em; } [data-portal-theme] :is(h1, h2, h3) { font-weight: var(--qb-heading-weight); letter-spacing: -0.02em; } }'
+      '@layer design { [data-portal-theme] { letter-spacing: -0.01em; } [data-portal-theme] :is(h1, h2, h3) { font-weight: var(--qb-heading-weight); letter-spacing: var(--qb-heading-tracking); } [data-portal-theme] [data-qb-part=headline] { text-transform: var(--qb-headline-case); } [data-portal-theme] :is([data-qb-part=nav-item], [data-qb-label]) { text-transform: var(--qb-label-case); letter-spacing: var(--qb-label-tracking); } }'
     )
   })
 })
diff --git a/apps/web/src/lib/shared/design/__tests__/stored-design.test.ts b/apps/web/src/lib/shared/design/__tests__/stored-design.test.ts
index 8672370097..d6193f049b 100644
--- a/apps/web/src/lib/shared/design/__tests__/stored-design.test.ts
+++ b/apps/web/src/lib/shared/design/__tests__/stored-design.test.ts
@@ -35,7 +35,9 @@ describe('reading a stored design', () => {
   })
 
   it('reads an option value a newer build added as the default', () => {
-    const read = readStoredDesign(written({ 'layout.band': 'panel', 'brand.logo.display': 'name' }))
+    const read = readStoredDesign(
+      written({ 'layout.band': 'panel', 'brand.logo.display': 'banner' })
+    )
     expect(read?.design.layout.band).toBe(defaultDesign().layout.band)
     expect(read?.design.brand.logo.display).toBe(defaultDesign().brand.logo.display)
     expect(read?.design.brand.light.accent).toBe('#0f766e')
diff --git a/apps/web/src/lib/shared/design/__tests__/view.test.ts b/apps/web/src/lib/shared/design/__tests__/view.test.ts
index 37aba9ef6d..deec30ca33 100644
--- a/apps/web/src/lib/shared/design/__tests__/view.test.ts
+++ b/apps/web/src/lib/shared/design/__tests__/view.test.ts
@@ -49,6 +49,11 @@ describe('portalTheme', () => {
       home: { headline: null, blocks: [] },
       nav: defaultDesign().nav,
       vocabulary: { post: 'idea' as const, board: 'board' as const },
+      logo: {
+        display: 'mark_and_name' as const,
+        name: null,
+        wordmark: { light: null, dark: null },
+      },
     }
     expect(portalTheme({ brandingConfig, customCss: '.x {}', portalDesign })).toEqual({
       themeMode: 'user',
@@ -75,6 +80,11 @@ describe('portalFontIds', () => {
       home: { headline: null, blocks: [] },
       nav: defaultDesign().nav,
       vocabulary: { post: 'idea' as const, board: 'board' as const },
+      logo: {
+        display: 'mark_and_name' as const,
+        name: null,
+        wordmark: { light: null, dark: null },
+      },
     }
     expect(portalFontIds({ portalDesign })).toEqual(['inter', 'fraunces'])
   })
@@ -106,6 +116,11 @@ describe('portalFontLinks', () => {
       home: { headline: null, blocks: [] },
       nav: defaultDesign().nav,
       vocabulary: { post: 'idea' as const, board: 'board' as const },
+      logo: {
+        display: 'mark_and_name' as const,
+        name: null,
+        wordmark: { light: null, dark: null },
+      },
     }
     expect(portalFontLinks({ portalDesign })).toEqual([
       {
@@ -139,6 +154,11 @@ describe('portalThemeMode', () => {
         home: { headline: null, blocks: [] },
         nav: defaultDesign().nav,
         vocabulary: { post: 'idea' as const, board: 'board' as const },
+        logo: {
+          display: 'mark_and_name' as const,
+          name: null,
+          wordmark: { light: null, dark: null },
+        },
       },
     })
     expect(portalThemeMode(v2('auto'))).toBe('user')
@@ -192,6 +212,11 @@ describe('portalDefaultSort', () => {
       home: { headline: null, blocks: [] },
       nav: defaultDesign().nav,
       vocabulary: { post: 'idea' as const, board: 'board' as const },
+      logo: {
+        display: 'mark_and_name' as const,
+        name: null,
+        wordmark: { light: null, dark: null },
+      },
     }
     expect(portalDefaultSort({ portalDesign })).toBe('new')
   })
diff --git a/apps/web/src/lib/shared/design/components.ts b/apps/web/src/lib/shared/design/components.ts
index 35ac2cb927..2d67949885 100644
--- a/apps/web/src/lib/shared/design/components.ts
+++ b/apps/web/src/lib/shared/design/components.ts
@@ -49,6 +49,35 @@ const DENSITY: Record<PortalDesign['layout']['density'], [string, string, string
   spacious: ['1.25rem', '1rem', '1.0625rem'],
 }
 
+type Fonts = PortalDesign['brand']['fonts']
+
+/**
+ * Headline size and line height by scale. Each shrinks with the viewport, so a
+ * display headline still fits a phone.
+ */
+const HEADLINE: Record<NonNullable<Fonts['scale']>, [string, string]> = {
+  standard: ['clamp(1.5rem, 1.25rem + 1vw, 1.875rem)', '1.2'],
+  large: ['clamp(2rem, 1.5rem + 2.2vw, 3rem)', '1.1'],
+  display: ['clamp(2.25rem, 1.2rem + 4.6vw, 4.75rem)', '1.02'],
+}
+
+const CASE = { sentence: 'none', upper: 'uppercase' } as const
+
+/** Headline and label type: absent choices are today's. */
+function typeTokens(fonts: Fonts): TokenMap {
+  const [size, leading] = HEADLINE[fonts.scale ?? 'standard']
+  const labels = fonts.labelCase ?? 'sentence'
+  return {
+    '--qb-headline-size': size,
+    '--qb-headline-leading': leading,
+    '--qb-heading-tracking': fonts.tracking === 'tight' ? '-0.035em' : '-0.02em',
+    '--qb-headline-case': CASE[fonts.headlineCase ?? 'sentence'],
+    '--qb-label-case': CASE[labels],
+    // Upper-case labels read better spaced out.
+    '--qb-label-tracking': labels === 'upper' ? '0.06em' : 'normal',
+  }
+}
+
 const PAGE_MAX: Record<PortalDesign['layout']['width'], string> = {
   narrow: '56rem',
   default: '72rem',
@@ -97,6 +126,26 @@ export const BAND_FADE = 0.2
  * 4.5:1.
  */
 function bandTokens(band: PortalDesign['layout']['band'], t: Required<ThemeVariables>): TokenMap {
+  const tokens = bandSurface(band, t)
+  // Where the headline sits: the band's colour, or the top of a fade.
+  const behind =
+    band === 'brand'
+      ? t.primary
+      : band === 'tint'
+        ? mixColor(t.primary, t.background, BAND_TINT)
+        : band === 'fade'
+          ? mixColor(t.primary, t.background, BAND_FADE)
+          : t.background
+  return {
+    ...tokens,
+    // A headline's accent phrase: the brand colour, moved until it reads at
+    // 3:1 as large text, or the band's ink where it cannot.
+    '--qb-band-accent': solveContrast(t.primary, [behind], 3) ?? tokens['--qb-band-ink']!,
+    '--qb-band-highlight': mixColor(t.primary, behind, 0.25),
+  }
+}
+
+function bandSurface(band: PortalDesign['layout']['band'], t: Required<ThemeVariables>): TokenMap {
   switch (band) {
     case 'brand':
       return {
@@ -146,6 +195,7 @@ export function baseTokens(doc: PortalDesign): TokenMap {
     '--qb-font-body': fontStack(doc.brand.fonts.body),
     '--qb-font-heading': fontStack(doc.brand.fonts.heading),
     '--qb-heading-weight': String(doc.brand.fonts.headingWeight),
+    ...typeTokens(doc.brand.fonts),
   }
 }
 
diff --git a/apps/web/src/lib/shared/design/design-view.ts b/apps/web/src/lib/shared/design/design-view.ts
index d1daa99a32..51d82c72bd 100644
--- a/apps/web/src/lib/shared/design/design-view.ts
+++ b/apps/web/src/lib/shared/design/design-view.ts
@@ -12,7 +12,7 @@ import { rewritePartAliases } from './parts'
 import { designFontIds, fontStack, uploadedFontFaces } from './fonts'
 import { renderDesignCss, resolveDesign } from './resolve'
 import type { PortalDesign } from './schema'
-import type { PortalDesignView } from './view'
+import type { DesignLogo, PortalDesignView } from './view'
 import { isEmptyTiptapDoc } from '@/lib/shared/utils/is-empty-tiptap-doc'
 import type { TiptapContent } from '@/lib/shared/db-types'
 
@@ -40,6 +40,22 @@ export function designView(
     home: doc.pages.home,
     nav: doc.nav,
     vocabulary: doc.vocabulary,
+    logo: designLogo(doc),
+  }
+}
+
+/** Where the portal loads a stored brand file from: its own origin. */
+export const designAssetUrl = (key: string) => `/api/storage/${key}`
+
+function designLogo(doc: PortalDesign): DesignLogo {
+  const { display, name, wordmark } = doc.brand.logo
+  return {
+    display,
+    name: name ?? null,
+    wordmark: {
+      light: wordmark.light ? designAssetUrl(wordmark.light.key) : null,
+      dark: wordmark.dark ? designAssetUrl(wordmark.dark.key) : null,
+    },
   }
 }
 
diff --git a/apps/web/src/lib/shared/design/options.ts b/apps/web/src/lib/shared/design/options.ts
index 06a2e1047e..75d369798c 100644
--- a/apps/web/src/lib/shared/design/options.ts
+++ b/apps/web/src/lib/shared/design/options.ts
@@ -9,7 +9,16 @@ export const DESIGN_OPTIONS = {
   corners: ['sharp', 'subtle', 'rounded', 'pill'],
   headingWeight: [500, 600, 700, 800],
   fontKind: ['bundled', 'uploaded'],
-  logoDisplay: ['mark_and_name', 'mark', 'wordmark'],
+  /** `name` sets the workspace name in the heading font, a wordmark without a file. */
+  logoDisplay: ['mark_and_name', 'mark', 'wordmark', 'name'],
+  /** How large page headlines are. */
+  typeScale: ['standard', 'large', 'display'],
+  /** How closely headings are set. */
+  tracking: ['normal', 'tight'],
+  /** Headlines, or labels (the menu and buttons), in sentence or upper case. */
+  textCase: ['sentence', 'upper'],
+  /** How a headline marks out a phrase: in the accent colour, or highlighted. */
+  headlineAccent: ['colour', 'highlight'],
   header: ['stacked', 'inline', 'centered'],
   nav: ['tabs', 'underline', 'pills'],
   band: ['none', 'tint', 'fade', 'brand'],
diff --git a/apps/web/src/lib/shared/design/parts.ts b/apps/web/src/lib/shared/design/parts.ts
index 6a7ae176dd..077ab88427 100644
--- a/apps/web/src/lib/shared/design/parts.ts
+++ b/apps/web/src/lib/shared/design/parts.ts
@@ -55,7 +55,14 @@ export const PORTAL_PARTS = [
     name: 'headline',
     description: "A page's headline, in the band.",
     states: [],
-    tokens: ['--qb-font-heading', '--qb-heading-weight', '--qb-band-ink'],
+    tokens: [
+      '--qb-font-heading',
+      '--qb-heading-weight',
+      '--qb-band-ink',
+      '--qb-headline-size',
+      '--qb-heading-tracking',
+      '--qb-band-accent',
+    ],
     files: ['components/public/portal-band.tsx'],
   },
   {
diff --git a/apps/web/src/lib/shared/design/resolve.ts b/apps/web/src/lib/shared/design/resolve.ts
index 8c8c387931..e2d3fd3d49 100644
--- a/apps/web/src/lib/shared/design/resolve.ts
+++ b/apps/web/src/lib/shared/design/resolve.ts
@@ -230,7 +230,7 @@ export function renderDesignCss(resolved: ResolvedDesign): string {
     '@layer base { [data-portal-theme] :is(h1, h2, h3) { font-family: var(--qb-font-heading); } }'
   )
   parts.push(
-    '@layer design { [data-portal-theme] { letter-spacing: -0.01em; } [data-portal-theme] :is(h1, h2, h3) { font-weight: var(--qb-heading-weight); letter-spacing: -0.02em; } }'
+    '@layer design { [data-portal-theme] { letter-spacing: -0.01em; } [data-portal-theme] :is(h1, h2, h3) { font-weight: var(--qb-heading-weight); letter-spacing: var(--qb-heading-tracking); } [data-portal-theme] [data-qb-part=headline] { text-transform: var(--qb-headline-case); } [data-portal-theme] :is([data-qb-part=nav-item], [data-qb-label]) { text-transform: var(--qb-label-case); letter-spacing: var(--qb-label-tracking); } }'
   )
   return parts.join(' ')
 }
diff --git a/apps/web/src/lib/shared/design/schema.ts b/apps/web/src/lib/shared/design/schema.ts
index bdb8b67e72..5708fc2a86 100644
--- a/apps/web/src/lib/shared/design/schema.ts
+++ b/apps/web/src/lib/shared/design/schema.ts
@@ -92,7 +92,18 @@ const font = z.discriminatedUnion('kind', [
 
 const sort = z.enum(DESIGN_OPTIONS.sort)
 const width = z.enum(DESIGN_OPTIONS.blockWidth)
-const headline = z.object({ title: localized, subtitle: localized }).strict().nullable()
+const headline = z
+  .object({
+    title: localized,
+    subtitle: localized,
+    /** A phrase of the title, by locale, set apart in the accent colour or highlighted. */
+    accent: z
+      .object({ style: z.enum(DESIGN_OPTIONS.headlineAccent), text: localizedUpTo(60) })
+      .strict()
+      .optional(),
+  })
+  .strict()
+  .nullable()
 const link = z.object({ label, url: httpUrl }).strict()
 
 /** Home blocks. `roadmapId: null` is the first public roadmap; empty `categoryIds` the first public categories. */
@@ -182,6 +193,11 @@ export const portalDesignV2 = z
                 z.ZodLiteral<800>,
               ]
             ),
+            /** Absent fields read as standard, normal and sentence: today's type. */
+            scale: z.enum(DESIGN_OPTIONS.typeScale).optional(),
+            tracking: z.enum(DESIGN_OPTIONS.tracking).optional(),
+            headlineCase: z.enum(DESIGN_OPTIONS.textCase).optional(),
+            labelCase: z.enum(DESIGN_OPTIONS.textCase).optional(),
           })
           .strict(),
         logo: z
diff --git a/apps/web/src/lib/shared/design/view.ts b/apps/web/src/lib/shared/design/view.ts
index b67f1aecc4..1e9979be5a 100644
--- a/apps/web/src/lib/shared/design/view.ts
+++ b/apps/web/src/lib/shared/design/view.ts
@@ -38,7 +38,7 @@ export type PortalDesignView =
       feedback: {
         /** The welcome message, or null when it is off or empty. */
         welcome: TiptapContent | null
-        headline: { title: LocalizedText; subtitle: LocalizedText } | null
+        headline: PortalDesign['pages']['feedback']['headline']
         /** The feed's sort when the visitor has not picked one. */
         defaultSort: 'trending' | 'top' | 'new'
         /** The workspace's own wording, by language. */
@@ -50,8 +50,20 @@ export type PortalDesignView =
       nav: PortalDesign['nav']
       /** The words visitors see for what they post and what groups it. */
       vocabulary: PortalDesign['vocabulary']
+      /** How the header shows the brand. */
+      logo: DesignLogo
     }
 
+/**
+ * The header's logo: the display, the name it shows when not the workspace's,
+ * and the wordmark files' addresses, for light and dark.
+ */
+export interface DesignLogo {
+  display: PortalDesign['brand']['logo']['display']
+  name: string | null
+  wordmark: { light: string | null; dark: string | null }
+}
+
 /** The settings a portal page reads its theme from. */
 interface ThemeSettings {
   brandingConfig?: ThemeConfig | null