What is Prezi's primary brand color?

Prezi's brand voltage is a saturated cobalt blue, wired into the CSS as --_colors---blue--700 and --_semantic-colors---button--btn-primary-bg. It carries the primary CTA pill ('Try Prezi for free'), the two full-bleed mid-page flood bands, and the link/text-brand semantic role. A second saturated coral-red appears in the hero as the loudest single-element CTA fill — distinct from the cobalt voltage, used exactly once above the fold. The cobalt appears five total times in extracted samples; coral appears once. The split between cobalt as flood-canvas voltage and coral as one-off CTA fill is the system's signature chromatic move.

What typefaces does Prezi use, and what should I use as substitutes?

Prezi runs two voices: Area-Normal (a licensed grotesque from Indian Type Foundry) for every display tier — hero h1 at 57.6px weight 800, section h2 at 48px weight 800, sub-display at 28px weight 800 — and Inter for every body, label, button, and nav surface at 14-18px in weights 400-600. The pairing is unusual: most AI-tool marketing pages run a single sans across every tier. Area-Normal's open counters and heavy display weight read as editorial-bold rather than tech-bold. The closest open-source substitute for Area-Normal is Sora at the same weights, or Manrope at slightly lighter weight; Inter ships open from Rasmus Andersson and needs no substitution.

What is Prezi's corner-radius philosophy?

Prezi runs a generous-soft scale concentrated at two values: 16px on most surfaces (cards, containers, feature tiles, product mockup frames) and 8px on the primary CTA pill. 4px and 12px appear rarely as supporting values for inputs and dropdowns. There is no full-pill tier and no 24px or 32px outer-card tier — the scale tops out at 16px. This produces a softness that reads approachable on white but holds shape against the saturated cobalt flood without going visually loose. The pattern inverts dev-tool conventions (Linear / Vercel use tight 4-6px) by treating 16px as the floor rather than as an upper bound.

Why does Prezi flood entire page sections with cobalt blue?

The full-bleed cobalt band is Prezi's structural device for separating editorial bands. The page alternates near-white ink-on-cream sections (hero, 'Present your way,' testimonials) with full-bleed cobalt slabs ('Just describe what you need,' 'One platform for your whole team'). The cobalt sections carry white text and slightly desaturated cobalt feature cards inside — depth via subtle surface contrast rather than card chrome. This rhythm is the brand's structural argument: presentations are not slides-in-sequence, they're zoom-in-and-out canvases. The marketing page literally zooms between ink-band and cobalt-band as you scroll, modeling the non-linear navigation Prezi sells in the product.

Can I use this DESIGN.md to build my own AI-presentation marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent reproduces Prezi's specific moves: Area-Normal weight 800 display, the cobalt-flood band rhythm, Inter as workhorse body, 16px default rounding with 8px CTAs, and slate ink instead of black. The token references resolve cleanly without invention. You can also paste values directly: every hex, font name, radius, and spacing value is a quoted scalar that drops into Tailwind config or CSS custom properties. The one move worth borrowing only if you can sustain it is the two-band cobalt flood — it requires single-sentence editorial confidence at each band, which most SaaS pages can't hold.

Prezi Design System

Prezi's marketing system pairs Area-Normal weight 800 display with Inter body and a single saturated cobalt blue that floods two full-bleed bands.

About Prezi DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source prezi.com

Productivity & SaaS
Design & Creative Tools

Prezi's marketing site does what almost no other AI-presentation brand does in 2026: it gives the brand voltage two entire full-bleed page bands instead of holding it back for a CTA accent. The hero is restrained — Area-Normal display at 57.6px in weight 800 on a near-white canvas, with a vibrant coral CTA pill as the lone chromatic moment. Then the page falls into a saturated cobalt-blue flood at "Just describe what you need," holds the floor in that voltage for a 500-pixel band, returns to white for the "Present your way" editorial, 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 saturated cobalt slabs — a Hungarian-startup confidence about color uncommon in the AI-tool category.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 15 color tokens drawn from the page CSS variables (slate ink as text-primary, the cobalt blue as button-primary-bg and background-brand, a saturated coral as the secondary CTA, plus a small set of greys); 11 typography tokens splitting labor between Area-Normal (display only, weight 800) and Inter (everything else); 4 radius tokens centered on 16px; 8 spacing values on a 4px base; and 16 component definitions covering the cobalt CTA pill, the coral hero CTA, the cobalt-band heading, the dark feature card with cobalt accent, the testimonial card, the metric card, and the customer-logo wall.

Feed this file to an AI coding tool and it reproduces Prezi's specific moves: Area-Normal weight 800 display, two full-bleed cobalt bands per page rather than a held-back accent, slate ink instead of black text, 16px default rounding with 8px on CTAs, and the Area-Normal-versus-Inter typeface split. The token references resolve cleanly — Prezi Blue for the voltage, slate for any ink, Area-Normal for display, Inter for everything else — so the agent never has to invent a value. The one move worth borrowing only if your product can sustain it: the two-band cobalt flood depends on a single confident sentence per band, which collapses if the copy gets fussy.

What makes it distinct

Two-band cobalt floodPrezi Blue fills two full-page sections rather than a held-in-reserve CTA accent, inverting the typical SaaS reveal pattern
Area-Normal weight 800 display57.6px hero h1 and 48px section h2 sit at the heaviest weight on the page, an editorial-bold treatment uncommon among AI-first tools
Inter as workhorse, Area-Normal as voiceevery body, label, and nav surface runs Inter at 14-18px while Area-Normal carries only the display tier
16px default radiuslarge containers and product mockups round to 16px, primary CTA pill sits at 8px, the system skips both 4px and any pill or full-circle tier
Slate ink, not blackbody and display text render at slate (Prezi's grey-900) on a near-white canvas, never on pure black; even the dark cobalt floods carry white text

Live at prezi.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

prezi.com

Explore Prezi

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Prezi design system FAQ

Common questions about Prezi's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Prezi — official site

Prezi's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.