Sora Design System

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

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.