--- version: alpha name: "Pixar" description: "A bone-white gallery wall where black-framed film key art does all the talking and Proxima Nova steps quietly aside" colors: background: "#ffffff" surface: "#000000" surface-muted: "#f5f5f5" ink: "#000000" ink-inverse: "#ffffff" ink-muted: "#808080" ink-subtle: "#999999" primary: "#000000" on-primary: "#ffffff" link-hover: "#3860be" # was rgb(56, 96, 190) — Google format requires hex accent-blue: "#0077da" # was rgb(0, 119, 218) — toggle/active border accent-green: "#32ae88" # was rgb(50, 174, 136) — success border border: "#d1d1d1" border-strong: "#bbbbbb" border-subtle: "#dcdddf" # was rgb(220, 221, 223) — Google format requires hex shadow-soft: "#c7c5c7" # was rgb(199, 197, 199) — Google format requires hex typography: display-hero: fontFamily: "proxima-nova, Montserrat, Helvetica, Arial, sans-serif" fontSize: 96px fontWeight: 300 lineHeight: 1.0 letterSpacing: -1px display: fontFamily: "proxima-nova, Montserrat, Helvetica, Arial, sans-serif" fontSize: 48px fontWeight: 300 lineHeight: 1.0 letterSpacing: -0.5px heading-section: fontFamily: "Avenir Next, proxima-nova, Helvetica, Arial, sans-serif" fontSize: 26px fontWeight: 600 lineHeight: 1.23 letterSpacing: 0px heading-sub: fontFamily: "proxima-nova, Montserrat, Helvetica, Arial, sans-serif" fontSize: 21px fontWeight: 300 lineHeight: 1.1 letterSpacing: 0px body-large: fontFamily: "proxima-nova, Montserrat, Helvetica, Arial, sans-serif" fontSize: 25px fontWeight: 300 lineHeight: 1.4 letterSpacing: 0px body: fontFamily: "proxima-nova, Montserrat, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0px nav-link: fontFamily: "Avenir Next, proxima-nova, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1.0 letterSpacing: 1px link-ui: fontFamily: "aktiv-grotesk, proxima-nova, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.36px caption: fontFamily: "proxima-nova, Montserrat, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 300 lineHeight: 1.4 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 20px xl: 32px 2xl: 48px 3xl: 64px 4xl: 96px rounded: none: 0px sm: 2px md: 10px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 16px 32px button-primary-hover: backgroundColor: "{colors.ink-muted}" textColor: "{colors.on-primary}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 16px 32px button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 12px 20px button-ghost-hover: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" borderColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 12px 20px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink-inverse}" rounded: "{rounded.none}" padding: 0px nav-link: textColor: "{colors.ink}" typography: "{typography.nav-link}" nav-link-hover: textColor: "{colors.link-hover}" typography: "{typography.nav-link}" link: textColor: "{colors.ink}" typography: "{typography.link-ui}" link-hover: textColor: "{colors.link-hover}" typography: "{typography.link-ui}" input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.border}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 12px 16px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.link-hover}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 12px 16px badge: backgroundColor: "{colors.surface}" textColor: "{colors.ink-inverse}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px --- # Pixar Design System ## Overview Pixar is the rare animation house whose own website refuses to animate. The studio that gave us bioluminescent jellyfish and a city of monsters presents itself online as a bone-white gallery — pure `{colors.background}` from edge to edge, hung with rectangular blocks of pure black `{colors.surface}` that frame the only color allowed on the page: the film key art itself. The site is a picture rail. Everything chromatic, joyful, and rendered belongs to the movies; everything structural belongs to a near-silent black-and-white chassis that knows better than to compete with its own product. The typographic voice is Proxima Nova at weight 300 — a humanist geometric sans set so light it almost dissolves. This is a deliberate posture of deference. Where most entertainment brands shout in heavy condensed display faces, Pixar whispers in hairline weights, letting the glowing title treatments inside the black hero blocks carry all the visual energy. Structural chrome — the `FILMS / TECHNOLOGY / CAREERS / MORE` navigation — switches to Avenir Next at weight 600, uppercase, lightly tracked, the one place the system permits a firmer hand. The two registers split cleanly: Proxima Nova Light for reading and atmosphere, Avenir Next Semibold uppercase for wayfinding and labels. Color is almost entirely absent from the chassis by design. Black `{colors.ink}` on white `{colors.background}`, with a thin ladder of grays (`{colors.ink-muted}`, `{colors.ink-subtle}`) for secondary text, and a single restrained blue (`{colors.link-hover}`) reserved for the moment a link is touched. The only other hints of chroma — a toggle blue (`{colors.accent-blue}`) and a confirmation green (`{colors.accent-green}`) — live in functional controls a casual visitor never sees. The impression is of a museum wall: calm, bright, generously spaced, with the work itself supplying every drop of color and motion. **Key Characteristics:** - Pure white canvas (`{colors.background}`) functioning as gallery wall — nothing tints it - Full-bleed black blocks (`{colors.surface}`) framing film key art, which supplies all the page's color - Proxima Nova at weight 300 (`{typography.display}`) — hairline humanist geometric for display and body alike - Avenir Next Semibold uppercase (`{typography.nav-link}`) for navigation and structural labels, tracked at `1px` - A single interactive blue (`{colors.link-hover}`) for link hover — the lone chromatic event in the chassis - Near-square geometry — `{rounded.none}` and `{rounded.sm}` (`2px`) dominate; nothing soft or pill-shaped in primary UI - Generous `96px` (`{spacing.4xl}`) vertical rhythm between sections, the museum's breathing room - Flat by default — shadows (`{colors.shadow-soft}`) appear only on the rare floating utility panel - A three-step gray text ladder (`{colors.ink}` → `{colors.ink-muted}` → `{colors.ink-subtle}`) and no more - Image-forward to the point of self-effacement: the design's job is to disappear behind the films ## Colors ### Primary - **Gallery White** (`{colors.background}`): The dominant canvas — every section, every page, edge to edge. The most-counted color on the site after black. It is the wall the work hangs on. - **Frame Black** (`{colors.surface}`): Full-bleed hero and feature blocks. Doubles as `{colors.ink}` for all body text on white. The single most-used color on the page (732 occurrences) — black is both the type color and the framing device. ### Brand Accent - **Frame Black** (`{colors.primary}`): Pixar has no chromatic brand color in its chassis — black IS the accent. Primary buttons and the wordmark are black on white. Restraint is the brand position; the films carry the palette. ### Interactive State - **Touch Blue** (`{colors.link-hover}`): Applied uniformly to link and navigation hover states. The only chromatic moment a typical visitor encounters in the interface itself. - **Toggle Blue** (`{colors.accent-blue}`): Active border on switches and a small number of interactive controls — a brighter blue confined to functional UI. - **Confirm Green** (`{colors.accent-green}`): Success/validation border — confined to form feedback states. ### Text Scale - **Frame Black** (`{colors.ink}`): Primary text on white surfaces. - **Inverse White** (`{colors.ink-inverse}`): Text and overlay labels on black hero blocks and cards. - **Silver** (`{colors.ink-muted}`): Secondary text, metadata, de-emphasized labels — also the fill of the lone utility (skip-link) button. - **Light Silver** (`{colors.ink-subtle}`): Tertiary text and the lowest-emphasis annotations. ### Borders - **Hairline** (`{colors.border}`): Default input and divider rules on white. - **Mid Border** (`{colors.border-strong}`): Slightly firmer borders on secondary controls. - **Whisper Rule** (`{colors.border-subtle}`): The faintest top-edge section dividers. ### Shadows - **Soft Halo** (`{colors.shadow-soft}`): The warm-gray ambient glow used on the rare floating utility panel. The interface is otherwise flat. ## Typography ### Font Family - **Primary**: `proxima-nova`, with fallbacks: `Montserrat`, `Helvetica`, `Arial`, `sans-serif` — the hairline humanist geometric that carries display, headings, and body - **Structural Sans**: `Avenir Next` (weight 600), with fallbacks: `InspireTWDC`, `Helvetica`, `Arial` — uppercase navigation and labels - **Link Sans**: `aktiv-grotesk` (weight 500), tracked `0.36px` — a small number of interface links - **OpenType Features**: none observed — the system relies on weight and tracking, not stylistic sets ### Hierarchy The complete type scale is declared in the `typography:` token block above. Reference tokens directly rather than restating values. | Token | Use | |---|---| | `display-hero` | Largest Proxima Nova Light moments — rare oversized statements over white | | `display` | Section display headlines, weight 300 | | `heading-section` | Avenir Next Semibold section titles — the firmer register | | `heading-sub` | Sub-headings in Proxima Nova Light | | `body-large` | Lead paragraphs and intro copy | | `body` | Primary reading text, weight 300 | | `nav-link` | Avenir Next Semibold uppercase navigation, tracked `1px` | | `link-ui` | Aktiv Grotesk interface links, tracked `0.36px` | | `caption` | Metadata, fine print, image credits | ### Principles - **Light by default**: Proxima Nova at weight 300 is the house voice. Heavier weights are the exception, reserved for the Avenir Next structural register. - **Two registers, cleanly split**: Proxima Nova for content and atmosphere; Avenir Next Semibold uppercase for navigation and labels. They never blur. - **Tracking as the only ornament**: Uppercase Avenir Next is tracked `1px`; Aktiv Grotesk links `0.36px`. There is no other typographic decoration. - **Type yields to image**: At display sizes the text stays light and quiet so the film key art inside the black blocks remains the loudest thing on the page. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. Whitespace is the point. The `96px` (`{spacing.4xl}`) value is the dominant section break — it appears dozens of times, pacing the page like a gallery hangs canvases with air between them. ### Grid & Container - Max content width: roughly 1200px centered, with full-bleed breakouts for the black hero blocks - Hero: full-width black blocks holding centered film key art; the image, not text, is the hero - Film grid: simple multi-column tiling of black-framed key-art blocks - Editorial sections: single-column or image+text at desktop, set on white ### Whitespace Philosophy - **Air between works**: The `96px` section rhythm gives every film block room to breathe — no crowding, no competition. - **White as structure**: Empty white space, not lines or boxes, separates content. The wall does the dividing. - **Image is the unit**: Layout is organized around framed images; copy is supporting cast set in the margins of generous white. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Page surfaces, film blocks, cards — the default | | Soft Lift (Level 1) | `{colors.shadow-soft}` 0px 2px 10px -3px | The rare floating utility panel or dropdown | | Glow (Level 2) | `{colors.shadow-soft}` 0px 0px 12px 2px | Soft focus glow on a small number of controls | | Focus Ring | `{colors.link-hover}` outline | Keyboard focus on interactive elements | **Shadow Philosophy**: Pixar's interface is essentially flat. The black-on-white contrast and the framed-image structure supply all the depth the page needs, so shadows are almost vestigial — a warm-gray halo (`{colors.shadow-soft}`) on the occasional floating panel and nothing more. There is no elevation language, no layered Material-style ladder. Depth comes from the black frames, not from light. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Default for hero blocks, film cards, buttons, containers — the square frame is the identity | | `sm` | 2px | Barely-there softening on small controls and inputs | | `md` | 10px | Occasional softer container or media element | | `pill` | 9999px | Toggles and the rare rounded badge | The geometry is square. Like picture frames on a wall, the dominant shape is the hard-edged rectangle (`{rounded.none}`); rounding appears only as functional `2px` antialiasing or in a handful of pill controls. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them. ### Button variants - **`button-primary`** — Black fill (`{colors.primary}`), white uppercase Avenir Next label, square. Hover (`button-primary-hover`) shifts the fill to silver (`{colors.ink-muted}`). The site's CTAs are stamps, not candy. - **`button-ghost`** — White ground, black uppercase label, thin black box border (`{colors.ink}`) — the boxed `MORE` nav control. Hover (`button-ghost-hover`) inverts to a black fill with white label. ### Cards Film cards are black blocks (`{colors.surface}`) with white overlay text (`{colors.ink-inverse}`), square corners, zero internal padding — the key art fills the frame edge to edge. ### Inputs White ground, hairline `{colors.border}` rule, `2px` radius. Focus (`input-focus`) swaps the border to touch blue (`{colors.link-hover}`) — the same blue links use. ### Badges / Tags Black pill (`{colors.surface}`) with white caption text — used sparingly for film metadata. ### Navigation A bright white bar: black Pixar wordmark top-left, `FILMS / TECHNOLOGY / CAREERS` in Avenir Next Semibold uppercase (`{typography.nav-link}`) tracked `1px`, and a boxed `MORE` control at the right. Link hover shifts text to `{colors.link-hover}`. ## Do's and Don'ts ### Do - Keep the canvas pure white (`{colors.background}`) — it is the gallery wall, never tint it. - Let film imagery supply all the color; the chassis stays black, white, and gray. - Set display and body in Proxima Nova at weight 300 (`{typography.body}`) — lightness is the house voice. - Reserve Avenir Next Semibold uppercase (`{typography.nav-link}`) for navigation and structural labels, tracked `1px`. - Use the touch blue (`{colors.link-hover}`) only on link and nav hover — it is the single chromatic event in the UI. - Frame feature content in full-bleed black blocks (`{colors.surface}`) with square corners. - Pace sections with `96px` (`{spacing.4xl}`) of vertical white space — give every work room to breathe. - Keep the interface flat; depth comes from the black frames, not from shadow. ### Don't - Don't introduce brand colors into the chassis — there is no Pixar teal or orange in the UI; black is the accent. - Don't set chrome in heavy display weights — Proxima Nova Light is deliberate; bold competes with the films. - Don't round the primary geometry — film blocks, cards, and buttons stay `{rounded.none}`; reserve `2px` for inputs only. - Don't add gradient scrims or drop shadows over film key art — the framed image stands on its own. - Don't use the touch blue (`{colors.link-hover}`) as a static or default color — it belongs to hover and focus alone. - Don't crowd sections — collapsing the `96px` rhythm turns the gallery into a flea market. - Don't mix the two type registers — never set navigation in Proxima Nova or body copy in Avenir Next. --- ## Responsive Behavior *(Preserved from the original corpus's 9-section format — Google's parser keeps unknown sections.)* ### Breakpoints dembrandt detected an unusually dense breakpoint list (17 thresholds). Key layout-changing points: | Name | Width | Key Changes | |---|---|---| | Mobile | <576px | Single column, hamburger nav, film blocks stack full-width | | Tablet | 576–960px | 2-column film grid, condensed nav | | Desktop | 961–1280px | Full horizontal nav, multi-column film grid | | Large Desktop | >1280px | Expanded white margins, film blocks at maximum scale | ### Touch Targets - Uppercase nav links carry generous surrounding tap area despite the small `14px` type - Film blocks are large inherent tap targets — the framed image is the target - The boxed `MORE` control and utility icons meet minimum 44×44px ### Collapsing Strategy - **Navigation**: Horizontal `FILMS / TECHNOLOGY / CAREERS / MORE` collapses to a hamburger menu; wordmark persists - **Hero**: Full-bleed black film blocks reflow from side-by-side to stacked full-width - **Section spacing**: `96px` rhythm compresses to roughly `48px` on mobile while preserving proportional air - **Type**: Proxima Nova display sizes scale down but hold their weight-300 lightness ### Image Behavior - Film key art maintains its aspect ratio inside black frames; `object-fit: cover` handles crops - No art-direction swaps — the same key art serves all viewports - Below-the-fold film blocks lazy-load given the image-heavy grid --- ## Agent Prompt Guide *(Preserved from the original corpus's 9-section format — the copy-paste payload section.)* ### Quick Color Reference - Background: `{colors.background}` - Text: `{colors.ink}` - Brand accent: `{colors.primary}` (black) - Secondary text: `{colors.ink-muted}` - Border: `{colors.border}` - CTA: `{colors.primary}` - Link hover: `{colors.link-hover}` ### Example Component Prompts - "Create a Pixar-style hero: a full-bleed black block (`{colors.surface}`) centered on a pure white page (`{colors.background}`), holding a single piece of film key art edge to edge with `{rounded.none}` corners and zero padding. Place the studio wordmark top-left in black. Surround the block with `96px` of white space above and below." - "Build a film grid on white (`{colors.background}`): multiple black blocks (`{colors.surface}`), each framing key art at `{rounded.none}`, tiled in a multi-column layout with generous white gutters. Overlay each film's title in white Proxima Nova (`{typography.heading-sub}`) only on hover." - "Make a primary button: black fill (`{colors.primary}`), white label in Avenir Next Semibold uppercase (`{typography.nav-link}`) tracked `1px`, `{rounded.none}` corners, `16px 32px` padding. On hover shift the fill to silver (`{colors.ink-muted}`)." - "Design the navigation bar on white: black wordmark left; `FILMS / TECHNOLOGY / CAREERS` in Avenir Next Semibold uppercase (`{typography.nav-link}`) tracked `1px`, black text; a boxed `MORE` control with a thin black border (`button-ghost`) at the right. Hover shifts link text to touch blue (`{colors.link-hover}`)." - "Create a newsletter input on white: hairline border (`{colors.border}`), `2px` radius (`{rounded.sm}`), `12px 16px` padding, Proxima Nova body (`{typography.body}`). On focus, swap the border to touch blue (`{colors.link-hover}`)." ### Iteration Guide 1. **Start with the white wall**: Lay down `{colors.background}` edge to edge. Nothing tints it. 2. **Frame the work in black**: Feature content lives inside full-bleed black blocks (`{colors.surface}`); the film art supplies all color. 3. **Keep type light**: Proxima Nova weight 300 for display and body; only the Avenir Next nav register goes Semibold. 4. **One blue, hover only**: `{colors.link-hover}` appears on link/nav hover and input focus — never as a static color. 5. **Square the geometry**: `{rounded.none}` for blocks, cards, and buttons; `2px` (`{rounded.sm}`) only for inputs. 6. **Pace with 96px**: Use `{spacing.4xl}` between sections; let everything breathe. 7. **Stay flat**: No elevation ladder — depth is the black frame, not shadow. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Pixar. Brand names and trademarks belong to their respective owners.