--- version: alpha name: "Prezi" website: "https://prezi.com" description: >- An AI-driven non-linear presentation platform whose marketing site runs Area-Normal display in weight 800 across a stark white canvas, with a saturated cobalt blue (Prezi Blue, the primary CTA fill) holding the only chromatic brand moment — and a full-bleed cobalt mid-page band that flips the figure-ground for "Just describe what you need." Inter handles every body, nav, and label tier; corners sit at a 16px default with an 8px CTA radius; the page alternates ink-on-cream editorial sections with two saturated cobalt floods. seo: title: "Prezi Design System for React — cobalt blue, Area-Normal display, 16 components" metaDescription: "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. Tokens for React, Next.js, and AI coding tools." highlights: - "Two-band cobalt flood — Prezi Blue fills two full-page sections rather than a held-in-reserve CTA accent, inverting the typical SaaS reveal pattern" - "Area-Normal weight 800 display — 57.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 voice — every body, label, and nav surface runs Inter at 14-18px while Area-Normal carries only the display tier" - "16px default radius — large 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 black — body 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" tags: - "Productivity & SaaS" - "Design & Creative Tools" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://prezi.com" title: "Prezi — official site" description: "Prezi's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Prezi's primary brand color?" answer: "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." - id: "typography" title: "What typefaces does Prezi use, and what should I use as substitutes?" answer: "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." - id: "rounded-style" title: "What is Prezi's corner-radius philosophy?" answer: "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." - id: "cobalt-band" title: "Why does Prezi flood entire page sections with cobalt blue?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own AI-presentation marketing site?" answer: "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." mockups: - "marketing-hero" - "pricing-table" colors: primary: "#0325e1" primary-hover: "#0115aa" primary-soft: "#d2d8ff" primary-dark: "#000369" secondary: "#ff6100" link: "#1e55eb" ink: "#111927" ink-secondary: "#384250" ink-tertiary: "#4d5761" ink-muted: "#676782" ink-placeholder: "#9da4ae" canvas: "#f9fafb" hairline: "#d2d6db" hairline-soft: "#e5e7eb" shadow: "#0a0d12" selection-bg: "#ff1f8b" typography: display-xl: fontFamily: "\"area-normal\", sans-serif" fontSize: 57.6px fontWeight: 800 lineHeight: 63.36px letterSpacing: "-1.152px" display-lg: fontFamily: "\"area-normal\", sans-serif" fontSize: 48px fontWeight: 800 lineHeight: 57.6px letterSpacing: "-1.44px" display-md: fontFamily: "\"area-normal\", sans-serif" fontSize: 28px fontWeight: 800 lineHeight: 33.6px letterSpacing: "-0.84px" heading-md: fontFamily: "\"area-normal\", sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 31.2px letterSpacing: "-0.72px" body-lg: fontFamily: "Inter, Tahoma, sans-serif" fontSize: 18.4px fontWeight: 600 lineHeight: 27.6px letterSpacing: 0 body-md: fontFamily: "Inter, Tahoma, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-sm: fontFamily: "Inter, Tahoma, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 19.6px letterSpacing: "0.2px" label-md: fontFamily: "Inter, Tahoma, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 24px letterSpacing: 0 button-md: fontFamily: "Inter, Tahoma, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 24px letterSpacing: 0 nav-link: fontFamily: "Inter, Tahoma, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 uppercase-tag: fontFamily: "Inter, Tahoma, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 24px letterSpacing: "0.4px" rounded: none: "0px" sm: "4px" md: "8px" lg: "12px" xl: "16px" spacing: xs: "4px" sm: "6px" base: "8px" md: "12px" lg: "16px" xl: "24px" 2xl: "32px" 3xl: "64px" components: hero-section: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "112px 32px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" cobalt-band: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.display-lg}" padding: "112px 32px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-lg}" section-heading-inverse: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-lg}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink-secondary}" typography: "{typography.body-md}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "16px 24px" height: "56px" button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "16px 24px" height: "56px" button-coral: backgroundColor: "{colors.secondary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "12px 20px" height: "48px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "12px 20px" height: "48px" borderColor: "{colors.hairline}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "16px 32px" height: "64px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink-secondary}" typography: "{typography.nav-link}" padding: "8px 12px" card-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "32px 40px" borderColor: "{colors.hairline-soft}" card-cobalt-feature: backgroundColor: "{colors.primary-dark}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "32px 40px" testimonial-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-secondary}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "32px 40px" borderColor: "{colors.hairline-soft}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "12px 20px" height: "44px" borderColor: "{colors.hairline}" --- ## 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 | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 57.6px | 800 | 63.36px | -1.152px | Hero h1 ("Better presentations, faster with AI") | | `{typography.display-lg}` | 48px | 800 | 57.6px | -1.44px | Section h2 on cobalt bands ("Just describe what you need", "One platform for your whole team") | | `{typography.display-md}` | 28px | 800 | 33.6px | -0.84px | Sub-display headings, feature-block titles | | `{typography.heading-md}` | 24px | 700 | 31.2px | -0.72px | h3 / category-block titles | | `{typography.body-lg}` | 18.4px | 600 | 27.6px | 0 | Section lead paragraphs | | `{typography.body-md}` | 16px | 400 | 24px | 0 | Default running text — body paragraphs, captions | | `{typography.body-sm}` | 14px | 500 | 19.6px | 0.2px | Small labels, nav-link captions, breadcrumbs | | `{typography.label-md}` | 16px | 500 | 24px | 0 | Inline labels, form labels | | `{typography.button-md}` | 16px | 600 | 24px | 0 | Primary and secondary button labels | | `{typography.nav-link}` | 16px | 400 | 24px | 0 | Top-nav link labels | | `{typography.uppercase-tag}` | 16px | 700 | 24px | 0.4px | All-caps tag labels inside dark feature mockups | ### 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.