Prezi Design System

Overview

Prezi's marketing site does what almost no other AI-presentation brand attempts. Two-band cobalt flood. The page alternates near-white ink-on-cream editorial sections with full-bleed cobalt slabs that fill the page floor for 500-pixel bands. The hero is restrained — Area-Normal display at 57.6px in weight 800 on the {colors.canvas} near-white canvas, with a saturated coral pill ({colors.secondary} — #ff6100) as the lone chromatic CTA. Then the page falls into a cobalt flood at "Just describe what you need," returns to white for "Present your way," and floods cobalt again for "One platform for your whole team." Where Gamma sits on warm cream and Tome on soft pastel, Prezi alternates ink-on-white editorial with cobalt slabs — a Hungarian-startup confidence about saturated color that the AI-tool category typically softens away.

The voltage discipline is unusual. Prezi Blue ({colors.primary} — #0325e1) carries the primary CTA pill, the two full-bleed band fills, and the link/text-brand semantic role — but it never appears as a card accent on the white sections; the white-canvas bands stay almost monochromatic, holding the cobalt back for the next full-bleed reveal. The coral secondary ({colors.secondary} — #ff6100) appears exactly once above the fold as the hero CTA pill. The split — cobalt as flood-canvas voltage, coral as one-off CTA fill — is the signature chromatic move and what differentiates the system from the muted-pastel default of the AI-presentation category.

Typography is Area-Normal display, Inter body. Area-Normal (a licensed grotesque from Indian Type Foundry) carries every display tier at weight 800 — 57.6px hero, 48px section, 28px sub-display, 24px feature heading. Inter handles every body, label, button, and nav surface at 14-18px in weights 400-600. The display weight of 800 is the editorial-bold treatment, uncommon for AI-first tools (Gamma sits at 500-600, Tome at 400-500); Prezi commits to heavy display weight to anchor the page's structural rhythm.

Key Characteristics:

• Two full-bleed cobalt-blue bands per marketing page — {colors.primary} (#0325e1) as the band-floor voltage, not a held-in-reserve accent.
• Coral secondary ({colors.secondary} — #ff6100) used exactly once above the fold as the hero CTA pill — distinct from the cobalt voltage, gradient-only frequency in the extraction (40 occurrences inside hero CTA gradients).
• Area-Normal display at weight 800 across every display tier — 57.6px hero h1 is the heaviest typographic moment on the page.
• Inter as workhorse for every body, label, button, and nav surface — 14-18px, weights 400-600, no Inter use in the display tier.
• 16px default container radius ({rounded.xl} — 68 occurrences in the extraction), 8px primary CTA radius ({rounded.md} — 56 occurrences), no full-pill or full-circle tier.
• Slate ink ({colors.ink} — #111927) rather than pure black for all body and display text — even the cobalt bands carry off-white {colors.canvas} (#f9fafb), never pure white.
• Customer-logo wall (Cisco, Salesforce, Airbus, Duolingo, BMW, Volvo) renders monochrome-white inside the cobalt flood, color-on-white on the ink editorial bands.
• 4px base spacing unit but the dominant module is 16px (29 occurrences) and the section padding rises to 112x32px on the flood bands.

Colors

Brand

• Prezi Blue ({colors.primary} — #0325e1): frequency 5. Used as text (0), background (3), border (0), shadow (2). The single brand voltage — fills the primary CTA pill, the two full-bleed band floors, and the link / text-brand role. Wired in CSS as --_colors---blue--700, --_semantic-colors---button--btn-primary-bg, --_semantic-colors---background--bg-brand, --_semantic-colors---text--text-brand, and --_semantic-colors---text--text-link. The single most semantically-loaded token in the system.
• Prezi Blue Hover ({colors.primary-hover} — #0115aa): frequency 5. The hover variant — one step darker, used on primary-button hover and as the gradient end-stop on the cobalt flood bands. Wired as --_colors---blue--900, --_semantic-colors---button--btn-primary-bg_hover, --_semantic-colors---background--bg-brand2.
• Prezi Blue Soft ({colors.primary-soft} — #d2d8ff): frequency 5. The pale cobalt — used as background fill on the inverse-blue feature card and as a soft tint surface. Wired as --blues--blue-5, --_colors---blue--50.
• Prezi Blue Dark ({colors.primary-dark} — #000369): frequency 1. The midnight cobalt — used inside the cobalt-band feature cards as a darker surface lift against the cobalt flood floor. Wired as --_colors---blue--950, --_semantic-colors---background--bg-alternate, --_semantic-colors---background--bg-brand-dark.
• Coral Secondary ({colors.secondary} — #ff6100): frequency 40 (gradient). The hero CTA pill fill — used exactly once above the fold as the saturated single-element CTA. Wired as --_colors---orange--400. Distinct from the cobalt voltage; appears nowhere else on the page.
• Link Blue ({colors.link} — #1e55eb): frequency 6 — 3 text, 3 border. The inline-link blue, slightly lighter than the brand voltage. Wired as --_colors---blue--500, --blue. Holds inline-link semantics distinct from the brand-text role.

Text

• Ink ({colors.ink} — #111927): frequency 741 — 374 as text, 367 as border. The dominant text color across the system. Display headlines, body paragraphs, and primary nav labels all render in slate. Wired as --_colors---grey--900 and --_semantic-colors---text--text-primary. Never pure black; the slate undertone softens the saturated cobalt without competing.
• Ink Secondary ({colors.ink-secondary} — #384250): frequency 32 — 16 text, 16 border. The body-paragraph tone — used inside testimonial cards and feature cell descriptions where ink would feel too heavy. Wired as --_semantic-colors---text--text-secondary, --_semantic-colors---text--text-inactive, --_colors---grey--700.
• Ink Tertiary ({colors.ink-tertiary} — #4d5761): frequency 8. The third-tier text — caption rows, sub-labels, and placeholder text. Wired as --_semantic-colors---text--text-tertiary, --_semantic-colors---text--text-placeholder, --_colors---grey--600.
• Ink Muted ({colors.ink-muted} — #676782): frequency 8. The fourth-tier text — wired as --grays--gray-3. Used inside testimonial author bylines and tiny metadata rows.
• Ink Placeholder ({colors.ink-placeholder} — #9da4ae): the input-placeholder tone wired as --_colors---grey--400. Reserved for form-field empty states.

Surface

• Canvas ({colors.canvas} — #f9fafb): frequency 567 — 269 text, 14 background, 270 border, 13 shadow. The off-white floor of the system — used as page background, CTA-pill text color on the cobalt floods, and surface fill on the editorial sections. Not pure white; the warmth difference from a true neutral is small but consistent. Wired as --_colors---base--white, --_semantic-colors---background--bg-primary, --neutrals--neutral-2, and many alpha variants.

Hairlines

• Hairline ({colors.hairline} — #d2d6db): frequency 12 — 4 border, 8 shadow. The primary border tone — secondary-button outlines, card edges, and input field rules. Wired as --_semantic-colors---border--border-primary, --_semantic-colors---button--btn-secondary-border, --_colors---grey--300.
• Hairline Soft ({colors.hairline-soft} — #e5e7eb): the softer secondary hairline — wired as --_semantic-colors---border--border-secondary, --_colors---grey--200. Used inside hover-tinted backgrounds and lighter card edges.

Semantic

• Shadow ({colors.shadow} — #0a0d12): frequency 120 — all as shadow ink. The page's only elevation tone — wired as --_colors---grey--950. The system uses near-black-with-opacity for shadows rather than a tinted shadow.
• Selection Background ({colors.selection-bg} — #ff1f8b): frequency 40 (gradient). The browser text-selection background. Wired as --_colors---pink--400, --_semantic-colors---text--text-select-bg. Magenta — chosen to contrast against both the white canvas and the cobalt flood.

Typography

Font Families

The system runs two voices: Area-Normal for every display tier and Inter for every body, label, button, and nav surface. Area-Normal is a licensed grotesque from Indian Type Foundry — proprietary, requires a license for production use. Inter (Rasmus Andersson) ships open. The split is the distinguishing typographic move: most AI-presentation marketing pages run a single sans across every tier (Gamma uses Inter for everything; Tome uses a custom display for everything). Prezi divides labor — Area-Normal carries weight 800 display moments, Inter carries weights 400-600 across body and chrome.

There is no monospace voice and no serif tier. The display family also carries the heading-md tier at 24px / weight 700, dropping one weight step from the 800-weight display floor.

Hierarchy

Principles

Display sits at weight 800, the heaviest weight on the page. The hero h1 at 57.6px / 800 with -1.152px tracking is the loudest typographic moment in the system — heavier than Linear (500), Vercel (500), or Notion (600) ever go on display, equal to the editorial-bold treatment a print magazine uses. Tracking is tight (-1.152px on hero, -1.44px on section h2) which keeps the heavy weight from feeling shouted; the negative tracking pulls the cap forms inward and reads as confident rather than aggressive.

Body and labels stay at weights 400-600. The system has no weight-700 body tier and no 900 display tier — 800 is the ceiling. Weight 600 in Inter handles button labels and bold-emphasis body; weight 400 is the body floor. Inter at 16px / 400 / 24px line-height is the workhorse paragraph style.

Note on Font Substitutes

Area-Normal is proprietary. Sora at weight 800 is the closest open-source substitute — similar grotesque proportions and tight tracking; the cap heights transfer cleanly at the 48-58px display sizes. Manrope at weight 800 is a slightly lighter alternative if Sora reads too compressed. Inter ships open from Rasmus Andersson — no substitution needed; the same Inter is what Vercel, Linear, and Cron all ship.

Layout

Spacing System

• Base unit: 4px (the 4 / 8 / 16 / 24 / 32 scale dominates; 6px appears as a tertiary value inside chip padding).
• Tokens: {spacing.xs} 4px · {spacing.sm} 6px · {spacing.base} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.2xl} 32px · {spacing.3xl} 64px.
• Section padding (vertical): 112px on the cobalt flood bands (the dominant section padding value at frequency 7), 56px on the ink editorial bands.
• Card internal padding: 32x40px on feature cards (frequency 16), 16x20px on primary button padding (frequency 40), 12x20px on secondary button padding (frequency 8).
• Top-nav padding: 16x32px — same horizontal as the section padding to keep the nav flush with the editorial column.

Grid & Container

• Max content width: ~1080px on hero and editorial bands, ~1280px on the cobalt flood bands (the customer logo wall and feature-cell grid).
• Hero block: centered ink-on-white editorial column at ~640px, no full-bleed background.
• Cobalt bands: full-bleed cobalt floor, content centered at ~720px max-width for the heading and ~1080px for the feature-cell grid below it.
• Editorial bands: centered displays at ~1080px, with 3-up feature rows and a single full-width product-mockup screenshot frame per section.
• Customer logo wall: 8-column grid of monochrome customer logos sitting inside the first cobalt band — same band as "Just describe what you need."

Rhythm

The page alternates between ink-band and cobalt-band rather than holding a single tempo. The hero is ink editorial (near-white, slate text, one coral CTA pill). Section 2 is cobalt flood (cobalt floor, off-white text, dark-cobalt feature cards). Section 3 is ink editorial again. Section 4 is cobalt flood again with the "One platform for your whole team" feature-cell grid. The rhythm itself is the design move: bands either go to ink or to cobalt — there is no half-tinted in-between.

Elevation

The system has a near-minimal shadow tier. The captured page has 120 occurrences of {colors.shadow} (#0a0d12) used as shadow ink — almost all of them as soft elevations on the testimonial cards, the customer-logo wall chips, and the product-mockup screenshot frames. Card lift is the dominant elevation device; hairline borders carry the structural work below it.

• Flat (no shadow): hero, cobalt bands, feature cells, footer — most surfaces.
• Card lift: testimonial cards, feature blocks on white, and the product-mockup frames carry a soft {colors.shadow} drop (low blur, vertical-only offset) to lift them off the canvas.
• Inverse depth on cobalt: the cobalt-band feature cards use {colors.primary-dark} (#000369) instead of a shadow — depth via surface-color contrast against the cobalt floor.

Shapes

The radius scale is generous-soft, concentrated at two values:

• {rounded.none} 0px — only on full-bleed band fills and the page floor.
• {rounded.sm} 4px (frequency 5) — small input chips, tiny dropdown items.
• {rounded.md} 8px (frequency 56) — primary CTA pills, secondary buttons.
• {rounded.lg} 12px (frequency 3) — rare; intermediate card surfaces.
• {rounded.xl} 16px (frequency 68) — the dominant radius. Feature cards, container surfaces, product-mockup frames, testimonial cards.

There is no full-pill tier and no 24 or 32px outer-card tier. The scale tops out at 16px; even the largest container surfaces sit at the same radius as a 200x200 feature card. This produces a soft consistency where every surface reads as the same scale of object — different sizes, same shape language.

Components

hero-section — Near-white {colors.canvas} floor, 112x32px padding, no border-radius. Holds the hero h1 in slate {colors.ink} at {typography.display-xl}, a single-paragraph lead in {colors.ink-secondary}, and the coral CTA pill centered beneath.

hero-heading — Slate {colors.ink} text on the near-white canvas, Area-Normal 57.6px / 800, -1.152px tracking. The system's loudest display moment.

cobalt-band — Full-bleed {colors.primary} floor, 112x32px padding. Holds the section h2 in off-white {colors.canvas} at {typography.display-lg} (48px / 800), the section lead in body-md, and a feature-cell grid or product mockup beneath.

section-heading — Same {typography.display-lg} but rendered in slate {colors.ink} on the ink editorial bands ("Present your way", "See why our customers love us", "What Prezi users are saying").

section-heading-inverse — Same display-lg token but in off-white {colors.canvas} on the cobalt flood bands.

body-paragraph — Default running text in {colors.ink-secondary} at {typography.body-md} (16px / 400) — the workhorse paragraph style.

button-primary — Cobalt {colors.primary} fill, off-white text, {rounded.md} 8px radius, 16x24px padding, 56px height. "Try Prezi for free" is the canonical instance in the top-nav and inside the cobalt-band feature cards.

button-primary-hover — Background flips to {colors.primary-hover} (#0115aa) — one step darker cobalt for the press state.

button-coral — Coral {colors.secondary} fill, off-white text, {rounded.md} 8px radius, 12x20px padding, 48px height. The single hero CTA above the fold — the only coral element on the page.

button-secondary — Off-white {colors.canvas} fill, slate text, 1px {colors.hairline} border, {rounded.md} 8px radius, 12x20px padding, 48px height. Used for "Log in", "Looking for education discounts?" inline link styles, and "Learn more about Teams" tertiary CTAs.

top-nav — Off-white surface, 64px height, 16x32px padding. Prezi wordmark flush left, product links (Pricing, Prezi AI, Login, Teams) center-right, primary "Get started" CTA flush right.

nav-link — Slate {colors.ink-secondary} text in {typography.nav-link} (16px / 400), 8x12 padding. No hover background visible in the captured surface.

card-light — {colors.canvas} surface, 1px {colors.hairline-soft} border, {rounded.xl} 16px radius, 32x40px internal padding. The default content card on the ink editorial bands — holds testimonials, metric blocks, and feature cells.

card-cobalt-feature — Dark {colors.primary-dark} (#000369) fill, off-white text, {rounded.xl} 16px radius, 32x40px padding. The feature card inside the cobalt flood bands — depth via surface-color contrast against the cobalt floor.

testimonial-card — Off-white surface, 1px hairline-soft border, {rounded.xl} 16px radius, 32x40px padding. The customer-quote cards in the "What Prezi users are saying" row.

text-input — Off-white surface, slate text, 1px {colors.hairline} border, {rounded.md} 8px radius, 12x20px padding, 44px height. The email field at the bottom of the page and any inline form input.

Do's and Don'ts

Do treat {colors.primary} (#0325e1) as a full-bleed band canvas, not just a CTA accent. The signature move is the two-band cobalt flood — holding the cobalt in reserve for only buttons misses the structural rhythm.

Do use Area-Normal for display only and Inter for everything else. The system has no Inter-display use and no Area-Normal-body use; mixing the families across tiers collapses the editorial-bold display moment into ordinary marketing chrome.

Do keep display weight at 800. The hero h1 at 57.6px / 800 with -1.152px tracking is the editorial-bold treatment — dropping to 600 turns the display into a generic AI-tool hero and loses the Hungarian-startup confidence.

Do reserve the coral {colors.secondary} (#ff6100) for a single CTA appearance above the fold. Multiplying the coral into multiple buttons or inline accents dilutes the only non-cobalt chromatic moment on the page.

Don't swap {colors.canvas} (#f9fafb) for a true pure-white surface. The off-white floor is the consistent value across the system — pure-white panels on the cobalt bands read as cold and break the warmth gradient.

Don't render display headlines on a pure-black background. The system's dark surface is the saturated cobalt flood, not a dark canvas — using black behind Area-Normal flips the brand toward dev-tool territory (Linear, Vercel) instead of the editorial AI-presentation positioning.

Don't introduce a pill or full-circle radius tier for buttons. The system caps at {rounded.xl} 16px; primary CTAs sit at {rounded.md} 8px. A pill CTA would import a Stripe / Cloudflare gesture that doesn't belong to the Prezi shape language.

Don't mix the cobalt {colors.primary} and the coral {colors.secondary} in the same composition. The two voltages have distinct semantic roles (cobalt as flood-canvas voltage, coral as one-off hero CTA fill); placing them adjacent inside one component reads as a system fault.

Known Gaps

• Dark mode: the captured marketing surfaces are light-only on the editorial bands and cobalt-only on the flood bands. A dark variant of the editor product surface exists but is not represented here.
• Hover and focus states: documented for {component.button-primary-hover} only; the full state matrix (focus rings, active press, disabled tints) is not captured from the marketing surface.
• Form input error states: {component.text-input} carries the resting state; error / validation styling lives inside the product editor and is not exposed on the marketing site.
• Motion: the page uses the Prezi non-linear "zoom" transition between sections, but the spec captures end-state values only. Easing curves, zoom depth, and stagger timing live in the live Prezi runtime.
• Product surfaces: this DESIGN.md captures the marketing site only. The Prezi editor (prezi.com/dashboard) and the Prezi Video product carry richer token systems — canvas zoom levels, presentation-mode chrome, video-overlay layouts — that are not represented here.
• Sub-brand palettes: the CSS exposes --_colors---ai--*, --_colors---purple--*, --_colors---teal--*, --_colors---green--* families with zero rendered occurrences on the marketing surface — these appear to be reserved for product-editor states and are not included as primary tokens.
• Customer-logo treatment: the logo wall renders monochrome-white inside the cobalt band and color-on-white on the ink editorial band. The exact desaturation rule (CSS filter? SVG swap?) is not directly extractable from the page CSS.