Pagent feels like a quiet editorial workspace: warm paper, precise typography, and compact operational detail without visual noise. The signature is the pairing of Instrument Serif for human-facing titles with JetBrains Mono for identity, access, and analytics facts. Product screens preserve the existing landing page's warm bone canvas and rust accent while using crisp, low-elevation work surfaces.

• Accent color is reserved for actions, links, selection, and focus.
• Identity-confidence states always pair color with explicit text: Anonymous, Unverified, or Authenticated.
• Error, warning, and success surfaces must retain 4.5:1 text contrast.
• New colors are added here before use.

The landing page consumes the core --pg-* palette, font, and spacing tokens directly. Its editorial hero and dark install/terminal specimens add only the following --pg-home-* aliases; they are intentionally local to <home-page> and must not become a second product palette. Opacity variants derive from colocated *-rgb channel tokens rather than introducing more colors. Each companion mirrors its source color for rgba(var(...), alpha); the highlight is alpha-only.

• UI and body (--pg-font-ui): Outfit, system-ui, -apple-system, sans-serif.
• Display serif (--pg-font-display): Instrument Serif, Georgia, Times New Roman, serif.
• Metadata and code (--pg-font-metadata): JetBrains Mono, ui-monospace, monospace.

• Body copy is never smaller than 14px.
• Tabular values use font-variant-numeric: tabular-nums.
• Long email addresses and tokens use overflow-wrap: anywhere.

Structural spacing derives from 4px and uses --pg-space-*. Isolated landing-page optical values may remain literal when they do not represent a reusable spacing decision.

• Product shell max width: 1440px; readable content max width: 72ch.
• Desktop: 240px navigation rail plus fluid content; tablet and mobile: a single document-scrolling column.
• Metric grids use repeat(auto-fit, minmax(min(15rem, 100%), 1fr)).
• Breakpoints: narrow 640px, mid 900px, wide 1200px.
• Product pages own document scrolling. Fullscreen viewer owns a bounded 100dvh presentation shell with fixed controls and a min-block-size: 0 slide viewport.

• Structure: skip link, landmark header, navigation, main content, optional contextual actions.
• Variants: page library, detail, workspace admin, fullscreen viewer.
• Spacing: --pg-space-4 through --pg-space-8.
• States: narrow navigation, authenticated user, loading, unauthenticated redirect.
• Accessibility: one main, visible skip link, current page marked with aria-current.
• Motion: no decorative shell motion.
• Layout: fixed-sidenav shell above 900px; document scroll below it.

• Structure: native button or anchor with text and optional SVG.
• Variants: primary, secondary, quiet, destructive.
• Spacing: --pg-space-2 and --pg-space-3; 44px minimum touch target.
• States: default, hover, active, focus-visible, disabled, loading.
• Accessibility: native semantics; loading retains an accessible name and uses aria-busy.
• Motion: 120ms transform/opacity feedback; none under reduced motion.
• Layout: cluster.

• Structure: label, input/select/textarea/radio group, hint, inline error.
• Variants: text, email, date/time, select, checkbox, radio cards.
• Spacing: --pg-space-2 and --pg-space-3.
• States: default, hover, focus, disabled, error, valid.
• Accessibility: explicit labels, aria-describedby, fieldset/legend for grouped choices.
• Motion: focus and validation use color/opacity only.
• Layout: stack.

• Structure: short text label; optional decorative SVG.
• Variants: neutral, active, expired, revoked, Anonymous, Unverified, Authenticated.
• Spacing: --pg-space-1 and --pg-space-2.
• States: static; never color-only.
• Accessibility: full status word is present in text.
• Motion: none.
• Layout: cluster.

• Structure: heading, value/content, optional footer action.
• Variants: standard, metric, warning, empty.
• Spacing: --pg-space-5 or --pg-space-6.
• States: rest, linked hover/focus, loading skeleton, empty, error.
• Accessibility: linked cards expose one primary action and avoid nested controls.
• Motion: linked cards use 150ms border/transform feedback.
• Layout: stack inside an intrinsic grid.

• Structure: caption, headers, rows, row actions; narrow view becomes labeled records.
• Variants: page library, visitors, slides, links, audit log, admin metadata.
• Spacing: --pg-space-3 and --pg-space-4.
• States: loading, empty, filtered-empty, error, selected row.
• Accessibility: semantic table on wide screens; labels remain programmatically associated in narrow records.
• Motion: none beyond focus/selection feedback.
• Layout: table scroll is permitted only for secondary columns; primary content reflows.

• Structure: tablist, tabs, one active panel.
• Variants: presentation page Overview, Visitors, Slides, Share links, Access & settings.
• Spacing: --pg-space-3 and --pg-space-4.
• States: default, hover, focus, selected, disabled.
• Accessibility: arrow-key navigation, Home/End, aria-controls, URL-addressable selection.
• Motion: 150ms opacity transition, disabled under reduced motion.
• Layout: horizontally scrollable reel on narrow screens with visible focus.

• Structure: native dialog, title, explanatory copy, form/body, cancel and confirm actions.
• Variants: share-link editor, access decision, delete confirmation, analytics audience preview.
• Spacing: --pg-space-4 through --pg-space-6.
• States: opening, ready, submitting, error, success.
• Accessibility: focus trap, Escape closes non-destructive dialogs, return focus to trigger, destructive confirmation names the page.
• Motion: 200ms opacity/transform; reduced motion uses immediate state.
• Layout: imposter over backdrop, max inline size constrained to viewport.

• Structure: presentation page and sender identity, privacy and tracking notice, access control, help/request action.
• Variants: Allowed email, Authenticated viewer, pending, denied, expired, revoked.
• Spacing: --pg-space-4 through --pg-space-8.
• States: idle, submitting, mismatch, request pending, authentication required, unavailable.
• Accessibility: clear heading, persistent explanation, generic non-enumerating errors, focus moved to outcome.
• Motion: state change uses 200ms opacity only.
• Layout: cover with readable content limiter.

• Structure: Pagent overline, one clear heading, optional error notice, provider action, or email field; completion states reuse the same surface and hierarchy.
• Variants: email-only, Google plus email, OAuth consent continuation, check-email confirmation, and recoverable error.
• Spacing: --pg-space-2 through --pg-space-8 inside a 400–440px readable surface.
• States: ready, provider unavailable, submitted, invalid input, rate-limited, and service unavailable.
• Accessibility: explicit email label, 44px controls, visible focus, status/alert roles, no provider button when its configuration is incomplete.
• Motion: button press feedback only; removed under reduced motion.
• Layout: centered document-scrolling surface on the warm canvas at mobile, tablet, and desktop widths.

• Structure: the submitted HTML document in an isolated iframe, with no Pagent canvas, slide navigation, imposed aspect ratio, or injected visual styling.
• Variants: full-viewport shared page and bounded owner preview. Previously published structured-slide revisions retain their legacy controls.
• States: loading, ready, load failure with retry, unavailable access.
• Accessibility: a descriptive iframe title and accessible loading/error feedback. Authors own their document's semantics, navigation, responsive layout, and accessibility.
• Security: scripts run with an opaque origin; no Pagent cookies, storage, parent DOM, external resources, forms, popups, or top navigation. The stored HTML is unchanged; the served document adds nonvisual activity instrumentation only.
• Analytics: visits and active time apply to HTML pages. Do not show invented slide counts or completion percentages when the author supplies no slide model.
• Layout: the shared document fills 100dvh without product chrome. Owner preview uses the existing detail grid and a viewport-height frame. Pagent tokens apply only to surrounding management and status UI, never inside authored content.

• Structure: presentation page identity, slide viewport, previous/next, current count, fullscreen, optional filmstrip.
• Variants: owner preview and tracked viewer.
• Spacing: --pg-space-2 through --pg-space-4.
• States: loading, ready, first/last slide, fullscreen, offline tracking queue.
• Accessibility: arrow keys, PageUp/PageDown, Home/End, touch buttons, announced slide number, 44px targets.
• Motion: slide changes use 180ms opacity/transform and an immediate reduced-motion alternative.
• Layout: bounded 100dvh scroll-body shell; the slide viewport is the only flexible region.

• Structure: text summary, SVG visualization, data table alternative.
• Variants: visits, slide active time, drop-off distribution, visit sequence.
• Spacing: --pg-space-3 through --pg-space-6.
• States: loading, empty/low data, populated, error.
• Accessibility: visible units, no color-only series, descriptive summary, table fallback.
• Motion: none required; data updates use polite announcements.
• Layout: frame within a surface card.

• Structure: workspace identity, member and role summary, presentation page metadata, retention/consent policy, audit activity.
• Variants: overview, members, governance, audit log.
• States: loading, empty, filtered-empty, partial permission, error.
• Accessibility: governance actions state their scope and consequence; metadata-only access never implies content or viewer-analytics access.
• Motion: none beyond standard dialog and focus feedback.
• Layout: product shell with compact tables that become labeled records on narrow screens.

• Buttons: adapted from beui.dev button/base and button/stateful. Native buttons use interruptible :active scale feedback (0.98) and keep idle/loading/success/error labels in one live region. The project has no spring runtime, so the 120ms CSS micro token is used instead of adding Motion; reduced motion removes the transform.

• Tabs: adapted from beui.dev tabs. Panels stay mounted and inactive panels use hidden; arrow keys, Home, and End move selection. The active state uses color and a short opacity reveal rather than a shared-layout spring because the design contract favors restrained motion and the project has no shared-layout runtime.

• Dialogs: adapted from beui.dev center-morph-modal. Native <dialog> supplies modality and focus containment; the panel enters with a small opacity/scale change, Escape closes non-destructive flows, and focus returns to the invoking control. The project contract excludes clip-path motion, so the source's center unfold becomes the Standard opacity/transform token.

• Animate only transform and opacity.

• Motion always communicates a real state or spatial relationship.

• prefers-reduced-motion: reduce disables non-essential transitions and makes slide changes immediate.

• Keyboard, pointer, and touch yield the same state and feedback.

The strategy is borders-first with very restrained shadows for dialogs only.

• WCAG 2.2 AA minimum: 4.5:1 body contrast, 3:1 large text and control boundaries.
• Every flow is operable by keyboard at 200% zoom and at 375px width.
• Identity confidence, link status, and analytics states are expressed in words, not color alone.
• Access errors remain generic enough to avoid audience enumeration while still explaining the next action.
• Viewer tracking never blocks navigation and analytics consent is disclosed before the presentation page opens.
• Charts always have an equivalent textual/table representation.
• Focus is visible and restored after dialogs; validation is announced without clearing user input.

No accepted design or accessibility debt for v0.1.0.