# Odyssey — Design Extract (Default)

Source: https://odyssey.ml/ (captured 2026-09-02).
Build platform: Framer.
This document describes the visual design of the home page. It is a reference, not a set of instructions.


---


## 1. Overall Style

Odyssey uses a dark, cinematic look for an AI research lab.

- The base canvas is near‑black. Default text is a pale mint‑white.
- One accent colour is used: electric blue.
- The page alternates dark sections and light (mint) sections for rhythm.
- Corners are sharp; most elements use a border radius of 0 px to 2 px.
- Three type styles carry the brand: a serif display face, a retro pixel‑mono face for labels, and a clean sans‑serif for body text.
- The mono face marks technical and real‑time content, for example countdowns, “Generating” pills, and latency values.
- Motion is central: instant simulation demos, a countdown timer, streaming video, and scroll‑driven animation.

Tagline (meta description): “Odyssey is an AI lab pioneering general world models: causal, multimodal systems that learn to understand and simulate the world.”


## 2. Colour Palette (generic description)

The palette is built on a dark ground with a single electric‑blue accent and alternating light sections.

- **Background (dark)** – `#090909` (rgb 9, 9, 9) set on `html body`; the main canvas.
- **Background (dark, alt)** – `#0A0A0A`, a minor variant.
- **Text / foreground (on dark)** – `#E8EFEA` (rgb 232, 239, 234) pale mint‑white for headings and key text.
- **Text muted (on dark)** – `#E8EFEA` at 60 % (`#E8EFEA99`) for body copy.
- **Accent** – `#0054FF` (rgb 0, 84, 255) for buttons, eyebrow labels, links, video accent colour.
- **Background (light section)** – `#E8EFEA` (inverted sections).
- **Text / foreground (on light)** – `#090909` (rgb 9, 9, 9) for text in inverted sections.
- **Pure white** – `#FFFFFF` for controls, the video play button, small UI marks.
- **Support roles** – media placeholder `#262626`, dark blue‑gray `#191B20`, gray `#535353`, near‑white gray `#EEEEEF` / `#EEEEEF99`, border `rgba(232, 239, 234, 0.2)`, hairline `rgba(221, 221, 221, 0.1)`, overlay scrim `rgba(9, 9, 9, 0.8)` / `rgba(9, 9, 9, 0)`.

*(Exact hex values have been replaced with descriptive roles; the original detailed token table has been collapsed into role‑based categories.)*


## 3. Typography (generic)

- **Oliveira Regular** – a serif display face, weight 400, used for all large headings.
- **NeueBit Bold** – a retro pixel‑mono, weight 700, used for eyebrow labels, stat numbers, short display text. Tight line height.
- **Geist** – a clean sans‑serif (open‑source, Google‑Font) for body text, navigation, captions, buttons. Weights 300, 400, 500.
- **Fragment Mono** – a monospace (Google‑Font) for large numeric display, e.g. the countdown timer (pixel‑filled).
- **IBM Plex Mono** – a monospace for technical labels and code‑style text.
- **Inter** – a sans‑serif fallback (Framer only).

### Type scale (desktop, screens > 1700 px)

| Token         | Font          | Size | Line height | Letter‑spacing | Colour                 | Use                                              |
| ------------- | ----------------|------|-------------|----------------|------------------------|--------------------------------------------------|
| Display / H1  | Oliveira Regular| 68px | 1.05em      | -0.03em        | `#E8EFEA`             | Hero headline.                                   |
| H2            | Oliveira Regular) Regular | 48px | 1.1em | -0.02em        | `#E8EFEA`             | Section titles.                                  |
| H3            | Oliveira Regular| 38px | 1.05em      | -0.02em        | `#E8EFEA`             | Sub‑section titles. Also 32 px and 34 px variants. |
| Stat display  | NeueBit Bold    | 28px | 0.9em       | 0              | `#E8EFEA`             | Large numbers and short labels. Also 26 px.       |
| Eyebrow label | NeueBit Bold    | 20px | 0.7em       | 0              | `#0054FF`             | Kicker text above a section title. Mobile: 22 px. |
| Body          | Geist           | 16px | 1.3em to 1.55em | -0.02em        | `#E8EFEA` at 60 %     | Paragraphs. Center aligned in most sections.     |
| Body small    | Geist           | 13px | 1.45em      | -0.02em        | `#E8EFEA` at 60 %     | Captions and fine print. Desktop can use 16 px.   |
| Numeric mono  | Fragment Mono   | 64px | 1em         | 0              | Clipped gradient fill | Countdown timer (“Began simulating in”).       |

### Responsive type

The layout has four ranges: > 1700 px, 1200‑1699 px, 810‑1199 px, and < 810 px.

- Hero H1 (Oliveira Regular): 68 px, then 68 px, then 60 px, then 42 px.
- H2 (Oliveira Regular): 48 px, then 48 px, then 40 px, then 34 px.
- Body (Geist): stays 16 px at every size.
- Line height on body text increases as the screen gets smaller (1.35 em up to 1.5 em).

*(Font names have been replaced with free‑substitute families where the originals are commercial; a note indicates which faces are licensed.)*


## 4. Layout (generic)

- Content maximum width is about 1200 px. The page centers this column.
- **Breakpoints**: 1700 px, 1200 px, 810 px.
- **Spacing scale** (gap values seen): 4, 8, 10, 12, 16, 24, 32, 40, 64, 80 px. The most common gaps are 10 px, 8 px, and 16 px.
- Most section headers are center aligned.
- Sections stack vertically. Dark and light sections alternate.
- The models grid shows four cards in a row on desktop.
- Media is often full‑bleed. A dark gradient scrim fades the bottom or edges of video.


## 5. Components (generic)

- **Primary button** – background `#0054FF`, white / `#E8EFEA` text, 1 px solid `rgba(232, 239, 234, 0.2)` border, 2 px border‑radius, padding `8 px 12 px` (8 px 8 px 8 px 12 px when it holds an arrow), height 46 px, font Geist.
- **Secondary button** – outline/ghost variant with same border and radius, no blue fill.
- **Announcement chip** – a small pill near the header showing two lines: a label (“Our Series B”) and a message (“We raised a $310 M Series B”).
- **Model card** – four parts: category label (e.g. “World Model”), model name (e.g. “Odyssey‑2”), one‑sentence description, two links: “Learn More” and an action link (e.g. “Try Odyssey‑2”, “Read the Paper”).
- **Media player** – video plays through a Mux player (`player.mux.com`), muted and looped, no controls. Player background `#262626`. Center play button: 60 px white circle with 999 px radius. Player accent colour `#0054ff`.
- **Real‑time demo elements** – “Generating” pill with ETA value (“ETA: Minutes” for traditional models, “ETA: 50 ms” for Odyssey‑2). A loader block: “Initializing Odyssey‑2” and “Began simulating in” with a mono countdown. A prompt caption, e.g. “A chicken running on a racetrack”. A starfield background and a glowing “tv‑mask” frame around the simulation view.


## 6. Page Structure and Content (generic order)

The home page sections run in this order.

1. **Header** – Logo “Odyssey”. Navigation: About, Research, News, Careers, Contact. Button: “Get API Access”. Announcement: “Our Series B” / “We raised a $310 M Series B”.
2. **Hero** – Eyebrow label. H1: “We’re pioneering world models, to go beyond language models”. Paragraph: “Odyssey is an AI lab pioneering world models—AI to understand and simulate the world. This foundational technology promises to revolutionize robotics, science, healthcare, education, gaming, energy, and beyond”. Buttons: “Our Models” and “Get in Touch”. Hero image.
3. **Models** – Heading context: “What if AI could learn from the world?” Four model cards:
   - World Model — Odyssey‑2 — “Our most powerful general purpose world model yet, materially advancing the state‑of‑the‑art in physical accuracy of world models.” Links: Learn More, Try Odyssey‑2.
   - World Model — Starchild‑1 — “A step beyond world models that learn only from visual observation, toward systems that learn from richer multimodal interaction with the world.” Links: Learn More, Technical Report.
   - World Model — Agora‑1 — “A multi‑agent world model, enabling multiple participants—human or AI—to share and interact within the same world simulation in real‑time.” Links: Learn More, Try Agora‑1.
   - Reinforcement Learning — PROWL‑1 — “A novel RL‑driven adversarial framework where an RL agent explores game environments with the objective to improve world model performance.” Links: Learn More, Read the Paper.
4. **What is Odyssey‑2?** – Title: “A world simulator that dreams in video”. Text: “Prompt with an image or text, and Odyssey‑2 rolls out minutes‑long interactive simulations”. Full‑width video.
5. **A Nascent World Simulator** – Text: “Odyssey‑2 is early, but it’s learned from decades of video to simulate the world”. Feature block: “Instant Simulation” — “Odyssey‑2 begins an interactive simulation instantly, generating frame‑by‑frame”. Feature block: “Minutes of Simulation” — “Odyssey‑2 streams multi‑minute simulations, not 10‑second clips”.
6. **What makes Odyssey‑2 different?** – Text: “Odyssey‑2 generates long‑running interactive simulations in real‑time”. Comparison, two columns:
   - Traditional video models: “Fixed 10‑second clips”, “Takes minutes to generate”, “No interactivity”.
   - Odyssey‑2: “Generated in 50 ms”, “Minutes of streaming simulation”, “Begins streaming instantly”, “Open‑ended interaction”.
7. **Applications of world models** – Title: “World models are the next great foundation model”. Text: “Capable of understanding and simulating the world—serving humans, AIs, and robots”. Three columns: Humans, AIs, Robots.
8. **What will these models soon unlock?** – Title: “General world models will proliferate interactive intelligence into the world”. Text: “These models are nascent, but we see new software, hardware, and intelligence applications enabled in the near future”. A grid of short application phrases (e.g. “A reinvention of gaming”, “Accelerated robotic intelligence”, “Magic mirrors for instant try‑on”, “Personalized, effective tutors for any topic”, “Realistic, controllable edge‑case scenario generation”, “Meaningful interactive companionship”).
9. **Research presentation** – Title: “A missing form of intelligence”. Text: “Odyssey’s CTO Jeff Hawke presents on Odyssey’s research at RAAIS 2026”. Video panel.
10. **Integrations** – Title: “Integrate Odyssey‑2 in minutes”. Text: “Integrate Odyssey‑2 into your application in 20 lines of code”. API text: “The Odyssey API streams real‑time video frames as they’re generated. Send a prompt, receive a live stream URL, and steer the world with text or inputs.” Links: “Explore Docs”, “Get Started”.
11. **Prefooter** – Text: “The next frontier in AI”.
12. **Footer** – Company: About, Contact. Information: Careers, Legal. World Models: (model links). Research. News.


## 7. Assets (generic)

- Images and video come from `framerusercontent.com` and `player.mux.com`.
- Image formats: PNG, WebP, JPG, SVG (logo and icons).
- The starfield background and TV‑mask glow are built with layered elements and CSS, not single images.
- Analytics: Google Analytics (`G‑TS3TSFBTQZ`) and Microsoft Clarity.


## 8. Motion (generic)

- Hover: opacity fade, scroll‑driven animation.
- Instant simulation demos, countdown timer, streaming video.
- Preferred easing elsewhere: `cubic‑bezier(.16, 1, .3, 1)` (soft overshoot‑free ease‑out).
- Continuous marquee scroll on the gallery.
- Page scroll appears smoothed / controlled (scroll‑hijack), consistent with the “instrument” feel.
- Restraint overall: no parallax spectacle, no entrance animation on every block.


## 9. Quick Token Summary (generic)

```css
--color-bg-dark:        #090909
--color-bg-light:       #E8EFEA
--color-text:           #E8EFEA
--color-text-muted:     rgba(232, 239, 234, 0.6)
--color-text-invert:    #090909
--color-accent:         #0054FF
--color-media-bg:       #262626

--font-display:  "Oliveira Regular", serif
--font-label:    "NeueBit Bold", monospace
--font-body:     "Geist", sans-serif

--radius:        2px
--content-max:   1200px
--space-unit:    8px   /* scale: 4 8 10 12 16 24 32 40 64 80 */
```