Infrared / Thermal

A design system forged from FLIR thermal imaging cameras, heat maps, and scientific temperature visualization. Every element maps to the infrared spectrum -- from deep-void purple through searing white-hot.

01 — Color Palette

Thermal Spectrum

Colors organized by temperature. The thermal imaging spectrum maps physical heat to visible color, from the deep purple void of absolute cold to the white-hot saturation of maximum temperature.

-40C 0C 50C 100C 150C 250C 350C 500C

Cold Zone (-40C to 10C)

Freezing
#1a0030
Deep void, page background
Cold
#2d1b69
Panel backgrounds, depth
Cool
#1e3a8a
Secondary accent, info states

Ambient Zone (10C to 50C)

Mild
#0d9488
Primary accent, nominal
Warm
#22c55e
Readout displays, success
Tepid
#84cc16
Transitional, gradients

Hot Zone (50C to 200C)

Hot
#eab308
Warning states, elevated
Hotter
#f97316
Alert accents, rising heat

Critical Zone (200C+)

Searing
#ef4444
Danger, critical alerts
Critical
#dc2626
System failure, maximum
Whiteout
#fef3c7
Saturation, peak highlight

Interface Colors

Void
#0a0010
Primary background
Panel
#120822
Elevated surfaces
Panel Light
#1a0f30
Card backgrounds
Panel Lighter
#22143d
Hover states, borders
Text Primary
#c4b5fd
Body text
Readout
#22c55e
HUD displays, labels
02 — Typography

Type System

Three typefaces calibrated for distinct readout purposes: Orbitron for display and HUD headers, Rajdhani for instrumentation body text, and Share Tech Mono for digital temperature readouts.

Display — Orbitron

Thermal Scan Active

Orbitron 900 / clamp(2rem, 4.5vw, 3.5rem) / letter-spacing: 0.08em / text-transform: uppercase
Body — Rajdhani

The quick brown fox jumps over the lazy dog. Infrared radiation lies between visible light and microwave radiation on the electromagnetic spectrum. Every surface above absolute zero emits thermal radiation that these cameras can detect and visualize.

Rajdhani 500 / 1.15rem / line-height: 1.6
Monospace — Share Tech Mono

TEMP: 37.2C | EMISSIVITY: 0.95 | RANGE: -40~500C | MODE: IRON

Share Tech Mono 400 / 0.95rem / Used in readouts, labels, metadata, code
H1

Thermal Scan

H2

Thermal Scan

H3

Thermal Scan

H4

Thermal Scan

H5
Thermal Scan
H6
Thermal Scan

Thermal imaging works by detecting infrared radiation emitted by all objects above absolute zero. FLIR cameras convert this invisible radiation into a visible image, mapping temperature variations to a color palette that the human eye can interpret.

Italic text functions like a low-temperature reading -- present but secondary, carrying supplementary data without drawing the eye from primary readouts.

Bold text is a thermal hotspot -- an area of concentrated energy that demands immediate attention and analysis.

Inline code elements represent raw sensor data, standing apart from interpreted readings with a digital readout aesthetic.

Every object with a temperature above absolute zero emits infrared energy. The warmer the object, the more radiation it emits. A thermal camera simply makes the invisible visible. FLIR Systems Technical Reference Manual
03 — Spacing

Spatial Scale

A geometric spacing system built on a 4px base unit. Each level maps to the thermal spectrum -- colder values are tighter, hotter values expand outward like radiating heat.

xs (4px)
4px
sm (8px)
8px
md (16px)
16px
lg (32px)
32px
xl (64px)
64px
2xl (96px)
96px
04 — Buttons

Controls

Four interaction tiers mapped to thermal intensity. Primary buttons radiate maximum heat, secondary cool to blue, scan buttons pulse with readout green, and ghost buttons remain invisible until activated.

Primary (Hot)
Secondary (Cool)
Scan (Readout)
Ghost
05 — Forms

Input Controls

Form elements styled as thermal camera control inputs. Labels glow with readout green, fields emerge from the void, and focus states illuminate like heat signatures detected by the sensor.

Detection Modes
Resolution
06 — Cards

Data Panels

Content containers styled as thermal camera data readout panels. Each card carries HUD corner markers and responds to interaction with subtle heat-signature glows.

Infrared Sensor

A microbolometer array detects thermal radiation in the 7.5 to 14 micrometer band. Each pixel measures temperature independently, creating a thermal map of the scene.

View specifications →
Classified

FLIR Imaging Core

Forward-Looking Infrared systems combine germanium optics with uncooled focal plane arrays to produce real-time thermal imagery at frame rates exceeding 60 Hz.

Access datasheet →
342.7C Peak Temperature Reading

Critical thermal anomaly detected in sector 4-B. Temperature exceeds safe operating threshold by 127 degrees. Recommend immediate inspection.

0.95
Emissivity Factor

The ratio of thermal radiation emitted by a surface to that emitted by a perfect black body at the same temperature.

Thermal Mosaic

Composite thermal image stitched from multiple sensor passes. The gradient header simulates a wide-field thermal survey across varying temperature zones.

-40
Min Range (Celsius)

Lower detection limit of the thermal sensor array. Objects below this threshold appear as uniform deep purple in the void spectrum.

07 — Alerts

Thermal Severity

Alert levels mapped directly to the thermal spectrum. Sub-zero conditions register in deep blue, nominal operations in teal-green, elevated readings in amber, critical in red, and whiteout for sensor saturation.

❄
Sub-Zero Conditions Detected

Ambient temperature has dropped below operating threshold. Sensor calibration may drift at extreme cold. Activate internal heater to maintain detector sensitivity.

-28.4C
✓
Systems Nominal

All thermal sensors operating within expected parameters. Detector temperature stable. Auto-calibration cycle completed successfully. Ready for field deployment.

22.1C
⚠
Elevated Temperature Zone

Thermal anomaly detected in grid reference E-7. Surface temperature 12 degrees above expected baseline. Possible equipment malfunction or insulation failure. Schedule inspection.

78.3C
◆
Critical Heat Signature

Dangerous temperature levels detected. Surface reading exceeds 200C safe-contact threshold. Evacuate area and engage remote monitoring protocols immediately.

287.9C
⚡
Sensor Saturation — Whiteout

Thermal reading exceeds maximum sensor range. Image data in affected region is clipped to white. Reduce sensitivity or switch to extended-range mode to resolve true temperature.

>500C
09 — HUD Panels

Readout Displays

Heads-up display panels showing live instrument data. Inspired by the data overlays on thermal camera viewfinders -- temperature readings, sensor status, and diagnostic metrics.

Core Temperature
37.2C
Target Surface Temp
Ambient Temp
21.8C
Environmental Baseline
Peak Detection
412.6C
Hottest Point in FOV
Detector Health
98.7%
Focal Plane Array Status
10 — Heat Map

Thermal Grid

A visual heat map grid demonstrating the full thermal spectrum as a data visualization element. Each cell represents a discrete temperature measurement rendered in the standard FLIR iron palette.

-40C 0C 100C 200C 300C 400C 500C