The runtime injects brand colors, safe-area insets, layout helper classes, and a signature glow — so widgets look at home on the phone and adapt to light/dark without shipping their own theme.
Brand color variables
Six --perch-* variables are set on :root, resolved for the current
appearance. The runtime also sets color-scheme and data-perch-scheme
("light" / "dark") on the document element.
| Variable | Light | Dark |
|---|---|---|
--perch-accent | #C2143A | #E0435C |
--perch-bg | #F0EEE6 | #241D15 |
--perch-ink | #1A1915 | #ECE8D6 |
--perch-muted | #6B6862 | #A79C8C |
--perch-grain | #CDC1AA | #3A2D1F |
--perch-green | #2EA043 | #327A3A |
.value { color: var(--perch-ink); }
.label { color: var(--perch-muted); }
.accent { color: var(--perch-accent); }Safe-area insets
The notch, calibration offset, and bottom bleed are pushed as variables — use them for padding so content clears the hardware:
| Variable | Meaning |
|---|---|
--perch-safe-top | Clears the notch + user calibration. |
--perch-safe-right / --perch-safe-left | Mirrored side insets. |
--perch-safe-bottom | Always 0px — content bleeds to the bottom edge. |
--perch-display-bottom | Symmetric chin (= top) for vertically-centered layouts. |
Two helper classes apply these for you:
.perch-safe— clears the notch, mirrors side insets, bleeds to the bottom..perch-display— same, but adds a symmetric bottom chin so centered content sits optically centered..perch-content— a full-bleed child wrapper (100%width/height,border-box).
<body>
<div class="perch-safe">
<div class="perch-content"><!-- centered, notch-safe UI --></div>
</div>
</body>Orientation
The runtime toggles perch-landscape / perch-portrait on <body> on
load, resize, and orientationchange — the CSS orientation media query is
unreliable in the widget web view, so use these classes instead:
body.perch-landscape .row { flex-direction: row; }
body.perch-portrait .row { flex-direction: column; }The glow
Add perch-glow to <body> for the signature Perch hue — a radial wash
rising from the bottom into the background. Tune it with three variables:
body {
--perch-glow-color: #C2143A; /* the hue */
--perch-glow-base: #000; /* what it fades into */
--perch-glow-intensity: 0; /* 0 = off … 1 = full */
}Drive --perch-glow-intensity from your data for an at-a-glance signal (e.g. the
system widget ramps it with load):
window.PERCH.onData((d) => {
const hot = Math.max(0, Math.min(1, (d.cpu - 80) * 0.05));
document.body.style.setProperty("--perch-glow-intensity", hot.toFixed(3));
});