# MIRO — Style Reference

> A darkroom with one orange safelight: every badge, number and rule glows the same warm tangerine against near-black.

**Theme:** dark

Values come from a headless Chrome render at 1440×900 (computed styles, loaded fonts, first-viewport color share), the 1440×900 and full-page screenshots, and the page's own `assets/css/styles.css` and `index.html`. The page defaults to dark and has a moon button that switches to a light theme; the light values are listed separately. KPI numbers count up on scroll, so the screenshot shows intermediate values (13×, 247×) where the markup's final values are 19× and 370×.

## Overview

A long, blog-like research page (about 29,000px tall) on near-black #0b0c10 with light gray text (#e6e6e6) in the system UI font (Segoe UI on Windows). One accent, tangerine #ff9a5c, carries the identity: a filled "ACCEPTED AT ICML 2026" pill with a sweeping shine, the M-I-R-O letters in the title, the KPI numbers, the TL;DR underline, carousel arrows and dots, 4px heading bars on subsection titles, and every hover state. The hero is centred and lit by a faint orange top wash. Below it come two large KPI cards with orange borders, a row of five smaller KPI cards, a four-column image carousel of generated samples, a chip-style contents list, then long sections of text, interactive p5.js animations, d3 plots and image grids. A fixed 48px top bar with "☰ Contents" and a theme toggle replaces the sidebar contents list on screens up to 1600px.

## First Viewport

Color share (8-color quantization of the 1440×900 shot): near-black family #0b0c10 / #131419 / #1a1718 / #181414 / #0e0e12 / #131112 / #090a0e together 93.2%; warm brown #493d38 6.8% (the orange-tinted hero wash, KPI borders and text blended). Pure tangerine covers too little area to form its own cluster.

Anatomy in DOM order (desktop 1440px, everything centred):

1. **Fixed top bar** (`nav.mobile-navbar`, 0–48px): #15171c with a 1px rgba(128,128,128,.25) bottom border and 0 2px 8px black at 15%. Left "☰ Contents" button, right "🌙" theme button: both 14px/500 #e6e6e6, padding 8px 12px, 1px rgba(128,128,128,.25) border, 6px radius. Body gets 48px top padding.
2. **Hero** (`header.hero`, 48–520px): padding 24px 16px 32px, background linear-gradient(180deg, #ff9a5c at 8%, transparent) plus a radial #ff9a5c-at-10% halo that fades in. Children fade up in sequence (60–580ms delays).
3. **Venue pill** (y≈72, 32px tall): "ACCEPTED AT ICML 2026", 13px/700 uppercase, letter-spacing 1.5px, #0b0c10 on #ff9a5c, padding 6px 16px, 999px radius, shadow 0 2px 12px #ff9a5c at 35%, white shine sweeping across every 4.2s. Gap 16px.
4. **Title** (`h1`, y=129): 32px/700, line-height 1.3, #e6e6e6, one line; "MIRO" and the capital M, I, R, O in "MultI-Reward cOnditioned" set in #ff9a5c weight 600. Gap 12px + 16px.
5. **Authors** (y=186): 17px, line-height 1.8, names 500 #e6e6e6; hover turns orange with an orange underline. Gap 12px.
6. **Affiliations** (y=229): 14px #b5b5b5, flex-wrapped with 16px gaps; author note below in 13px italic #b5b5b5 at 85% opacity.
7. **TL;DR block** (y≈300): 80×3px gradient rule (transparent → #ff9a5c → transparent), "TL;DR" label 13px/600 uppercase, letter-spacing 2px, #ff9a5c; then the sentence in 22px/500 italic #e6e6e6, line-height 1.5, at 95% opacity, max-width 900px. Gap 24px.
8. **Link pills** (`nav.topnav`, y=446, 42px tall): 📄 Paper, 💻 Code, 🎮 Demo, ⚖️ Weights; gap 10px. Emoji serve as icons.
9. **KPI rows** (from y≈544): two hero KPI cards (max 480px each, 12px apart), then five secondary cards that slide in with blur, staggered 0.1s, so the last ones are still faint in a load-time screenshot.

The image carousel starts just below the fold at about y=890.

## Tokens — Colors

| Name | Value | Token | Applies to (rendered elements) |
|---|---|---|---|
| Night | #0b0c10 | --bg | page background, BibTeX code well, venue pill text |
| Graphite Card | #15171c | --card | top bar, link pills, KPI cards, contents chips, figures, callouts, BibTeX container |
| Light Gray | #e6e6e6 | --fg | body text, title, headings, author names, pill labels |
| Muted Gray | #b5b5b5 | --muted | affiliations, author note, KPI labels, figure captions, footer |
| Tangerine | #ff9a5c | --accent | venue pill, M-I-R-O letters, KPI numbers, TL;DR label and rule, contents numbers, subsection bars, carousel arrows and active dot, copy button, hover fills |
| Info Blue | #4aa3ff | (literal, `.callout.info`) | 4px left bar of the carousel caption callout |
| Hairline | rgba(128,128,128,0.15) | (literal) | borders of pills, cards, figures, chips |
| Light Paper | #ffffff | --bg (light theme) | page background after the theme toggle |
| Light Ink | #1a1a1a | --fg (light theme) | text in light theme |
| Light Muted | #666666 | --muted (light theme) | secondary text in light theme |
| Light Card | #f5f5f5 | --card (light theme) | cards in light theme |
| Deep Orange | #ff6b35 | --accent (light theme) | accent in light theme |

The question callout uses a 135deg blue-to-purple wash (rgba(59,130,246,.1) → rgba(147,51,234,.1)) under its tangerine bar.

## Tokens — Typography

| Family | Declared | Rendered (fonts_loaded) | Substitute |
|---|---|---|---|
| UI / text | system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, emoji, sans-serif | no web font loaded; the OS UI face renders (Segoe UI on Windows, SF Pro on macOS) | Inter |
| Code | 'Courier New', Consolas, Monaco, monospace | system Courier New | Courier Prime |
| Math | KaTeX | KaTeX_Main, KaTeX_Math, KaTeX_AMS and size fonts loaded | — |

| Role | Selector | Size / weight / line-height | Color |
|---|---|---|---|
| Paper title | `.hero h1` | clamp(22px, 4.5vw, 32px) → 32px / 700 / 1.3 | #e6e6e6, letters #ff9a5c 600 |
| Section heading | `.section h2` | 28px / 700, letter-spacing -0.01em | #e6e6e6 |
| Subsection | `.section h3` | 22px / 700 | #e6e6e6 |
| Intro subtitle | `.intro-subtitle` | 1.4em = 22px / 700, 4px #ff9a5c left bar, padding-left 1rem | #e6e6e6 |
| Body | `html, body` | 18px / 400 / 1.6 | #e6e6e6 |
| TL;DR sentence | `.hero .tldr` | 22px / 500 italic / 1.5 | #e6e6e6 at 95% |
| TL;DR label | `.tldr-badge` | 13px / 600 uppercase, letter-spacing 2px | #ff9a5c |
| Venue pill | `.venue-badge` | 13px / 700 uppercase, letter-spacing 1.5px | #0b0c10 |
| Authors | `.authors p` | 17px / 500 names / 1.8 | #e6e6e6 |
| Affiliations | `.affiliation-line` | 14px / 400 / 1.6 | #b5b5b5 |
| Hero KPI number | `.kpi-hero .kpi-num` | clamp(34px, 6vw, 52px) → 52px / 700 | #ff9a5c |
| KPI number | `.kpi-num` | clamp(22px, 5vw, 28px) → 28px / 700 | #ff9a5c |
| KPI label | `.kpi-label` | 18px / 400 | #b5b5b5 |
| Link pill | `.topnav a` | 15px / 500 | #e6e6e6 |
| Contents chip | `.toc a` | 15px; number 14px / 600 #ff9a5c | #e6e6e6 |
| Caption | `figcaption` | 0.95em | #b5b5b5 |
| BibTeX | `.bibtex-code` | Courier New 0.9em = 16.2px / 1.6 | #e6e6e6 |

## Tokens — Spacing & Shapes

| Element | Radius | Border | Shadow |
|---|---|---|---|
| Venue pill, link pills | 999px | pills 1px rgba(128,128,128,.15) | venue 0 2px 12px #ff9a5c at 35% |
| Hero KPI cards | 10px | 1px #ff9a5c at 40% | hover 0 12px 28px black at 18% + 1px orange ring |
| Secondary KPI cards | 10px | 1px rgba(128,128,128,.15) | hover as above; 2px orange underline grows to 70% |
| Contents chips | 20px | 1px rgba(128,128,128,.15) | none |
| Figures | 8px, padding 8px | 1px rgba(128,128,128,.15) | none |
| Callouts | 6px (question callout 8px) | 1px hairline, 4px left bar (#ff9a5c or #4aa3ff) | hover 0 4px 14px orange at 12% |
| Carousel images | 6px | none | hover scale 1.03, 0 8px 24px black at 35% |
| Carousel arrows | 50%, 48px | none | 0 4px 12px black at 30% |
| BibTeX container / code well | 12px / 8px | 1px hairline | 0 2px 8px black at 10% |
| Top-bar buttons | 6px | 1px rgba(128,128,128,.25) | none |

A 3px tangerine scroll-progress bar runs across the very top of the window.

## Layout Metrics

- **Containers**: `.section { max-width: 1200px; margin: 0 auto; padding: 24px 16px }` (x=120 at 1440); text sections such as Introduction and Method use 24px 32px. Paragraphs cap at 900px, but intro paragraphs are justified to full width. The contents section narrows to 800px; BibTeX to 900px.
- **Hero**: padding 24px 16px 32px below the 48px fixed bar; rendered 472px tall; authors block max 800px, affiliations and TL;DR max 900px.
- **Section rhythm**: sections only carry 24px top and bottom padding, so consecutive sections sit 48px apart; h2 margin-bottom 6px; h3 margin 18px 0 4px.
- **KPI rows**: hero cards flex 1 1 50% up to 480px, padding 20px 24px, gap 12px; secondary cards flex 1 1 20%, padding 12px, min-width 140px.
- **Carousel**: container padding 0 60px, four columns of 25% each with 4px side padding, two images stacked per column with 8px gap; 48px arrows at 8px from the edges.
- **Figures**: plot grids use `.grid-2` (auto-fit, min 320px) and `.grid-3` (min 280px) with 16px gap; `.grid-4` is four columns down to 1200px.

| Breakpoint | Gutter | Body size | Title size | Grid change |
|---|---|---|---|---|
| >1600px | 16–32px inside 1200px | 18px | 32px | sidebar contents list shown; top bar hidden |
| ≤1600px | same | 18px | 32px | fixed top bar with "☰ Contents" and theme button; body padding-top 48px |
| ≤1200px | same | 18px | 32px | `.grid-4` → 2 columns |
| ≤1000px | same | 18px | 32px | progression viewer → 1 pair per row |
| ≤900px | same | 18px | 32px | secondary KPIs 3 per row |
| ≤768px | same | 18px | 4.5vw ≈ 32px | TL;DR 19px, rule 60×2px |
| ≤700px | carousel padding 50px | 17px | 31px | h2 24px, h3 20px; carousel 2 columns; affiliations stack; `.grid-4` 1 column |
| ≤600px | same | 17px | 27px | hero KPIs full width; secondary 2 per row; top-bar text hidden |
| ≤500px | same | 17px | 22.5px | TL;DR 18px |
| ≤400px | same | 17px | 22px floor | secondary KPIs full width |

## Components

- **Venue pill** (`.venue-badge`): inline-block, #ff9a5c fill, #0b0c10 text 13px/700 uppercase, letter-spacing 1.5px, padding 6px 16px, radius 999px, shadow 0 2px 12px orange at 35%; a 60%-wide skewed white gradient (45% opacity at centre) slides across every 4.2s.
- **Link pill** (`.topnav a`): #15171c fill, 1px rgba(128,128,128,.15) border, radius 999px, padding 8px 16px, 15px/500 #e6e6e6 with a leading emoji. Hover: fill #ff9a5c, text white, translateY(-3px), shadow 0 8px 18px orange at 35%.
- **Hero KPI card** (`.kpi.kpi-hero`): padding 20px 24px, radius 10px, 1px border #ff9a5c at 40%, background linear-gradient(180deg, orange at 6%, #15171c); number 52px/700 #ff9a5c; label 18px #b5b5b5. Slides in from 26px below with a 6px blur.
- **Secondary KPI card** (`.kpi`): padding 12px, min-width 140px, radius 10px, #15171c, hairline border, centred; number 28px/700 #ff9a5c. Hover lifts 4px and grows a 2px orange underline to 70% width.
- **Contents chips** (`.toc a`): inline-flex, padding 6px 14px, radius 20px, #15171c, hairline border, 15px #e6e6e6, leading "1." number 14px/600 #ff9a5c; wraps with 8px gaps under a "Contents" h2.
- **Subsection title** (`.intro-subtitle`): 22px/700 with a 4px #ff9a5c left border and 1rem left padding.
- **Callout** (`.callout`): #15171c, hairline border plus 4px left bar #ff9a5c, padding 10px 14px, radius 6px. Variants: `.info` with a #4aa3ff bar; `.question` with a blue-to-purple 10% wash, 1.5rem padding, 1.1em italic text.
- **Image carousel**: 4 columns × 2 rows of square samples, 6px radius on black; 48px round arrows in #ff9a5c at 90% with white ‹ › glyphs, hover scale 1.12 and orange glow; dots 10px gray at 30%, active dot a 26×10px tangerine capsule with glow.
- **BibTeX**: #15171c container, 12px radius, 1.5rem padding; inner #0b0c10 code well, 8px radius, Courier New 16.2px; copy button top-right #ff9a5c with white 600 text, 6px radius.

## Page Modules

| Module | Present | How it is styled |
|---|---|---|
| Fixed top bar / contents drawer | yes | 48px graphite bar with outlined buttons; sidebar contents list above 1600px |
| Venue badge | yes | filled tangerine pill with shine animation |
| Title / authors / affiliations | yes | centred, orange acronym letters, muted affiliation line |
| TL;DR | yes | orange rule and label, large italic sentence |
| Link buttons | yes | four graphite pills with emoji icons |
| KPI stats | yes | 2 large orange-bordered cards + 5 small cards with count-up |
| Image carousel | yes | 4×2 sample grid with orange arrows and capsule dots |
| Table of contents | yes | numbered chips in a 800px block |
| Abstract | present but non-standard | no Abstract section; the TL;DR and Introduction replace it |
| Interactive animations and plots | yes | p5.js canvases on a faint orange radial, d3 plots in graphite figures |
| Results tables | absent from the source | results are shown as plots, radar charts and image grids |
| References / BibTeX | yes | reference list and a graphite BibTeX block with orange copy button |
| Theme toggle | yes | moon button switches to the light palette |
| Footer | yes | centred muted line, padding 24px 16px |

## Adapting to Other Content

- **More authors**: keep the 800px author block and let it wrap at 17px; add markers in the same superscript style and keep the 13px italic note line.
- **A results table**: put it in a figure (#15171c, 8px radius, 8px padding, hairline); header in #b5b5b5 600, body #e6e6e6, best value bold #ff9a5c. Never fill cells with orange.
- **Long publication or news lists**: use `.callout` rows (graphite, 4px tangerine left bar, 10px 14px padding) with the date as a 14px/600 #ff9a5c lead, like the contents numbers.
- **More stats**: add cards to the secondary KPI row (it wraps at 20% per card); keep only two hero KPIs.
- **Light theme content**: rely on the existing toggle values (#ffffff, #1a1a1a, #f5f5f5, #ff6b35) rather than inventing new ones.

## Do's and Don'ts

- Do use #ff9a5c for every accent: numbers, bars, the venue pill, carousel controls and hover fills.
- Do keep surfaces in two steps only: #0b0c10 page and #15171c cards, separated by 15%-gray hairlines.
- Do give subsection titles the 4px tangerine left bar.
- Do keep the hero centred and compact (title at 32px); the KPI cards carry the visual weight.
- Don't load a web font; the system UI face is part of the look.
- Don't introduce a second accent except the single info-blue callout bar.
- Don't use pure white text on dark; #e6e6e6 is the ink, white appears only on orange fills.

## Surfaces

Near-black page (#0b0c10) with an 8% tangerine wash at the top of the hero; graphite cards (#15171c) for pills, KPIs, figures, callouts and chips; orange-tinted gradient fill only on the two hero KPI cards; the BibTeX code well drops back to #0b0c10 inside its card.

## Imagery

Square text-to-image samples (portraits, animals, landscapes, stylised art) in a carousel and in progression and pairwise viewers; d3 line and radar plots and p5.js method animations drawn on the dark ground with orange highlights. Images sit on black with 6px radii.

## Layout

Centred hero, then a 1200px column holding KPIs, the carousel and the contents chips, followed by ten long sections (Introduction through Conclusion and References) at 24px vertical padding each. Content is dense; separation comes from cards and headings rather than whitespace.

## Agent Prompt Guide

Quick colors: page #0b0c10, card #15171c, text #e6e6e6, muted #b5b5b5, accent #ff9a5c, info #4aa3ff, borders rgba(128,128,128,0.15).

1. "Build a centred dark hero: background #0b0c10 with linear-gradient(180deg, rgba(255,154,92,.08), transparent), padding 24px 16px 32px. Venue pill: #ff9a5c fill, #0b0c10 13px/700 uppercase text, letter-spacing 1.5px, padding 6px 16px, radius 999px, shadow 0 2px 12px rgba(255,154,92,.35). Title 32px/700 #e6e6e6 with acronym letters in #ff9a5c 600. TL;DR: 80×3px orange gradient rule, 13px/600 uppercase #ff9a5c label, 22px/500 italic sentence."
2. "Make KPI cards: two hero cards (padding 20px 24px, radius 10px, 1px rgba(255,154,92,.4) border, background linear-gradient(180deg, rgba(255,154,92,.06), #15171c), number 52px/700 #ff9a5c, label 18px #b5b5b5) above a wrapping row of small cards (padding 12px, #15171c, 1px rgba(128,128,128,.15), number 28px/700 #ff9a5c). Hover: translateY(-4px)."
3. "Create link pills: #15171c, 1px rgba(128,128,128,.15) border, radius 999px, padding 8px 16px, 15px/500 #e6e6e6 with a leading emoji; hover background #ff9a5c, white text, translateY(-3px), shadow 0 8px 18px rgba(255,154,92,.35)."

## Similar Pages

- Long dark research blogs with KPI cards and interactive figures, such as hand-built pages for generative-model papers.
- Pages that use a single warm accent for every interactive element over a near-black ground.

## Quick Start

```css
:root {
  --bg: #0b0c10;
  --fg: #e6e6e6;
  --muted: #b5b5b5;
  --card: #15171c;
  --accent: #ff9a5c;
  --info: #4aa3ff;
  --hairline: rgba(128, 128, 128, 0.15);
  --page-x: clamp(16px, 4vw, 32px);
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Courier New", Consolas, Monaco, monospace;
  --radius-card: 10px;
  --radius-pill: 999px;
  --section-max: 1200px;
}
[data-theme="light"] {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #666666;
  --card: #f5f5f5;
  --accent: #ff6b35;
}
```

## Provenance

- **URL**: https://nicolas-dufour.github.io/miro
- **Paper**: MIRO: MultI-Reward cOnditioned pretraining improves T2I quality and efficiency (arXiv 2510.25897), Nicolas Dufour, Lucas Degeorge, Arijit Ghosh, Vicky Kalogeiton, David Picard.
- **Venue**: ICML 2026.
- **Selection reason**: the arXiv comment states acceptance at ICML 2026 and links this project page.
- **Template credit**: none stated; a custom build with KaTeX, d3 v7 and p5.js; footer reads "© 2025 Nicolas Dufour".
- **Evidence used**: tools/computed_style.py render at 1440×900 (computed styles, fonts_loaded, color share), the 1440×900 and full-page screenshots, and the page's `styles.css` and `index.html` read directly, on 2026-10-28.