Sonde Theming Brand Previews

Every card renders from the real theme CSS — the same tokens the cockpit, audit reports, and slide decks load. Scoped per-card so each palette reads as itself, regardless of the page theme or your OS dark-mode preference.

Daylight — Light

Solar chrome. The brand-frame for daylight.sonde.life — warm ecru ground, deep prussian navy, tidal teal accent.

surface

primary

accent

text

muted

border

pass

Analysis ReportTier 3

Normal body text — paragraph rhythm, reading color, body font at standard size.

Analyst stats: 1,208 findings · 94% coverage

// Compute the Sonde score tier for an audit report
function computeScore(report: AuditReport): number {
  if (report.findings === null) return 1000;
  const ratio = report.passing / report.total;
  return Math.round(ratio * 1000);
}

const MINIMUM_TIER = 750;
const result = computeScore(auditResult);
if (result >= MINIMUM_TIER) {
  console.log("pass");
}

theme CSS tokens.css

Daylight — Dark

Night-shift brand-frame. Deep slate ocean floor with luminous teal signal and phosphor amber accent.

surface

primary

accent

text

muted

border

pass

Analysis ReportTier 3

Normal body text — paragraph rhythm, reading color, body font at standard size.

Analyst stats: 1,208 findings · 94% coverage

// Compute the Sonde score tier for an audit report
function computeScore(report: AuditReport): number {
  if (report.findings === null) return 1000;
  const ratio = report.passing / report.total;
  return Math.round(ratio * 1000);
}

const MINIMUM_TIER = 750;
const result = computeScore(auditResult);
if (result >= MINIMUM_TIER) {
  console.log("pass");
}

theme CSS tokens.css

Ultraviolet — Light

Frost porcelain with violet ink. The light-mode inversion of the cockpit default palette.

surface

primary

accent

text

muted

border

pass

Analysis ReportTier 3

Normal body text — paragraph rhythm, reading color, body font at standard size.

Analyst stats: 1,208 findings · 94% coverage

// Compute the Sonde score tier for an audit report
function computeScore(report: AuditReport): number {
  if (report.findings === null) return 1000;
  const ratio = report.passing / report.total;
  return Math.round(ratio * 1000);
}

const MINIMUM_TIER = 750;
const result = computeScore(auditResult);
if (result >= MINIMUM_TIER) {
  console.log("pass");
}

theme CSS tokens.css

Ultraviolet — Dark

Cockpit product default. High-energy physics lab — plasma discharge over deep-space nebulae.

surface

primary

accent

text

muted

border

pass

Analysis ReportTier 3

Normal body text — paragraph rhythm, reading color, body font at standard size.

Analyst stats: 1,208 findings · 94% coverage

// Compute the Sonde score tier for an audit report
function computeScore(report: AuditReport): number {
  if (report.findings === null) return 1000;
  const ratio = report.passing / report.total;
  return Math.round(ratio * 1000);
}

const MINIMUM_TIER = 750;
const result = computeScore(auditResult);
if (result >= MINIMUM_TIER) {
  console.log("pass");
}

theme CSS tokens.css

Infrared — Light

Amber on bone. Daylight-readable thermal instruments.

surface

primary

accent

text

muted

border

pass

Analysis ReportTier 3

Normal body text — paragraph rhythm, reading color, body font at standard size.

Analyst stats: 1,208 findings · 94% coverage

// Compute the Sonde score tier for an audit report
function computeScore(report: AuditReport): number {
  if (report.findings === null) return 1000;
  const ratio = report.passing / report.total;
  return Math.round(ratio * 1000);
}

const MINIMUM_TIER = 750;
const result = computeScore(auditResult);
if (result >= MINIMUM_TIER) {
  console.log("pass");
}

theme CSS tokens.css

Infrared — Dark

Thermal imaging. Night-vision instruments — warm amber signals on charcoal.

surface

primary

accent

text

muted

border

pass

Analysis ReportTier 3

Normal body text — paragraph rhythm, reading color, body font at standard size.

Analyst stats: 1,208 findings · 94% coverage

// Compute the Sonde score tier for an audit report
function computeScore(report: AuditReport): number {
  if (report.findings === null) return 1000;
  const ratio = report.passing / report.total;
  return Math.round(ratio * 1000);
}

const MINIMUM_TIER = 750;
const result = computeScore(auditResult);
if (result >= MINIMUM_TIER) {
  console.log("pass");
}

theme CSS tokens.css

High Contrast

Accessibility-first. Pure black-and-white contrast with Atkinson Hyperlegible typography.

surface

primary

accent

text

muted

border

pass

Analysis ReportTier 3

Normal body text — paragraph rhythm, reading color, body font at standard size.

Analyst stats: 1,208 findings · 94% coverage

// Compute the Sonde score tier for an audit report
function computeScore(report: AuditReport): number {
  if (report.findings === null) return 1000;
  const ratio = report.passing / report.total;
  return Math.round(ratio * 1000);
}

const MINIMUM_TIER = 750;
const result = computeScore(auditResult);
if (result >= MINIMUM_TIER) {
  console.log("pass");
}

theme CSS tokens.css

Download all themes (.zip)