CSS & Styling

Style your UI with CSS, the same way you’d style a web page. Cuttlefish understands a practical subset of CSS — the box model, flexbox, colors, typography, and selectors. All of it is resolved when you build (no CSS engine runs on the device): flexbox is laid out with Yoga (a layout library), styles are resolved, and the resulting draw commands are what the firmware runs.

Box model

Length units

px, bare numbers, and rem/em (multiplied by 16, the root font size — so 0.625rem = 10px). Percentages are honored where applicable. calc() evaluates + - * / on lengths after var() substitution, with operator precedence.

Flexbox (via Yoga)

display: none removes the element subtree from layout, drawing, and hit-testing while preserving generated node indices.

Colors

All standard CSS formats: #rrggbb, #rgb, #rrggbbaa (alpha ignored), rgb(r,g,b), rgba(r,g,b,a) (alpha ignored), hsl(...), hsla(...). Both comma and CSS4 space syntaxes work. The 147 CSS named colors (red, dodgerblue, transparent, …) are supported.

Typography

Fonts (@font-face)

Declare variants with @font-face. When you build, Cuttlefish keeps only the font characters you actually use:

@font-face {
  font-family: "DeviceSans";
  src: url("./assets/DeviceSans-Bold.ttf");
  font-weight: bold;
}

• font-subset: exact — include only the exact glyphs used (smallest binary).
• font-subset: fallback — include fallback glyphs for dynamic text that may contain unanticipated characters.
• font-smoothing: antialiased — enables per-pixel alpha for the matched text.

Visual properties

Transitions and :pressed

transition: background 300ms;
transition: color 120ms;

Smoothly transitions the property over the duration. The :pressed pseudo-class applies while a button’s .value is 1:

#ok { background: #2563eb; transition: background 120ms; }
#ok:pressed { background: #1e40af; transform: translateY(2px); }

:pressed rules may include top/left/right/bottom or transform: translate(...) as draw-time offsets (outset shadows stay anchored).

Selectors

Pseudo-states: :pressed (button held), :disabled, :checked (check/radio .value is 1), :focus.

Inline style="…" attributes and <style> blocks are both supported.

CSS variables and theming

Define variables in :root and reference with var():

:root {
  --bg: #111;
  --fg: #eee;
}
screen { background: var(--bg); color: var(--fg); }

Class-scoped themes select a variant at build time via themeClass in your cuttlefish.config.ts:

:root { --bg: #fff; --fg: #000; }
.dark { --bg: #111; --fg: #eee; }

display: { themeClass: 'dark', /* … */ }

@media performs compile-time variant selection (no runtime resizing). Supported conditions: min-width, max-width, min-height, max-height (in px). orientation is unsupported (warned and skipped).

@media (max-width: 200px) {
  screen { flex-direction: column; }
}

Unsupported (and why)

These are intentionally out of scope for microcontroller rendering:

• display: grid — use flexbox
• Full inline rich text (mixed inline spans)
• background-image / CSS sprites — use <img> instead
• position: fixed
• ::before / ::after pseudo-elements
• text-shadow on the built-in font
• Per-corner border-radius (uniform only)
• Runtime theme switching (themes are resolved at transpile time)
• @import, @supports

Next: Display Configuration for wiring a physical display.