What is Sora's primary brand color?

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.

What typeface does Sora use?

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.

Why does Sora use pure black instead of a softer charcoal?

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.

What is Sora's corner-radius philosophy?

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.

Can I use this DESIGN.md to build my own AI-video gallery site?

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.

Sora Design System

Sora's product surface is a pure-black canvas built around a video gallery.

About Sora DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source sora.com

AI & LLM Platforms
Music, Video & Streaming

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.

What makes it distinct

Video-as-canvasthe 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 floorthe 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 marketingsora.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 lineagethe 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 archetypeexplore and home routes both render a masonry grid of 16:9 video thumbnails with autoplay on hover, no caption chrome on the tiles themselves

Live at sora.com

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

sora.com

Explore Sora

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

Surface

Page and card backgrounds.

Sora design system FAQ

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

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

Browse all design systems

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

Sora — official site

Sora's public product surface — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

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