Design System Kit
The Design System Kit is a full copy-paste theme for Power Apps, delivered as named formulas: theme-aware colors (automatic light/dark), a spacing scale, corner-radius and typography tokens. Paste it once into App.Formulas and reference nfPrimary, nfSurface, nfText, nfSpace4 everywhere — change one value and the whole app restyles. It is the foundation the rest of the PowerBlocks components are built to match.
colors · spacing · radius · type
YAML source
Preview — full code with PRO// Design System Kit — PowerBlocks (PRO)
// A complete, copy-paste design system as Power Apps named formulas: colors
// (light/dark), spacing, radius and typography tokens. Reference the tokens
// everywhere — change one value to restyle the whole app.
//
// HOW TO USE (this is Power Fx, NOT a control — do not paste it on a screen):
// 1. In Power Apps Studio, select "App" in the Tree view.
// 2. Open the "Formulas" property in the formula bar dropdown.
// 3. Paste this whole block into App.Formulas.
// 4. Use the tokens on your controls: Fill = nfSurface, Color = nfText, etc.
// ===== Theme switch =====
// Named formulas cannot reference variables (Set/UpdateContext).
// Flip this constant to switch the whole app: true = light, false = dark.
# … full component definition unlocked with PROThis is a partial preview. Unlock the full component →
Common use cases
One source of truth
Stop hard-coding RGBA on every control — drive all colors, spacing and type from a single set of tokens.
Instant light/dark
Flip the nfIsLight constant to true and every token-bound control switches theme at once.
Rebrand in seconds
Change nfPrimary (or any token) once and the entire app updates — perfect for white-labelling per client.
How to use Design System Kit in Power Apps
- 1Click "Copy YAML" — the content is a Power Fx block for App.Formulas (invariant comma syntax; Studio adapts the display to your locale).
- 2In Power Apps Studio, open App > Formulas and paste the whole block.
- 3Switch the theme by setting the nfIsLight constant to true (light) or false (dark) at the top of the block.
- 4Use the tokens on your controls: Fill = nfSurface, Color = nfText, Size = nfTextMd, etc.
Tip — Pair this with the Theme Generator tool: design your palette visually there, then map its values onto these nf* tokens so every component and screen stays perfectly on-brand.