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.
Pro component
Subscribe to access this component and the full library.
From 9€/month, or 79€/year
Unlock Procolors · 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.