Scale

Apply scale modifiers to the screen element to scale all interface elements proportionally. The selected scale changes typography, component dimensions, gaps, and pixel-based utilities while leaving screen dimensions and relative units unchanged. Scale carries no bit-depth gate, so it works on every screen.

The following examples demonstrate how scale levels affect the same content layout. Notice how all elements scale proportionally.

Scale modifiers set --modifier-scale. The screen composes it with --device-ui-scale for component typography and geometry, while --content-scale applies the modifier to plugin content.

Use Text Scale when typography needs an additional factor without applying it to the rest of the interface.

• Font sizes and line heights
• Component dimensions such as title bars and progress indicators
• Framework gaps and pixel-based spacing utilities
• Pixel-based size, flex basis, grid minimum, and image presets
• Framework radii, text strokes, and image strokes
• Custom properties that reference var(--ui-scale) or var(--content-scale)

<!-- Framework utilities scale automatically. -->
<div class="h--[40px] w--[80px] rounded--[6px]"></div>

<style>
  .custom-panel {
    height: calc(40px * var(--content-scale));
  }
</style>

<script>
  var height = TRMNLPaint.px(40, { el: "my-panel" });
</script>

Inline pixel styles, HTML width and height attributes, intrinsic image dimensions, and chart-library numbers do not scale by themselves. Convert those values explicitly or replace them with scale-aware framework utilities.

Scale modifiers multiply the device's native UI scale instead of replacing it. Plugin content follows the selected modifier, while framework components also retain the device density adjustment. Every modifier except Regular also resolves typography to Inter Variable on low-density displays, because pixel bundles only render correctly at their native sizes.