--- version: alpha name: "Cloudinary" description: "Cloudinary's marketing surface is media-API technical infrastructure dressed in confident navy-blue. The canvas is pure white `#ffffff` with deep navy `#0d152e` mid-page bands, and the type is Inter at modest mid-weights (500–600 for display) sitting in a structured, dev-tool-credible layout. Brand voltage is `#3448c5` Cloudinary blue — a deep saturated blue that anchors primary CTAs, brand wordmark, and feature accents. Where Stripe is single-color discipline and AWS is enterprise-cool, Cloudinary occupies a media-platform middle ground: technical credibility (code blocks, API references, transformation strings) paired with media warmth (photo galleries, video thumbnails, image-transformation demos). The signature design move is the **transformation chip** — a small horizontal pill showing a Cloudinary URL fragment (`f_auto,q_auto,w_800`) as a code-style accent inline with feature copy. Demo cards carry real before/after image transformations, video player UI, and DAM (digital asset management) interfaces. Section rhythm: white hero → image-transformation demo grid → dark navy code-block band → white feature grid → pricing → footer. The voice is technically confident, dev-friendly, and explicitly capability-focused — Cloudinary writes about MIME types, transformation parameters, and CDN edge nodes alongside the marketing copy." colors: bg: "#ffffff" bg-soft: "#f5f7fb" bg-elev: "#ffffff" bg-strong: "#e9ecf3" bg-dark: "#0d152e" bg-dark-elev: "#162042" surface: "#f5f7fb" text: "#0d152e" text-body: "#2c3354" text-muted: "#5a6080" text-faint: "#8c91a8" brand: "#3448c5" brand-hover: "#2b3da8" brand-active: "#23328e" brand-soft: "#e1e5f7" brand-deep: "#1a266b" on-brand: "#ffffff" on-dark: "#ffffff" link: "#3448c5" link-hover: "#2b3da8" accent-coral: "#ff5e58" accent-coral-soft: "#fde0de" accent-amber: "#f5b324" accent-amber-soft: "#fdedc6" accent-mint: "#3fc998" accent-mint-soft: "#d6f3e7" border: "#dbe0eb" border-strong: "#a8b0c4" border-soft: "#e9ecf3" shadow-tint: "rgba(13, 21, 46, 0.06)" shadow-deep: "rgba(13, 21, 46, 0.18)" code-bg: "#0d152e" code-text: "#d9e0f5" code-keyword: "#7eb6ff" code-string: "#ffb074" code-comment: "#8c91a8" info: "#3448c5" success: "#3fc998" warning: "#f5b324" danger: "#ff5e58" selection: "rgba(52, 72, 197, 0.18)" ring: "rgba(52, 72, 197, 0.45)" typography: display: fontFamily: "Inter Display" fontSize: "76px" lineHeight: 1.55 letterSpacing: "-0.022em" body: fontFamily: "Inter" fontSize: "16px" lineHeight: 1.55 mono: fontFamily: "JetBrains Mono" rounded: button: "8px" card: "12px" pill: "9999px" spacing: xs: "4px" sm: "8px" md: "16px" lg: "32px" xl: "48px" --- ## Overview ## Overview Cloudinary's marketing surface is media-API technical infrastructure dressed in confident navy-blue. The canvas is pure white `#ffffff` with deep navy `#0d152e` mid-page bands and footer, and the type is Inter at modest mid-weights (500–600 for display) sitting in a structured, dev-tool-credible layout that balances technical reference with marketing warmth. Brand voltage is `#3448c5` Cloudinary blue — a deep saturated blue that anchors primary CTAs, brand wordmark, and feature accents. Where Stripe is single-color discipline and AWS is enterprise-cool, Cloudinary occupies a media-platform middle ground: technical credibility (code blocks, API references, transformation strings) paired with media warmth (photo galleries, video thumbnails, image-transformation before/after demos). The signature design move is the **transformation chip** — a small horizontal pill showing a Cloudinary URL fragment (`f_auto,q_auto,w_800`) as a code-style accent inline with feature copy. These chips appear scattered through marketing prose, signaling "this is what the API actually looks like." Combined with multi-line code blocks on dark navy surfaces, the marketing reads as half product page, half developer documentation — which is the brand's distinct positioning. Demo cards carry real before/after image transformations (a low-quality JPEG transformed to WebP at AVIF), video player UI, and DAM (digital asset management) interfaces. Three accent colors — coral for image transformation moments, amber for quality optimization, mint for video/streaming — appear as pastel surfaces alongside brand-blue, providing visual variety without diluting the blue voltage. Section rhythm: white hero → image-transformation demo grid → dark navy code-block band → white feature grid → pricing → navy footer. The voice is technically confident, dev-friendly, and explicitly capability-focused — Cloudinary writes about MIME types, transformation parameters, and CDN edge nodes alongside the marketing copy. **Key Characteristics:** - Canvas is pure white `#ffffff` with deep navy `#0d152e` for dark bands and footer. - Brand voltage is `#3448c5` Cloudinary blue — deep saturated, dev-tool credible. - Display weight is 600 — confident-pragmatic, not aggressive. - The transformation chip (`f_auto,q_auto,w_800` style) is the signature visual element. - Code blocks appear as full-width dark navy surfaces with syntax highlighting. - Three accent colors: coral (transformation), amber (quality), mint (video/streaming). - Footer is **navy** — matches the hero card-dark, distinctive against white body. - Section padding is 96px between bands. - Card radius scale: 18px for feature pastels, 12px for content cards, 8px for primary CTAs and code blocks. ## Colors ### Primary - **Bg / Canvas** (`#ffffff`): Pure white. - **Text / Ink** (`#0d152e`): Very dark navy — the same hex as the dark band, signaling intentional unity. - **Brand / Cloudinary Blue** (`#3448c5`): Primary CTA, brand wordmark, link color, primary feature accent. ### Brand & Dark - **Brand Hover** (`#2b3da8`): Press state. - **Brand Active** (`#23328e`): Focused. - **Brand Soft** (`#e1e5f7`): Blue pastel surface. - **Brand Deep** (`#1a266b`): Deep navy-blue for layered compositions. - **Bg Dark** (`#0d152e`): Mid-page band, footer, code block background. - **Bg Dark Elev** (`#162042`): Elevated dark surface for inline code blocks within dark sections. - **On-Dark** (`#ffffff`): Pure white on dark surfaces. ### Accent — Three-Color Media Palette - **Coral** (`#ff5e58` saturated, `#fde0de` soft): Image transformation moments, hero accent dot, danger states. - **Amber** (`#f5b324` / `#fdedc6` soft): Quality optimization (auto-quality, format-optimization), warning states. - **Mint** (`#3fc998` / `#d6f3e7` soft): Video / streaming features, success states. The accent palette is deliberately small (three colors) — Cloudinary's discipline mirrors Stripe's single-blue but extends it with three semantic accents that map to media-domain concepts (image, quality, video). ### Code Syntax Palette - **Code BG** (`#0d152e`): Same as bg-dark. - **Code Text** (`#d9e0f5`): Cool-tinted white default text. - **Code Keyword** (`#7eb6ff`): Light blue for `const`, `function`, `return`. - **Code String** (`#ffb074`): Warm orange for string literals. - **Code Comment** (`#8c91a8`): Muted gray for `//` comments. ### Interactive - **Link** (`#3448c5`): Inline body links — same as brand. Underlines on hover. - **Link Hover** (`#2b3da8`): Pressed state. - **Selection** (`rgba(52, 72, 197, 0.18)`): Brand selection. ### Neutral Scale - **Ink** (`#0d152e`): Display + emphasis. - **Text Body** (`#2c3354`): Soft navy running-text. - **Text Muted** (`#5a6080`): Captions, footer links (lift to white-soft inside navy footer). - **Text Faint** (`#8c91a8`): Placeholder, disabled. ### Surface & Borders - **Bg** (`#ffffff`): Canvas. - **Bg Soft** (`#f5f7fb`): Cool-tinted card surface. - **Bg Strong** (`#e9ecf3`): Pre-footer cool band. - **Border** (`#dbe0eb`): Default 1px hairline — cool-tinted. - **Border Strong** (`#a8b0c4`): Stronger card / input border. - **Border Soft** (`#e9ecf3`): Softest divider. ### Shadow Colors All shadows use deep-navy-tinted ink `rgba(13, 21, 46, …)` — matches the brand's dark surface. Focus ring is brand at 45%. ### Semantic - **Info** (`#3448c5`): Same as brand. - **Success** (`#3fc998`): Mint. - **Warning** (`#f5b324`): Amber. - **Danger** (`#ff5e58`): Coral. ## Typography ### Font Family - **Primary**: `"Inter Display"` for display sizes (≥ 28px); `"Inter"` for body and UI. - **Mono**: `"JetBrains Mono"` (with `"SF Mono"` and `"Source Code Pro"` fallback) for code blocks, transformation chips, API references. - **Fallback chain**: `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif`. - **OpenType features**: `ss01`, `cv11` for Inter character; `tnum` for tabular figures in metrics and pricing. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | display-hero | Inter Display | 76 | 600 | 1.05 | -0.022em | ss01, cv11 | Mega hero | | display-xl | Inter Display | 60 | 600 | 1.08 | -0.02em | ss01 | Homepage hero h1 | | display-lg | Inter Display | 44 | 600 | 1.10 | -0.018em | ss01 | Feature h2 | | display-md | Inter Display | 36 | 600 | 1.16 | -0.014em | ss01 | Pricing / docs heads | | title-lg | Inter Display | 28 | 600 | 1.25 | -0.008em | — | Section titles | | title-md | Inter Display | 22 | 600 | 1.30 | -0.004em | — | Card titles | | title-sm | Inter | 18 | 600 | 1.40 | 0 | — | Small card titles | | label-md | Inter | 16 | 600 | 1.40 | 0 | — | List labels | | button | Inter | 15 | 600 | 1.20 | 0 | — | CTA labels | | body-lg | Inter | 18 | 400 | 1.55 | 0 | — | Hero subhead | | body-md | Inter | 16 | 400 | 1.55 | 0 | — | Default running-text | | body-sm | Inter | 14 | 400 | 1.50 | 0 | — | Caption support | | caption | Inter | 13 | 600 | 1.40 | 0.04em | — | Uppercase eyebrow | | caption-tabular | Inter | 13 | 500 | 1.30 | 0 | tnum | Metric chips | | legal | Inter | 12 | 400 | 1.40 | 0.01em | — | Footer legal | | code-md | JetBrains Mono | 14 | 400 | 1.55 | 0 | — | Code block default | | code-inline | JetBrains Mono | 14 | 500 | 1.40 | 0 | — | Inline code in body — heavier than block | | code-micro | JetBrains Mono | 12 | 500 | 1.40 | 0 | — | Transformation chips | ### Principles - **Display weight is 600.** Confident-pragmatic, dev-tool-appropriate. - **JetBrains Mono carries all code.** The choice signals dev-tool credibility. - **Inline code is weight 500** — heavier than block code (400) so it stands out within body type. - **Transformation chips use code-micro (12px / 500).** Smaller than inline code, deliberately compressed. - **Negative tracking scales with size.** -0.022em at 76px to 0 at 16px. - **Eyebrow tracking is 0.04em.** Subtle uppercase eyebrow voice. - **Tabular figures inside data tables and metric chips.** ## Layout ### Spacing System Base unit **4px**. Scale: `4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 128`. Section padding **96px** between bands. Card padding 32px (default), 48px (feature pastels), 64px (dark hero), 24px (code blocks). ### Grid & Container - **Max content width**: 1280px centered. - **Feature pastel grid**: 2-up at desktop with semantic pairing (image-coral + video-mint, quality-amber + asset-blue). 1-up at mobile. - **Pricing tier grid**: 4-up at desktop (Free, Plus, Advanced, Enterprise), 1-up at mobile. - **Code-block + explanation grid**: 2-column at desktop with code on left, explanation on right. ### Whitespace Philosophy Whitespace is moderate — 96px section padding, 32–64px card padding. Cloudinary balances dev-tool density (code blocks pack information) with marketing breathing room (hero sections use generous white space). ### Section Cadence White hero → 2-up image-transformation feature pair → dark navy code-block band → white feature grid → 3-up media-format demo → mid-page navy CTA → light pricing → navy footer. The navy bands appear 2× per long page (hero card-dark + footer), bracketing the white body. | Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column body; nav collapses to hamburger; pastel grid 1-up; hero h1 scales to 36px / 600; code blocks become horizontally scrollable; section padding 64px | | Tablet | 640–1024px | 2-up pastel grid; nav stays horizontal but tightens; mega-menu collapses to single column; hero at 48px | | Desktop | 1024–1280px | 2-up or 3-up pastel grid; full mega-menu; hero at 60–76px | | Wide | > 1280px | Same as desktop with more outer breathing room; max content width 1280px | ### Touch Targets - `button-primary` renders at 44 × 44px minimum. - `button-icon` is 36 × 36px (under WCAG 44 — used inside dense UI). - `text-input` height is 44px throughout. ### Collapsing Strategy - Nav collapses to hamburger at < 640px. - Mega-menu becomes accordion on tablet. - Code blocks become horizontally scrollable on mobile rather than wrapping. - Pricing comparison table converts to horizontally-scrollable swipe at < 1024px. - Before/after slider preserves its drag interaction at all breakpoints. ### Image Behavior - Before/after slider images crop to fit container. - Hero illustrations bleed full-width on mobile. - Customer logo strip wraps to 2–3 rows at smaller breakpoints. ### Container Queries Pricing tier cards use `@container (min-width: 360px)` for vertical-to-inline price display. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow | Canvas, top nav, footer, pastel feature cards | | 1 — Hairline | 1px `#dbe0eb` border | Default cards, inputs, transformation chips | | 2 — Ambient | `0 1px 2px rgba(13,21,46,0.05)` | Resting cards | | 3 — Standard | `0 6px 18px rgba(13,21,46,0.08)` | Card hover, sticky nav at scroll, pricing tiers | | 4 — Elevated | `0 14px 36px rgba(13,21,46,0.12), 0 2px 6px rgba(13,21,46,0.06)` | Mega-menu, integration cards | | 5 — Deep | `0 24px 56px rgba(13,21,46,0.18), 0 6px 12px rgba(13,21,46,0.08)` | Modals | ### Shadow Philosophy Deep navy-tinted shadows match the brand's dark voltage. Pastel cards stay flat. Code blocks have no shadow — they sit flush on the navy band. Modals stack two shadows for compound depth. ## Shapes | Tier | Token | Value | Use | |---|---|---|---| | Micro | micro | 2px | Cookie / legal CTAs | | Standard | sm | 6px | Inputs, transformation chips, small chips | | Comfortable | md | 8px | Default cards, primary CTAs, code blocks, secondary CTAs | | Relaxed | lg | 12px | Default content cards, elevated cards | | Featured | xl | 18px | Pastel feature cards, dark hero, modals | | Pill | pill | 9999px | Status pills, badges | | Full | full | 9999px / 50% | Avatars, icon buttons | ## Components ### Buttons (5 variants) **`button-primary`** — Background `#3448c5` Cloudinary blue, white text, type 15px / 600 Inter, padding 12 × 22px, radius 8px. "Sign up free" / "Get started" / "View docs". Hover lightens via 4% white overlay; active darkens. Focus shows 3px brand ring at 45% alpha. **`button-secondary`** — White, ink text, 1px border `#a8b0c4`, same shape. "Talk to sales" / "View docs". **`button-tertiary`** — Inline link-style. Transparent, brand-blue text, 10 × 16px padding, 8px radius. Often paired with a chevron icon. **`button-on-dark`** — White over navy. White background, ink text. **`button-on-dark-ghost`** — Translucent ghost on navy. Transparent, white text, 1px white-30%-alpha border. **`button-icon`** — 36 × 36px circular. White, 1px hairline, ink icon. ### Cards **`card-default`** — Bg-soft cool surface, 12px radius, 32px padding. **`card-elevated`** — White, 12px radius, 32px padding, 1px border, standard shadow. **`card-feature-coral` / `amber` / `mint` / `blue`** — Pastel feature cards. Each uses the corresponding `accent-{name}-soft` background (or `brand-soft` for blue), 18px radius, 48px padding. Surface signals feature semantic. **`hero-card-dark`** — Mid-page navy CTA. `#0d152e`, white text, 18px radius, 64px padding. Often holds an embedded code block. **`code-block`** — Full-width dark navy surface, 8px radius, 24px padding. JetBrains Mono 14px / 400, syntax-highlighted. Typically 6–12 lines of Node.js, React, or REST API example. ### Transformation Chip (the signature component) **`transformation-chip`** — Small inline horizontal pill showing a Cloudinary URL fragment. Background `#f5f7fb` bg-soft, brand-blue text, 6px radius, 4 × 8px padding, JetBrains Mono 12px / 500, 1px border `#dbe0eb`. Example contents: `f_auto,q_auto,w_800`, `e_blur:200`, `c_fill,g_auto`. These chips appear scattered through marketing copy as inline code-style accents — the brand's most recognizable visual element. ### Badges & Pills - **`badge-tag`** — Default category. Bg-soft, muted text, rounded pill, 4 × 10px, 12px font. - **`badge-new`** — "New" feature pill. Brand-soft surface, brand-active text. ### Inputs / Forms **`text-input`** — White, 8px radius, 12 × 14px padding, 44px height, 1px `#a8b0c4` border. Inter 16px / 400. **`text-input-focus`** — Border recolors to brand; 3px brand ring at 20% alpha. ### Navigation **`top-nav`** — 64px-tall opaque white bar (no backdrop-blur — Cloudinary opts for solid for clean visual weight against image-heavy pages below). Wordmark left in brand blue. Mega-menu center (Products, Solutions, Developers, Resources, Pricing) — opens full-width panel on hover with feature thumbnails. Right cluster carries "Talk to sales" text link, "Login" text link, "Sign up free" `button-primary`. **`footer`** — **Navy `#0d152e` background**. White text, 96px padding, 5–6 column desktop link grid (Products / Solutions / Developers / Company / Legal). Lower legal row at 12px white-50%-alpha. Includes a small JetBrains Mono code-snippet credit at the very bottom. ### Toasts & Modals **`toast`** — Navy background, white text, 8px radius, deep shadow. **Modal** — White, 18px radius, 48px padding, deep shadow, navy-tinted backdrop overlay 70% alpha. ### Decorative **Before/After transformation slider** — A draggable image comparison slider showing original (left) and Cloudinary-transformed (right) images. The handle is a brand-blue circle with horizontal arrows. Hovering pauses the auto-animation; dragging reveals more or less of either side. **API request/response block pair** — Side-by-side dark navy code blocks: left shows the API request (POST /upload with parameters), right shows the JSON response. Used in developer-focused feature sections. ### Easing Curves - **Standard** `cubic-bezier(0.4, 0, 0.2, 1)`. - **Emphasized** `cubic-bezier(0.16, 1, 0.3, 1)`. - **Spring** `cubic-bezier(0.32, 0.72, 0, 1)` — before/after slider physics. ### Duration Buckets - **Instant (80ms)**: Color hover. - **Fast (160ms)**: Button hover, focus ring, transformation-chip hover. - **Standard (240ms)**: Card hover, dropdown, mega-menu, code-block syntax-highlight tooltip. - **Slow (380ms)**: Pastel reveal, modal entrance, before/after slider auto-animation. - **Page (480ms)**: Inter-page transition. ### Per-Component Micro-States - **Button hover (primary)**: 4% white overlay; no transform; 160ms. - **Card hover (pastel)**: 4px translate-y lift + standard shadow; 240ms emphasized. - **Transformation chip hover**: Border color shifts `#dbe0eb` → `#3448c5` brand; subtle background tint; 160ms. - **Code block token hover**: A small tooltip appears explaining the token (e.g., "f_auto: automatic format selection"); 240ms fade-in. - **Before/after slider**: Auto-cycles 0% → 100% → 0% over 6 seconds with easing; pauses on hover; resumes after pointer-leave. - **Link hover**: Underline grows 0 → 1px under text; 160ms. - **Input focus**: Border recolors → brand; 3px ring expands at 20% alpha; 160ms. ### Page Transitions Default fade. Inter-page route is 480ms emphasized fade-in with 12px translate-y. Section reveals are 380ms fade + 16px offset. Pastel feature cards stagger 80ms increments inside a row. ### Reduced Motion All transforms removed. Before/after slider falls back to static side-by-side. Code-block tooltips appear instantly without fade. ### Contrast Pairs - **Text on bg**: `#0d152e` on `#ffffff` = **17.6** — AAA. - **Body on bg**: `#2c3354` on `#ffffff` = **12.2** — AAA. - **Muted on bg**: `#5a6080` on `#ffffff` = **6.6** — AA. - **On-brand**: white on `#3448c5` = **7.4** — AAA. - **On-dark**: white on `#0d152e` = **16.8** — AAA. - **Link on bg**: `#3448c5` on `#ffffff` = **7.4** — AAA. - **Code text**: `#d9e0f5` on `#0d152e` = **11.4** — AAA. - **Code keyword**: `#7eb6ff` on `#0d152e` = **8.0** — AAA. - **Code string**: `#ffb074` on `#0d152e` = **8.6** — AAA. ### Focus Indicators 3px solid brand at 45% alpha with 2px offset on every focusable element. ### ARIA Patterns - **Buttons**: Native `