# ThermalGen Violet Outline — Style Reference

> A lab report printed on alternating grey and white stock, its buttons outlined in violet ink and its key claim pinned in a pale blue memo.

**Theme:** light

Measured from the rendered page at 1440×900 in headless Chrome (`computed_style.py`, screenshot and tall capture), then checked against the page's customised `static/css/bulma.min.css`, the Nerfies `static/css/index.css` and three inline `<style>` blocks in `index.html`. Where stylesheet and render disagree, the render is reported. Pixel values are at the 1440px viewport unless a breakpoint is named.

## Overview

A Nerfies/Bulma page with two deliberate edits: the authors' Bulma copy recolours every `.button` with a 2px violet `#4a1fb4` outline, and `index.css` sets author links to the same violet. A slim white navbar holds a home icon and a "Related Research" dropdown, centred. The hero is white with a 40px Google Sans title over three lines, a bold grey venue line spelling out "Advances in Neural Information Processing Systems (NeurIPS) 2025", violet author links, affiliations and four white outlined buttons (arXiv, HF Dataset, HF Model, Code). A full-width Bulma `notification is-info is-light` callout holds the TL;DR in blue on pale blue with bold keywords. From there the page alternates `#f5f5f5` and white bands: Abstract, a labelled 2×2 condition panel (Viewpoint, Day-night, Sensor, Environmental), paired satellite-thermal dataset rows with captions, method overview, a tabbed results table with a blue header row, an eight-column qualitative grid with the ThermalGen column outlined in red, and further analysis figures. A BibTeX `pre` and a Bulma footer close the page. Document height is about 6,561px.

## First Viewport

Color share of the first 1440×900 viewport: `#ffffff` 46.9% (navbar and hero), `#f5f5f5` 19.1% (Abstract band), `#eef6fc` 13.7% (TL;DR callout), `#a4a8af` 9.5% and `#e2e4e6` 7.7% (anti-aliased grey text and abstract lines), `#f8fafc` 2.8%, `#fffffc` 0.2%, `#fffdf9` 0.2%.

Anatomy in DOM order (centred unless noted):

1. Navbar `nav.navbar`, 52px tall, `#ffffff`; `navbar-start` centred: a Font Awesome home icon and "Related Research" (16px `#4a4a4a`) with a Bulma dropdown chevron in `#3273dc`.
2. Hero `section.hero`, `.hero-body` padding 48px 24px, 960px column. Title `h1.title.is-2.publication-title`, Google Sans 40px/600, `#363636`, line-height 45px, three lines (y=100 to 235).
3. Venue `h2.subtitle.is-4.publication-venue`, Noto Sans 24px/700, `#555555`, pulled up by `margin-top: -20px` (y=239). Gap 24px.
4. Authors `.publication-authors.is-size-6`, Google Sans 16px/400, links `#4a1fb4`, superscripts, trailing commas (y=298).
5. Affiliations, second `.publication-authors.is-size-6`, 16px `#4a4a4a`, one line.
6. Buttons `.link-block a.button`, 40px tall, 5px vertical margins, at y=365: arXiv (92px), HF Dataset (137px), HF Model (127px), Code (94px), each white with a 2px `#4a1fb4` border, 4px radius, `#363636` label. Gap about 29px.
7. TL;DR callout `.notification.is-info.is-light`, full container width (1344px at x=48), `#eef6fc`, 4px radius, padding 20px 40px 20px 24px: `h2.title.is-3` "TL;DR" 32px/600 `#1d72aa`, then `p.is-size-5` 20px `#1d72aa` with bold key phrases (y≈434 to 594). Hero ends at y=642.
8. Abstract band `section.hero.is-small.is-light`, `#f5f5f5`, from y=642: centred "Abstract" 32px/600 in `rgba(0,0,0,0.7)`, then a justified 16px paragraph across the full 1344px container, running past the fold.

## Tokens — Colors

| Name | Value | Token | Applies to (rendered elements) |
|---|---|---|---|
| Violet Ink | `#4a1fb4` | customised Bulma `.button` border; `.publication-authors a` | 2px outline of arXiv, HF Dataset, HF Model, Code buttons; author names |
| Title Charcoal | `#363636` | Bulma `.title`, `.button` color | Paper title, white-section headings, button labels |
| Venue Grey | `#555555` | `.publication-venue` | Venue line |
| Body Grey | `#4a4a4a` | Bulma body | Navbar text, affiliations, body text in white sections, BibTeX |
| Band Ink | `rgba(0,0,0,0.7)` | Bulma `.hero.is-light` | Headings and text in grey bands |
| Band Grey | `#f5f5f5` | Bulma `.hero.is-light`; `pre` | Abstract, Datasets, Quantitative, Style-analysis and SGM bands; BibTeX block |
| Memo Blue | `#eef6fc` | Bulma `.notification.is-info.is-light` | TL;DR callout fill |
| Memo Ink | `#1d72aa` | Bulma `.notification.is-info.is-light` | TL;DR heading and text |
| Table Blue | `#3273dc` | inline `.results-table th`, `.best` | Results table header fill; best scores (700); navbar chevron; button focus border |
| Ours Row | `#eef3ff` | inline `.results-table .ours-row` | ThermalGen rows in the results table (hover `#e0ebff`) |
| Row Hover | `#f0f4ff` | inline `.results-table tbody tr:hover` | Table row hover |
| Row Rule | `#e8e8e8` | inline `.results-table td` | 1px row separators |
| Muted Grey | `#666666` | inline `.category-col`, `figcaption` | Category column, CFG figure captions |
| Label Grey | `#333333` | inline `.vis-label` | Column labels above the qualitative grid |
| Ours Red | `#d32f2f` | inline style | 2px outline on ThermalGen images and its column label in the qualitative grid |
| Button Hover Edge | `#b5b5b5` | Bulma `.button:hover` | Button border on hover (the violet is replaced) |
| Footer Haze | `#fafafa` | Bulma `.footer` | Footer band |
| Page | `#ffffff` | `body` | Navbar, hero and white sections |

## Tokens — Typography

- **Declared:** Nerfies stack: `body` `'Noto Sans', sans-serif`; `.publication-title`, `.publication-authors` and `.teaser` in `'Google Sans', sans-serif`. Bulma's own stack is overridden.
- **Rendered:** Google Sans 400 and Noto Sans 400 loaded; 600/700 synthesized. Icons from the Font Awesome JS kit and Academicons; HF buttons use the Hugging Face SVG logo at 1em. Substitute for Google Sans: Outfit.

| Role | Selector | Size | Weight | Line height | Colour |
|---|---|---|---|---|---|
| Paper title | `h1.title.is-2.publication-title` | 40px | 600 | 45px | `#363636` |
| Venue | `h2.subtitle.is-4.publication-venue` | 24px | 700 | 30px | `#555555` |
| Section heading | `h2.title.is-3` | 32px | 600 | 36px | `#363636` (white) / `rgba(0,0,0,0.7)` (grey band) / `#1d72aa` (TL;DR) |
| Sub-heading | `h2.title.is-4` | 24px | 600 | 27px | `#363636` |
| TL;DR text | `p.is-size-5` | 20px | 400 (key phrases 700) | 30px | `#1d72aa` |
| Authors, affiliations | `.publication-authors.is-size-6` | 16px | 400 | 24px | links `#4a1fb4` |
| Body | `.content p` | 16px | 400 | 24px | `#4a4a4a`, justified in bands |
| Button | `.button.is-normal` | 16px | 400 | 24px | `#363636` |
| Table | `.results-table` | 14.4px | 400; header 600 | 21.6px | `rgba(0,0,0,0.7)`, header `#ffffff` |
| Table category | `.category-col` | 12.8px | 400 | 19.2px | `#666666` |
| Grid labels | `.vis-label` | 12px | 600 | 1.5 | `#333333`; ThermalGen `#d32f2f` 700 |
| BibTeX | `pre` | 14px | 400 | 21px | `#4a4a4a` |

## Tokens — Spacing & Shapes

| Element | Radius |
|---|---|
| Buttons | 4px (Bulma default; the `is-rounded` pill is not used) |
| TL;DR notification | 4px |
| Boxed tabs | 4px 4px 0 0 |
| "Highlighted row" legend chip | 3px |
| Images, table | 0 |
| BibTeX `pre` | 4px |

- **Shadows:** none, apart from Bulma's focus ring `0 0 0 0.125em rgba(50,115,220,0.25)` on a focused button.
- **Borders:** buttons 2px `#4a1fb4` (hover `#b5b5b5`, focus `#3273dc`); table rows 1px `#e8e8e8`; ThermalGen images 2px `#d32f2f` outline.
- **Motion:** none beyond Bulma's button border transition.

## Layout Metrics

- **Containers:** hero uses `.container.is-max-desktop` (960px at ≥1024px). The TL;DR callout and all later bands use a plain `.container` (1344px at 1440px), so the abstract and figure sections run nearly edge to edge with 48px margins.
- **Hero:** `.hero-body` padding 48px 24px; the TL;DR callout sits inside the hero below the buttons.
- **Bands:** `.hero.is-light` with `.hero-body` padding 48px 24px; `.hero.is-small` 24px; white `.section` padding 48px 24px. Grey and white alternate down the page.
- **Figures:** the 2×2 condition panel is one image at about 960px; dataset rows are six-image strips with centred captions; the qualitative grid is `display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-width: 1000px`; CFG figures are `img.responsive-img` capped at 600px with 14.4px `#666666` captions.
- **Table:** `width: 100%` inside `.table-container`, cells 8px padding (header 9.6px 8px), under Bulma `tabs is-centered is-boxed`.

| Breakpoint | Container | Gutter | Body size | Title size | Grid change |
|---|---|---|---|---|---|
| ≥1408px | 960px hero / 1344px bands | 48px | 16px | 40px | full layout |
| 1216–1407px | 960px / 1152px | 32px+ | 16px | 40px | same |
| 1024–1215px | 960px / 960px | 32px+ | 16px | 40px | same |
| ≤1023px | fluid | 24px | 16px | 40px | navbar collapses to a burger; tables scroll inside `.table-container` |
| ≤768px | fluid | 24px | 16px | 40px | Bulma columns stack; the 8-column qualitative grid stays 8 columns and shrinks |

## Components

- **Violet outline button.** `a.external-link.button.is-normal` in `span.link-block`: `#ffffff` fill, 2px `#4a1fb4` border, 4px radius, `#363636` 16px label, padding 7px 16px, icon left (Academicons `ai-arxiv`, Hugging Face SVG, Font Awesome `fa-github`); hover border `#b5b5b5`.
- **TL;DR memo.** Bulma `.notification.is-info.is-light`: `#eef6fc` fill, `#1d72aa` text, 4px radius, padding 20px 40px 20px 24px, a centred 32px "TL;DR" heading and a 20px sentence with bold key phrases.
- **Alternating band.** `section.hero.is-light` (`#f5f5f5`, heading and text in `rgba(0,0,0,0.7)`) and `section.section` (white) alternate; every band opens with a centred `h2.title.is-3` and a short justified lead.
- **Labelled condition panel.** A 2×2 figure whose quadrants carry coloured header strips (green "Viewpoint Variation", blue "Day-night Change", yellow "Sensor Variation", pink "Environmental Change") with emoji; it is one image, not HTML.
- **Paired dataset row.** A strip of six RGB/thermal image pairs with a small centred caption ("Boson-night", "DJI-day", "Bosonplus-day").
- **Tabbed results table.** Bulma `tabs is-centered is-boxed` (Satellite-Aerial, Aerial, Ground) switching `.tab-content` panels; table header `#3273dc` with white 600 text, rows separated by 1px `#e8e8e8`, best value bold `#3273dc`, second-best underlined, ThermalGen rows `#eef3ff` at 600 weight, row hover `#f0f4ff`; a legend chip "Highlighted row" on `#eef3ff` with 3px radius.
- **Qualitative grid.** Eight equal columns with 2px gaps (Input, five baselines, ThermalGen, GT), 12px/600 `#333333` labels, italic dataset labels between rows, ThermalGen images outlined 2px `#d32f2f`.
- **BibTeX and footer.** Bulma `pre` on `#f5f5f5`, padding 17.5px 21px; Bulma footer on `#fafafa` crediting the Nerfies template and a Creative Commons licence.

## Page Modules

| Module | Present | How it is styled |
|---|---|---|
| Navbar | Yes | Centred home icon and Related Research dropdown |
| Title / author block | Yes | White hero, violet author links |
| Venue badge | Yes, as text | Bold `#555555` line with the full conference name |
| Link buttons | arXiv, HF Dataset, HF Model, Code | White with 2px violet outline (a video button is commented out) |
| TL;DR | Yes | Pale blue Bulma notification |
| Abstract | Yes | Grey band, full-width justified text |
| Condition panel | Yes | Labelled 2×2 image |
| Dataset showcase | Yes | Paired image rows with captions in a grey band |
| Method | Yes | Overview figure in a white section |
| Results table | Yes | Tabbed, blue header, highlighted rows |
| Qualitative grid | Yes | 8-column HTML grid with red outline on ours |
| Extra analyses | Yes | t-SNE, CFG-scale figures, SGM and TGM result rows |
| BibTeX | Yes | Bulma `pre` |
| Footer | Yes | Nerfies credit |
| Video, carousel, sliders | Absent (Plotly is loaded but no plot is drawn) | |

## Adapting to Other Content

- **More authors:** keep them in the `is-size-6` `.publication-authors` run in `#4a1fb4`; at 16px they fit about six per line in the 960px hero.
- **More buttons:** add `link-block` outlined buttons; every button shares the violet 2px outline, so do not introduce filled buttons.
- **More tables:** reuse the `.results-table` recipe and the boxed tabs; keep `#3273dc` for header and best values and `#eef3ff` for the proposed method's rows.
- **Long galleries:** alternate them through grey and white bands, each with a centred `title is-3` heading, so the rhythm stays even.
- **News:** a second `.notification.is-light` under the TL;DR (for example `is-primary` or `is-info`) with dated items in bold.

## Do's and Don'ts

- Do outline every button in `#4a1fb4` and colour author names the same violet; that pairing is the page's signature.
- Do put the one-sentence claim in the pale blue TL;DR notification directly under the buttons.
- Do alternate `#f5f5f5` and white full-width bands with a centred heading each.
- Do mark the proposed method consistently: `#eef3ff` rows in tables, a 2px `#d32f2f` outline in image grids.
- Don't let body text span 1344px in production; the abstract here runs the full container width, which makes long lines.
- Don't load a charting library you do not use (Plotly is included but unused).

## Surfaces

A white navbar and hero; a `#eef6fc` TL;DR notification; alternating `#f5f5f5` and white bands; a blue-headed table with `#eef3ff` highlighted rows; a `#f5f5f5` BibTeX block; a `#fafafa` footer.

## Imagery

RGB and thermal image pairs: street, aerial and satellite scenes beside their generated grey thermal counterparts; desert and farmland satellite tiles for the new datasets; a method diagram; t-SNE plots; generated thermal maps at several CFG scales. The 2×2 condition panel uses pastel header strips with emoji.

## Layout

A 960px hero column, then 1344px full-container bands for everything else. Figures are centred; the qualitative grid caps at 1000px and CFG images at 600px.

## Agent Prompt Guide

Quick colors: outline and authors `#4a1fb4`, title `#363636`, venue `#555555`, body `#4a4a4a`, band `#f5f5f5`, memo `#eef6fc` with `#1d72aa` text, table header `#3273dc`, ours row `#eef3ff`, ours outline `#d32f2f`, footer `#fafafa`.

1. "Build a white hero: centred Google Sans 40px/600 title in `#363636`, a 24px/700 venue line in `#555555`, 16px author links in `#4a1fb4`, and white buttons with a 2px `#4a1fb4` border, 4px radius, `#363636` 16px label, padding 7px 16px, icon left."
2. "Add a TL;DR callout under the buttons: full-width `#eef6fc` box, 4px radius, padding 20px 40px 20px 24px, a centred 32px/600 'TL;DR' and a 20px sentence in `#1d72aa` with bold key phrases."
3. "Style a results table: full width, 14.4px text, header row `#3273dc` with white 600 labels, cells 8px padding with 1px `#e8e8e8` row rules, best values bold `#3273dc`, second-best underlined, and the proposed method's rows on `#eef3ff` at 600 weight."

## Similar Pages

Seeing the Wind (NeurIPS 2025, this batch) alternates bands in butter yellow; ThermalGen does the same in grey. Rectified Point Flow also places a one-line summary in a tinted box under the buttons. The Nerfies footer credit links it to the wider Nerfies family.

## Quick Start

```css
:root {
  --violet: #4a1fb4;
  --title: #363636;
  --venue: #555555;
  --text: #4a4a4a;
  --band: #f5f5f5;
  --memo-bg: #eef6fc;
  --memo-ink: #1d72aa;
  --table-head: #3273dc;
  --ours-row: #eef3ff;
  --ours-outline: #d32f2f;
  --row-rule: #e8e8e8;
  --footer: #fafafa;
  --font-display: 'Google Sans', 'Outfit', sans-serif;
  --font-body: 'Noto Sans', sans-serif;
}
.button { background: #fff; border: 2px solid var(--violet); border-radius: 4px; color: var(--title); }
.publication-authors a { color: var(--violet) !important; }
.results-table th { background: var(--table-head); color: #fff; font-weight: 600; }
```

## Provenance

- **URL:** https://xjh19971.github.io/ThermalGen/
- **Paper:** ThermalGen: Style-Disentangled Flow-Based Generative Models for RGB-to-Thermal Image Translation (arXiv 2509.24878), Jiuhong Xiao, Roshan Nayak, Ning Zhang, Daniel Tortei, Giuseppe Loianno (New York University, Technology Innovation Institute, UC Berkeley).
- **Venue:** NeurIPS 2025 (venue line on the page).
- **Selection reason:** the arXiv comment states acceptance at NeurIPS 2025; the project page is linked in the abstract.
- **Template credit:** footer says the website is adapted from the Nerfies template.
- **Evidence used:** `computed_style.py` render at 1440×900 with first-viewport color share, the 1440 screenshot and tall capture, the customised `bulma.min.css` (`.button` border `#4A1FB4`, 2px), `static/css/index.css` and the inline `<style>` blocks. Captured 2026-10-28.