Luna UI Documentation

Typography utilities — font-family classes for the shipped SDF font set (font-*), text color (text-{color}-{tone}), and font size (text-xs … text-9xl).

Default fonts

The Essentials theme ships the Nunito SDF font set and selects it in Theme/Font.uss. Every weight gets a --font-* variable plus a matching .font-* class, and a :root, Label rule sets the project-wide default (semi-bold, 24px, --color-neutral-50):

css

:root {
  --font-extra-light: url("Fonts/nunito/static/Nunito-ExtraLight SDF.asset");
  --font-light: url("Fonts/nunito/static/Nunito-Light SDF.asset");
  --font-regular: url("Fonts/nunito/static/Nunito-Regular SDF.asset");
  --font-medium: url("Fonts/nunito/static/Nunito-Medium SDF.asset");
  --font-semi-bold: url("Fonts/nunito/static/Nunito-SemiBold SDF.asset");
  --font-bold: url("Fonts/nunito/static/Nunito-Bold SDF.asset");
  --font-extra-bold: url("Fonts/nunito/static/Nunito-ExtraBold SDF.asset");
  --font-black: url("Fonts/nunito/static/Nunito-Black SDF.asset");
  /* …plus a --font-{weight}-italic variant of each */
}

:root,
Label {
  -unity-font-definition: var(--font-semi-bold);
  -unity-font-style: normal;
  color: var(--color-neutral-50);
  font-size: 24px;
}

.font-light { -unity-font-definition: var(--font-light); }
.font-bold  { -unity-font-definition: var(--font-bold); }
/* …one class per weight — font-extra-light, font-light, font-regular,
   font-medium, font-semi-bold, font-bold, font-extra-bold, font-black —
   each with a font-{weight}-italic twin */

To swap the project font, edit Font.uss in your copied theme and repoint the --font-* variables at your own SDF assets — see Theme Stack for the copy-the-theme-out-of-Samples step and where overrides belong.

Utility Classes

Text Color

Format: text-{color}-{tone}

html

<engine:Label class="text-black" />
<engine:Label class="text-white" />
<engine:Label class="text-red-500" />
<engine:Label class="text-red-500-half" />

text-black, text-white, and text-transparent ship in the Luna package itself; the per-ramp classes (text-red-500, …) come from the Essentials theme's Colors/utility-colors.uss (or your own Palette Generator export). The -half suffix means the same tone at 50% opacity — it's a convention, not shipped by default; see Colors → The -half suffix for the two-line alias to define it yourself.

Class	Properties
text-xs	12px
text-s	14px
text-md	16px
text-lg	18px
text-xl	20px
text-2xl	24px
text-3xl	30px
text-4xl	36px
text-5xl	48px
text-6xl	64px
text-7xl	80px
text-8xl	96px
text-9xl	128px

⚠️ These classes need the --length-* variables defined. LibFontSize.uss sets font-size: var(--length-N), but current Luna builds no longer ship the --length-* definitions (the old LibLength.uss block was removed from the main theme). Add the definitions to your own USS — the copy-paste block is on Size → USS variables — or the text-* size classes won't change the font size.

Text

Default fonts

Utility Classes

Text Color

Font Size

See also