Transition Pathways Repository · UI reference
+Pathways UI Kit
+
+ Every color, type size, and reusable interface component currently
+ shipping in the TPR front end, taken from
+ src/index.css and src/components/. Each
+ entry carries the real Tailwind class names and CSS custom
+ properties, so a Figma file built from this stays traceable back to
+ the code that renders it. Colors and class tags are exact; the
+ previews are hand-built and can drift from the code in small ways.
+ Where a preview and its tags disagree, the tags win.
+
+ Component previews sit on a fixed light stage regardless of the + reading theme below, so colors always read exactly as they do in the + shipped app. +
+epic/v2): a new rose color family, a sector-segment
+ badge, selectable badges, tabbed detail pages, scope ribbons, data
+ tables, and grouped panels. Entries marked
+ v2
+ come from that pull request, which was
+ still open (not merged) at the time of this
+ snapshot — treat them as the target design, not yet live.
+ Color tokens
+
+ Defined once as CSS custom properties in a Tailwind
+ @theme block, then consumed everywhere as utility
+ classes (bg-energy,
+ text-rmigray-800, …). Import the hex values
+ below as Figma variables and the two systems stay in lockstep.
+
Primary
+Accent (energy scale)
+Semantic — success / error
++ Neutral ramp — page backgrounds, borders, disabled states +
+Body text ramp — rmigray
+Secondary brand set
++ Badge / plotting families — each ships 100 · 200 · 400 · 800 shades +
++ Rose family — rmipink v2 +
++ Added for sector-segment badges, which needed a family no existing + one was free to supply. Sits between rmired and rmipurple in hue so + it reads as distinct from both. Same four-step structure: 100 fill, + 200 border, 400 mid, 800 text. +
+Typography
+
+ No brand typeface is defined anywhere in the codebase — no
+ @font-face, no webfont link. Every screen renders on
+ the browser's own system font. That's a real gap, not a hidden
+ setting: worth a deliberate decision, not an assumption.
+
ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe
+ UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
+ — Tailwind's default, inherited automatically because
+ tailwind.config.ts never overrides
+ fontFamily.
+ Type scale in use
+
+ The 10px size is an arbitrary Tailwind value, not a theme token.
+ It is used only for scope-axis labels (with
+ uppercase tracking-wider font-semibold) and their
+ "Show all" control. Exported as fontSize.2xs in the
+ token file.
+
Weights in use
+Spacing & elevation
++ Also Tailwind defaults (a 4px base unit) — flagged here because + components lean on a small, consistent subset of the radius and + shadow scale. +
+ +Corner radius
+Elevation
+Buttons & actions
++ Three action patterns cover the whole app: a filled primary button, + a bordered icon toggle (comparison tray), and an underlined text + action (dropdown menus and scope axes). +
+Primary button
++ DownloadDataset.tsx · PublicationBlock.tsx · PathwaySearch.tsx +
+ +Icon toggle — default / added / blocked
+PathwayCard.tsx (comparison tray)
+ ++ v2: the disabled look now covers two reasons, each with its + own label and tooltip — "Comparison full (max 3)" or "Cannot + add: no sector in common with your selection". A comparison + needs at least one shared sector. +
+Text action
+MultiSelectDropdown.tsx
+ +Compact text action v2
+ScopeAxisRow.tsx
+ +Badges
+
+ One component, sixteen semantic variants keyed to a
+ variant prop — plus a transparent "-pub" style used
+ when a value exists in a publication but has no interactive chart
+ data behind it. In v2 a badge can also be a control: pass
+ buttonProps and it renders as a
+ <button>.
+
Badge variants
++ Badge.tsx — variant prop: default · pathwayType · temperature · + year · geographyGlobal/Region/Country(-pub) · sector(-pub) · + sectorSegment · metric(-pub) · keyFeature +
+ +
+ v2: sectorSegment is new (bg-rmipink-100 text-rmipink-800 border-rmipink-200) — a subdivision of a sector such as "Power generation" or
+ "Energy storage", shown beside sector badges so it needs its own
+ color. The region and country "-pub" variants were fixed: they
+ referenced pinishgreen 500/600/700, which don't exist, and
+ rendered blank. Both now use
+ text-pinishgreen-800 border-pinishgreen-400.
+
+ Selectable badge (toggle) v2 +
+
+ BadgeArray.tsx — selected +
+ onSelect props
+
+ Selection is shown with a ring and bolder text, never a color + change — color already says what kind of value the badge is. The + selected badge is moved to the front so it can't hide behind "+N + more". +
+Badge array — overflow
+
+ BadgeArray.tsx — measures container width, collapses to "+N
+ more" beyond maxRows
+
+ v2: the "+N more" tooltip now uses the same display labels as + the visible badges (country names, not codes). +
+Search box
+Resting
Focused, with value
+SearchBox.tsx
+ +Filter dropdown
++ Every search facet (sector, geography, metric, pathway type, + temperature) shares one shell: a pill trigger that reserves space + for its widest possible label, and a floating panel for the options. +
+Trigger — inactive / active
++ DropdownFacetShell.tsx · v2: open/close shared via + useDropdown; clicking the trigger now toggles +
+ ++ An inactive facet reads "Sector..."; an active one shows its + count in bold. Icons are 16px. +
+-
+
- + + Power + +
- + + Transport + +
- + + Industry + +
- + + Buildings + +
Open panel
++ DropdownFacetShell.tsx · MultiSelectDropdown.tsx +
+ ++ The panel is at least as wide as its trigger. Some facets add + a "Show pathways matching Any / All selected" toggle at the + top right, or an italic footnote under the list. +
+Numeric range slider
++ Used on the step-by-step guide pages to pick a temperature range. + The track is a gradient across the warming bands, and the parts + outside the selected range are covered in gray. (The search page's + temperature filter uses two number fields instead.) +
+Temperature range — active
++ NumericRangeSlider.tsx (via StepPageNumericRange.tsx) +
+ ++ Gradient colors come from the component: up to 1.5°C #2888C9, up + to 2.0°C #91CBF2, above that #DF4E39 (#AB3C2C beyond 3.5°C), + with color stops at each half degree. The covers are a + hard-coded rgb(230 236 239), not a theme color. Shown with + bounds of 1.0–3.5°C. +
+Sentiment & neutral scales
++ Ordinal-value bar charts used on pathway detail pages — bars run + unfavorable → favorable (sentiment) or are order-only with no + judgment implied (neutral). The selected bar is taller; the label + below names it. +
+Sentiment scale (7-step)
+SentimentScale.tsx
+ ++ Palette runs rmired-400 → rmired-200 → rmired-100 → + neutral-500 → success-400 → success-600 → success-800, + reversed when the first value is the good one. Three-step + scales use rmired-400, neutral-500, success-600. "No + information" shows the default badge instead of a label. +
+Neutral scale
+NeutralScale.tsx
+ +Tooltip & search highlight
+Tooltip
++ TextWithTooltip.tsx — portal-rendered to <body>, + positioned on hover/focus +
+ +
+ v2: the trigger can be a button (as="button",
+ cursor-pointer) when the tooltipped item is also
+ a control, such as a selectable badge. The default remains a
+ focusable span with cursor-help.
+
Search match highlight
+HighlightedText.tsx
+ +Pathway card
++ The flagship composite — every token and component above assembles + here. This is the single highest-value component for a designer to + have pixel-accurate in Figma, since it repeats on every search + result. +
+IEA: Net Zero Emissions Scenario
++ A normative IEA scenario mapping a technically feasible + path to net-zero CO₂ emissions from the energy sector by + 2050. +
++ Geographies: + +
++ Sectors: + +
++ Benchmark Metrics: + +
+Publication:
+World Energy Outlook 2024
+Published:
+2024
+Pathway card
+PathwayCard.tsx
+ +
+ The temperature cell's color comes from
+ getTemperatureColor: ≤1.5°C pinishgreen-100, ≤2.0
+ solar-100, ≤2.5 solar-200, ≤3.0 rmired-100, ≤3.5 rmired-200,
+ hotter rmired-400. The add-to-comparison button only appears
+ while the comparison tray is open. In the app the card's width
+ is set by the results grid (three columns on wide screens).
+
Header & footer
+
+ Both use the RMI logo image (/RMILogo-white.svg); the
+ dashed "RMI" boxes below stand in for it.
+
Header
++ Header.tsx · HeaderNav.tsx · ResourcesDropdown.tsx +
+ ++ Shown at desktop size. On narrow screens the nav stacks under + the title. +
+Footer
+Footer.tsx
+ +Tabs v2
+
+ The pathway detail page is now split into four tabs: At a glance,
+ Overview, Timeseries, and Scope & Granularity. The active tab is
+ saved in the URL (?tab=), so a link opens the same tab.
+ Arrow keys, Home, and End move between tabs.
+
Tab list — selected / resting / keyboard focus
+Tabs.tsx — Tabs + TabPanel + useActiveTab
+ +Scope ribbon v2
++ A sticky bar under the page title that lets readers narrow the page + to one sector and one geography. It holds a row of selectable badges + per axis and, on the detail page, the tab list. Once the title + scrolls away, a slim Bluespruce bar slides in to restate it. +
+Detail page ribbon — scrolled state
+PathwayContextRibbon.tsx · ScopeAxisRow.tsx
+ +
+ Labels use
+ text-[10px] font-semibold uppercase tracking-wider
+ text-rmigray-500. Each axis always has a value — there's no "clear" state.
+ The condensed bar's height animates in (200ms) and is skipped
+ for reduced motion.
+
+ Publishers do not agree on what Southeast Asia covers: + only IEA NZE includes Timor-Leste. Figures below are not + exactly like-for-like. +
+Comparison scope header
++ ComparisonScopeHeader.tsx · GeographyDivergenceNotice.tsx +
+ ++ One shared sector row for all columns. Geography gets one + dropdown per pathway, lined up under its column, because each + publisher names places differently. +
+Column geography select — open
+ColumnGeographySelect.tsx
+ +
+ Options reuse the geography badges; outlined ("-pub") ones
+ have no chart data. The footnote is
+ GEOGRAPHY_AVAILABILITY_TOOLTIP, the same text as
+ the Geographies tooltip on the pathway card.
+
Data tables v2
++ Two new tables share one style: a Bluespruce header row, + zebra-striped body, and the first cell styled as a row heading. + Columns that would repeat the same value on every row (such as + Sector, once a sector is selected) are hidden automatically. +
+| Metric | +Sector segment | +Granularity | +Scope limitations | +Geography coverage | +Time resolution | +Data format | +
|---|---|---|---|---|---|---|
| Capacity | +
+
+ Power generation
+
+ |
+ By technology | +Utility-scale only | +
+
+ GlobalSoutheast AsiaAfrica+18 more
+
+ |
+ 5-year | +Excel annex | +
| Storage | +
+
+ Energy storage
+
+ |
+ Unspecified | +Unspecified | +Unspecified | +Annual | +Unspecified | +
Data availability table
++ DataAvailabilityTable.tsx (Scope & Granularity tab) +
+ ++ Segment and geography cells render as badges (geography shows + 3, then "+N more"). Placeholder values — "Not covered", + "Unspecified", "No information" — stay as plain text, and a + "Not covered" row is plain text throughout. +
+| Dependency | +Evidence type | +Constraint | +
|---|---|---|
| Grid expansion | ++ Quantitative + | +Transmission build-out must triple by 2035. | +
| Critical minerals | ++ Qualitative + | ++ Assumes supply chains scale without price shocks. + | +
| Public acceptance | ++ Anecdotal + | +Siting of new capacity proceeds on schedule. | +
| CCS availability | ++ No evidence + | +Commercial-scale capture available from 2030. | +
Dependencies table + evidence pills
++ DependenciesTable.tsx (Overview tab) — EvidenceBadge, + strongest → weakest +
+ ++ Pill colors listed as fill / text / border. The pill shape + matches Badge exactly but is its own component. Row content + above is sample text. +
+Section panels v2
++ The page's main content blocks now use one pattern: a light gray + panel with a title, holding white cards in a grid. Key features, + core drivers, coverage, and plots all follow it, so a tab reads as + one system. +
+Assumptions & Trends Overview
+Policies
+Policy drivers
++ Carbon pricing rises steadily across advanced + economies, with phase-out dates for unabated coal. +
+Policy types
+Emissions
+Emissions target (driver)
++ Not a core driver for this pathway. +
+Emissions scope
+Technology
+Technology cost drivers
++ Learning rates for solar, wind, and batteries follow + historical trends. +
+Panel with group cards — Key Features / core drivers
++ KeyFeatures.tsx · CoreDrivers.tsx · ComparisonKeyFeatures.tsx +
+ +
+ Six groups in order: Policies, Emissions, Technology,
+ Investment, Energy System, Other. Each group shows its written
+ driver first, then its feature values. A driver marked not
+ applicable shows "Not a core driver for this pathway." in
+ italic text-rmigray-400. The At a glance tab
+ shows only the first three groups. Pick-list features show
+ every option, with the chosen ones in blue and the rest faded.
+
Benchmark Plots
+Plot small multiples
+PlotGrid.tsx · PlotPanel.tsx
+ ++ One panel per plot type instead of one chart behind a + dropdown. Badges under each chart say which geography and + sector segment it shows. Metrics with no data anywhere are + left out; metrics missing only at this geography keep their + panel with an empty message. +
+Notices & empty states v2
++ Plain-text messages that explain what a scope selection is hiding, + or why a section is empty. They appear only when something is + actually hidden or missing. Clearing a selection is always done in + the ribbon, never from these messages. +
++ Showing 3 of 8 rows for Power in Southeast Asia. +
+Scope filter notice
+ScopeFilterNotice.tsx
+ ++ These columns are not showing the same geography: IEA NZE + shows Global and ACE ATS shows South East Asia. Figures below + are not like-for-like. +
+Geography divergence notice
++ GeographyDivergenceNotice.tsx (comparison page) +
+ ++ No dependencies have been recorded for this pathway yet. +
+Empty state — nothing recorded
++ DependenciesTable.tsx · DataAvailabilityTable.tsx +
+ +No dependencies are recorded for Transport.
++ This pathway records 4 dependencies in other sectors — clear + the sector selection above to see them. +
+Empty state — filtered out
++ Same shell, second line explains where the rows went +
++ Kept distinct from "nothing recorded" so the page never says a + pathway has no data when it's only hidden by a selection. +
+Using this in Figma
+Two ways in, pick based on what you need first.
+ +Option A — colors & type as Figma variables
+-
+
- + Install the Tokens Studio plugin (free) in Figma. + +
-
+ Import
tpr-design-tokens.json(in the same folder as + this page) as a token set. The block below is a short, valid + excerpt showing the format. +
+ - + Use Tokens Studio's "Create Styles/Variables" action to turn every + entry into a real Figma color variable and text style, named + identically to the CSS tags above. + +
{
+ "color": {
+ "bluespruce": { "value": "#003b63", "type": "color" },
+ "energy": { "value": "#45cfcc", "type": "color" },
+ "energy-700": { "value": "#2ab5b2", "type": "color" },
+ "rmigray-800": { "value": "#231f20", "type": "color" }
+ },
+ "fontSize": {
+ "sm": { "value": "14px", "type": "fontSizes" },
+ "base": { "value": "16px", "type": "fontSizes" }
+ },
+ "borderRadius": {
+ "md": { "value": "6px", "type": "borderRadius" },
+ "full": { "value": "9999px", "type": "borderRadius" }
+ }
+}
+ The complete file — all 60+ colors, the type scale, weights, radius,
+ and shadow tokens — is tpr-design-tokens.json, in the
+ same folder as this page. Its colors are generated from
+ src/index.css automatically, so they always match the
+ app.
+
+ Option B — component shapes as editable Figma layers +
+-
+
- + Install the html.to.design plugin in Figma. + +
-
+ Download this file (
tpr-ui-kit.html) from the + repository, then drop it into the plugin's + File tab. +
+ - + It converts the rendered badges, cards, buttons, and dropdowns + straight into native Figma frames, text, and fills — a real + starting point to refine rather than a picture to trace. + +
docs/design/README.md for what is automatic and what is
+ manual.
+