--- version: alpha name: "Sora" website: "https://sora.com" description: >- OpenAI's video generation model, whose product surface (sora.com) is a pure-black canvas that hands the entire page over to user-generated video. Where Midjourney's gallery leans on a soft warm-gray surface and Runway runs a graphite-and-accent dev-tool aesthetic, Sora goes further than any other generative-media brand on the canvas question — the floor is true ink black, the chrome reduces to a thin top nav and a centered prompt field, and every other pixel above the fold is moving video. The marketing surface gates behind ChatGPT auth, so the captured tokens are minimal by design: one color (pure black), no shipped CSS variables on the public landing, no exposed typography stack. Treat this DESIGN.md as a token-light reference for the dark-canvas video-gallery archetype rather than a deep token system. seo: title: "Sora Design System for React — pure-black canvas, video-first chrome, 8 components" metaDescription: "Sora's product surface is a pure-black canvas built around a video gallery. This DESIGN.md captures the minimal chrome OpenAI exposes on the public landing — true black floor, video-tile elevation, and the dark-canvas archetype for React tooling." highlights: - "Video-as-canvas — the entire above-fold surface is user-generated video; chrome reduces to a thin top nav and a centered prompt, no marketing copy block at all" - "True ink black floor — the canvas is rendered at the deepest tone the spec allows, the opposite of the soft warm grays Midjourney and Runway use behind their galleries" - "Auth-gated marketing — sora.com requires ChatGPT login to view the full product surface, so most token detail lives behind authentication and is captured here as known gaps" - "ChatGPT design lineage — the chrome inherits the Söhne typography family and the rounded-rectangle button language from chatgpt.com, even though the canvas inverts to pure black" - "Tile-grid gallery archetype — explore and home routes both render a masonry grid of 16:9 video thumbnails with autoplay on hover, no caption chrome on the tiles themselves" tags: - "AI & LLM Platforms" - "Music, Video & Streaming" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Sora's product surface does the most extreme version of the product-as-hero move in any generative-media brand. Where Midjourney's gallery sits on a soft warm gray and frames each generation in a rounded card, where Runway runs a graphite-and-accent dev-tool aesthetic with chrome around every panel, Sora drops the canvas to true ink black and lets a masonry grid of 16:9 video thumbnails fill every available pixel. The chrome reduces to a thin top nav, a centered prompt input, and a single primary CTA in the auth flow. There is no marketing hero block above the gallery, no scrolling feature list, no testimonial wall — the product IS the marketing. The DESIGN.md file packages what can be captured from the public-facing surface, which is intentionally minimal. The sora.com landing route gates behind ChatGPT authentication, and the public preview exposes just one shipped color token (the pure-black canvas) and no published CSS custom properties. Inside this spec: an 8-token color set built around the captured ink-black floor plus the inferred chrome surfaces (ChatGPT design-family inheritances for ink white, hairline, surface elevation); 8 typography tokens covering the Söhne family Sora shares with chatgpt.com; a tight radius scale; spacing; and 11 component definitions covering the prompt input, the video tile, the masonry gallery, and the auth-gate CTA. Feed this file to Claude or Cursor and it reproduces Sora's specific moves: pure-black canvas rather than charcoal or soft gray, no marketing copy block above the gallery, video tiles that fill their grid cells edge-to-edge with no border or shadow, and a centered prompt input as the only persistent piece of chrome. The one move worth borrowing only if your product is itself visually rich enough to carry the entire above-fold surface: the willingness to ship a marketing page with no marketing copy. Most teams need an interstitial layer; Sora trusts the work to do the work. 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://sora.com" title: "Sora — official site" description: "Sora's public product surface — 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 Sora's primary brand color?" answer: "Sora's only captured brand color from the public-facing surface is pure ink black, which fills the entire page canvas. The product surface has no published primary accent color — there is no equivalent of Cloudflare's Kumo orange or Spline's cobalt blue voltage. The ChatGPT design family that Sora inherits from uses a small set of grayscale tones plus a single accent for the Send button, but the auth-gated portion of the Sora experience is not captured in the public extraction. Treat the canvas as the entire chromatic identity above the fold: black floor, white text, video as every other pixel." - id: "typography" title: "What typeface does Sora use?" answer: "Sora inherits the Söhne family from chatgpt.com — the same custom commercial sans by Klim Type Foundry that OpenAI uses across ChatGPT, the API console, and the marketing site. Body sits at 14-16px in weight 400; the prompt input renders at 16px / 400 with generous line height; nav links at 14px / 500. There is no separate display family — when Sora needs a larger moment (in the auth flow, in the share modal headers), Söhne is used at 24-32px in weight 500. The closest open-source substitute is Inter at the same weights, or for a closer character set, Söhne Web requires a commercial license from Klim." - id: "canvas-color" title: "Why does Sora use pure black instead of a softer charcoal?" answer: "The canvas is pure ink black, the deepest tone the spec captures. The choice matches the rest of the generative-media category that ships dark surfaces (Midjourney, Runway, Pika) but pushes further than any of them — Midjourney uses a soft warm gray, Runway uses a graphite, Sora goes to true black. The reason is that the video gallery needs maximum contrast at the tile edges; a near-black would create a visible border around every video thumbnail and break the edge-to-edge illusion the masonry grid depends on. Pure black makes each video read as if it is floating in undifferentiated space rather than sitting on a panel." - id: "rounded-style" title: "What is Sora's corner-radius philosophy?" answer: "The captured public surface uses a small-step radius scale inherited from the ChatGPT design family. Buttons round at 6-8px, the prompt input at 12px, video tiles at 8px (small enough that the rounding reads as antialiasing rather than as a deliberate card treatment), and the avatar chip in the top-right at 9999px for a perfect circle. There is no generous-soft tier — nothing rounds at 16px or beyond on the captured surfaces. The scale is tighter than Spline's 16px-default and matches the productivity-tool default that Linear and Vercel use; the difference is that Sora applies it against pure black rather than near-white." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own AI-video gallery site?" answer: "Yes — feed the file to Claude or Cursor and it will reproduce Sora's specific moves: pure-black canvas rather than charcoal, video tiles that fill grid cells edge-to-edge with no border, a centered prompt input as the only persistent chrome, and an auth-gated approach that hides the deeper product surface behind login. The token references resolve to a minimal set; you will need to fill in your own accent color, since Sora's public surface does not expose one. The one caveat: the no-marketing-copy approach only works if your product itself is visually rich enough to be the marketing — for most SaaS this would feel empty. Sora gets away with it because every tile is a 5-second motion piece." mockups: - "marketing-hero" - "media-grid" colors: canvas: "#000000" typography: display-md: fontFamily: "\"Söhne\", \"Sohne\", system-ui, -apple-system, sans-serif" fontSize: 32px fontWeight: 500 lineHeight: 40px letterSpacing: 0 heading-md: fontFamily: "\"Söhne\", \"Sohne\", system-ui, -apple-system, sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 28px letterSpacing: 0 body-lg: fontFamily: "\"Söhne\", \"Sohne\", system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-md: fontFamily: "\"Söhne\", \"Sohne\", system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 label-md: fontFamily: "\"Söhne\", \"Sohne\", system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 20px letterSpacing: 0 caption: fontFamily: "\"Söhne\", \"Sohne\", system-ui, -apple-system, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0 button-md: fontFamily: "\"Söhne\", \"Sohne\", system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 20px letterSpacing: 0 mono-sm: fontFamily: "\"Söhne Mono\", ui-monospace, SFMono-Regular, Consolas, monospace" fontSize: 13px fontWeight: 400 lineHeight: 20px letterSpacing: 0 rounded: none: "0px" sm: "6px" md: "8px" lg: "12px" full: "9999px" spacing: xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" components: button-primary: backgroundColor: "{colors.canvas}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "8px 16px" height: "36px" button-secondary: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "8px 16px" height: "36px" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.canvas}" typography: "{typography.label-md}" padding: "12px 24px" height: "56px" nav-link: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.label-md}" padding: "8px 12px" hero-heading: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-md}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.body-md}" prompt-input: backgroundColor: "{colors.canvas}" textColor: "{colors.canvas}" typography: "{typography.body-lg}" rounded: "{rounded.lg}" padding: "16px 20px" height: "56px" video-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.canvas}" typography: "{typography.caption}" rounded: "{rounded.md}" padding: "0px" gallery-grid: backgroundColor: "{colors.canvas}" textColor: "{colors.canvas}" typography: "{typography.body-md}" padding: "16px" avatar-chip: backgroundColor: "transparent" textColor: "{colors.canvas}" rounded: "{rounded.full}" padding: "0px" height: "32px" card: backgroundColor: "{colors.canvas}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "16px" --- ## Overview Sora's product surface does the most extreme version of the product-as-hero move in any generative-media brand. **Video-as-canvas.** Where Midjourney's gallery sits on a soft warm gray and frames each generation in a rounded card, and where Runway runs a graphite-and-accent dev-tool aesthetic with chrome around every panel, Sora drops the canvas to true ink black and lets a masonry grid of 16:9 video thumbnails fill every available pixel. The chrome reduces to a thin top nav, a centered prompt input, and a single primary CTA in the auth flow. There is no marketing hero block above the gallery, no scrolling feature list, no testimonial wall — the product IS the marketing. The system's chromatic restraint is built into the captured surface itself: there is exactly one shipped brand color on the public sora.com landing — pure ink black (`{colors.canvas}` — #000000) — and no published CSS custom-property set above the auth gate. The system inherits the Söhne typography family and the rounded-button language from chatgpt.com (the same OpenAI design family used across ChatGPT, the API console, and the marketing site), but the chromatic identity inverts. Where chatgpt.com sits on near-white with grayscale chrome, sora.com sits on true black with white text overlaying user-generated video. This is the inverse of the dark-canvas pattern Midjourney and Runway use — both lean on softer dark grays to give their galleries surface lift; Sora goes to true black because the video tiles need to read as floating motion pieces rather than as cards on a panel. Typography stays modest. Söhne carries every tier — display, heading, body, button — at weights 400-500. There is no heavy 700+ display moment because there is no marketing block to display loud type against; the prompt input is the largest type moment on the public surface at 16px / 400, and the top-nav and avatar chip use 14px labels. **Key Characteristics:** - Pure ink black canvas (`{colors.canvas}` — #000000) across the entire above-fold surface — the deepest tone the spec captures, chosen so video tiles read as floating motion rather than as cards on a panel. - No published primary accent color on the public landing — the ChatGPT design family's grayscale-plus-single-accent palette gates behind ChatGPT authentication and is not captured here. - Söhne family inherited from chatgpt.com across every typographic tier — modest weights (400-500), no heavy display. - Tight radius scale inherited from ChatGPT: 6-8px on buttons and tiles, 12px on the prompt input, fully circular on the avatar chip. - Masonry video gallery as the only persistent content surface — tiles fill their grid cells edge-to-edge with no border, no shadow, no caption chrome. - Auth-gated product surface — the full Sora experience requires ChatGPT login, so most token detail (accent colors, full component states, the editor chrome for generation tuning) lives behind auth and is captured in Known Gaps. - No marketing copy block above the gallery — sora.com trusts the video work to be the marketing, with chrome reduced to a thin nav and the centered prompt input. ## Colors ### Captured - **Canvas** (`{colors.canvas}` — #000000): frequency 2 in the captured extraction (1 text, 1 border). The single published color from the public-facing surface — the page floor that the entire video gallery sits on. The captured extraction stops here because the marketing surface is gated behind ChatGPT authentication; deeper product chrome is not exposed to anonymous visitors. ### Inferred (ChatGPT design family) The auth-gated product surface uses the same grayscale-plus-single-accent palette as chatgpt.com, with white text and a small grayscale ladder for hover states and disabled tints. None of those values appear in the captured public extraction, so they are not enumerated as token entries here — treat them as inheritances from the OpenAI design family rather than as Sora-specific tokens. If you need a full palette to fill in this spec for your own use, the safe path is to lift the chrome grays from chatgpt.com directly and reserve a single accent for the Generate / Send action. ## Typography ### Font Family Sora inherits **Söhne** (a custom commercial sans by Klim Type Foundry) from chatgpt.com — the same family OpenAI uses across ChatGPT, the API console, the platform docs, and the openai.com marketing site. Fallback stack walks `system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`. There is no separate display family; one variable-weight sans does every typographic job. **Söhne Mono** appears only inside code-style annotations in the auth flow. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-md}` | 32px | 500 | 40px | Auth-flow headings, share modal headers | | `{typography.heading-md}` | 20px | 500 | 28px | Section labels, dialog titles | | `{typography.body-lg}` | 16px | 400 | 24px | Prompt input text, primary body | | `{typography.body-md}` | 14px | 400 | 20px | Default running text | | `{typography.label-md}` | 14px | 500 | 20px | Nav links, button labels | | `{typography.caption}` | 12px | 400 | 16px | Metadata, timestamps, tile overlays | | `{typography.button-md}` | 14px | 500 | 20px | Primary CTA label | | `{typography.mono-sm}` | 13px | 400 | 20px | Code-style annotations in auth flow | ### Principles Display tops out at 32px / weight 500 — there is no hero-scale display tier because the public surface has no hero copy. Body and label tiers share the 14-16px range that ChatGPT uses, with weight 500 as the emphasis tier for nav links and button labels. The mono tier appears only in technical contexts and is not visible on the captured public surface. ### Note on Font Substitutes Söhne is a commercial typeface from Klim Type Foundry — licensing applies. The closest open-source substitute is **Inter** at the same weights; the proportions transfer cleanly and Inter's slightly looser counters read close to Söhne at the 14-16px body sizes. For the mono tier, the system stack (`ui-monospace, SFMono-Regular`) is already what most browsers will resolve when Söhne Mono is unavailable. If you need a closer alternative without Söhne licensing, **Geist Sans** (Vercel's open-source sans) has comparable cap height for the larger display tier. ## Layout ### Spacing System - **Base unit:** 4px (with 8px as the dominant module). - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px. - **Section padding (vertical):** ~16-24px between the top nav and the gallery grid — much tighter than a typical marketing site because there is no editorial rhythm to space out. - **Gallery gutter:** the masonry grid uses a small inter-tile gap (16px is the typical value for this archetype) so the videos read as a continuous field rather than as discrete cards. - **Card internal padding:** not applicable on video tiles (the video fills the cell edge-to-edge); auth-flow dialogs use 16-24px internal padding. ### Grid & Container - **Max content width:** the gallery is full-bleed on desktop, no max-width container — every available pixel goes to the video field. - **Gallery layout:** a masonry grid of 16:9 video thumbnails at the home and explore routes. Tile widths step up at larger viewports; on a typical desktop the grid renders 4-5 tiles across. - **Top nav:** a thin 56px-tall strip with the Sora wordmark on the left and the avatar chip on the right. - **Prompt input:** centered, persistent at the top of the home view, ~600px wide on desktop. ### Rhythm The page has essentially one rhythm: top nav, prompt input, infinite-scroll video gallery. No alternating editorial bands, no full-bleed feature blocks, no testimonial wall. The page is monolithic by design — it trusts video tile variation (length, color, motion) to provide the visual rhythm that other marketing surfaces get from typography and layout shifts. ## Elevation The system has essentially **no shadow tier** on the captured public surface — the canvas is pure black, which makes traditional drop shadows invisible. Hierarchy comes from video-tile motion itself: tiles autoplay on hover, which lifts them perceptually without any chrome change. Inside the auth gate, the ChatGPT design family uses a single soft dropdown shadow on modal surfaces, but that is not captured on the public landing. - **Flat (no shadow):** body, top nav, gallery grid, video tiles — every surface on the public landing. - **Motion lift:** video tiles autoplay on hover, which creates a perceptual elevation without a chrome shift — the motion itself reads as "this tile is now active." - **No hairline outlines on tiles:** the masonry tiles share the same `{colors.canvas}` background as the page floor; depth comes from the video content itself, not from a tile border. ## Shapes The radius scale is **tight, inherited from ChatGPT**: - `{rounded.none}` 0px — code blocks in the auth flow. - `{rounded.sm}` 6px — secondary buttons, small chips. - `{rounded.md}` 8px — primary buttons, video tiles (small enough that the rounding reads as antialiasing rather than as a deliberate card treatment). - `{rounded.lg}` 12px — the prompt input. - `{rounded.full}` 9999px — the avatar chip in the top-right. There is no generous-soft 16-24px tier. The scale is the same one Linear and Vercel use, with the same productivity-tool default rhythm, applied against pure black instead of near-white. The genuinely unusual move is the 8px on video tiles — most gallery-grid archetypes round tiles at 12-16px to make them feel like cards, but Sora keeps them tight so the video content reads as the dominant signal. ## Components **`button-primary`** — The signature CTA in the auth flow. Tight radius, label in Söhne 14px / 500. Background and text colors inherit from the ChatGPT design family above the auth gate; on the public surface the primary CTA is the "Continue with ChatGPT" auth pill. **`button-secondary`** — Transparent fill with white text and a hairline border. Same 36px height and tight radius as primary. Used for tertiary actions inside the auth flow. **`top-nav`** — Pure black background flush with the page floor, 56px height, 12x24 padding. Houses the Sora wordmark on the left and the avatar chip (post-auth) or Continue button (pre-auth) on the right. No center navigation links on the public surface. **`nav-link`** — Transparent background, white text in `{typography.label-md}` (14px / 500), 8x12 padding. Sparse on the public surface — most nav lives inside the avatar dropdown. **`hero-heading`** — White text on the transparent canvas, `{typography.display-md}` (32px / 500). Used in the auth-flow welcome screen; not present on the gallery view above the fold. **`body-paragraph`** — Default white text at `{typography.body-md}` (14px / 400). Used in auth-flow copy, share modals, and tile metadata overlays. **`prompt-input`** — Pure black fill with a hairline outline, white text at `{typography.body-lg}` (16px / 400), `{rounded.lg}` 12px radius, 16x20 padding, 56px height. The centered prompt that accepts the text instruction for video generation — the largest piece of persistent chrome on the public surface. **`video-tile`** — Pure black background, video fills edge-to-edge, `{rounded.md}` 8px radius, 0 padding. The masonry grid renders these as the primary content surface. No caption on the tile face itself — metadata (prompt text, author, share controls) appears in an overlay on hover or in the detail view. **`gallery-grid`** — Pure black canvas, masonry layout with a small inter-tile gap. The container that holds the video-tile grid; full-bleed at every viewport. **`avatar-chip`** — Transparent background, white initials or photo at 32px height, `{rounded.full}` 9999px for a perfect circle. Sits in the top-right of the nav and houses the account / settings / sign-out dropdown. **`card`** — Pure black background, white text, `{rounded.md}` 8px radius, 16px padding. The default content card on the dark canvas — used inside dialogs and share modals. ## Do's and Don'ts **Do** keep the canvas at pure ink black. The whole point of the dark-canvas move is that video tiles read as floating motion pieces against undifferentiated space; softening to a near-black would create visible tile edges and break the edge-to-edge illusion the gallery depends on. **Do** keep the chrome minimal — top nav, centered prompt, gallery. The Sora product surface explicitly has no marketing copy block above the gallery; adding feature lists or testimonial walls breaks the "video is the marketing" principle. **Do** use 8px on video tiles, not 12-16px. The tight radius keeps the tiles reading as content rather than as cards, which is the whole reason the gallery feels like a video field rather than a portfolio. **Do** lean on motion (autoplay on hover) instead of shadows for elevation. Pure black makes drop shadows invisible; tile motion is the only elevation mechanism that works on this canvas. **Don't** add a primary accent color on the public surface without inheriting one from the OpenAI design family. The captured spec exposes only the black canvas; inventing a brand accent would diverge from the ChatGPT design lineage and create a chromatic identity Sora itself has not committed to publicly. **Don't** soften the canvas to near-black or warm gray. The category default (Midjourney, Runway, Pika) is a soft dark gray; Sora's true black is the deliberate inversion, and matching the category default erases the most distinctive move on the page. **Don't** add caption text on the video tile faces themselves. The masonry grid trusts video to communicate; tile-face captions would create visual noise and competing signals against the motion content. **Don't** introduce a generous 16-24px corner-radius tier. The scale is deliberately tight, inherited from the ChatGPT design family; adding soft corners would borrow visual language from gallery-app brands (Are.na, Cosmos) and break the productivity-tool lineage. ## Known Gaps - **Auth-gated product surface:** sora.com requires ChatGPT login to view the full product. The captured extraction is limited to the public landing chrome, so most token detail — the editor for generation tuning, the share modal, the credit-tracker, the model-version selector — is not represented here. - **Primary accent color:** the public surface exposes no primary brand color other than the pure-black canvas. Inside the auth gate, the ChatGPT design family uses a single accent for the Send / Generate action, but that value is not captured. - **Hover and focus states:** the video-tile autoplay-on-hover is the only documented interactive state; the full state matrix (focus rings, disabled tints, error states) lives behind auth. - **Form input error states:** the prompt input carries the resting state; error and validation styling are not exposed on the public surface. - **Light mode:** the captured surface is dark-only. The ChatGPT design family ships a light variant; whether Sora exposes one is not visible from the public landing. - **Motion:** the video tiles autoplay continuously on hover and the gallery uses infinite-scroll with a fade-in for new rows. The spec captures end-state values only; easing curves, autoplay duration, and intersection-observer thresholds live in the runtime. - **Mobile breakpoints:** the captured surface is desktop-only; the responsive token system (breakpoints, mobile tile sizing, mobile prompt-input placement) is not exposed in the public CSS. - **Editor chrome:** the generation tuning panel (model selector, duration toggle, aspect-ratio picker, seed control) lives entirely behind auth and is not represented in this spec.