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: theme-aware
# colors (light/dark), spacing, radius and typography tokens. Paste once in
# App.Formulas, then reference the tokens everywhere — change one value to restyle
# the whole app.
#
# STEP 1 — Paste this whole block into App > Formulas (App.Formulas).
# STEP 2 — Toggle light/dark anywhere with: Set(varThemeIsLight, true) // or false
# STEP 3 — Use tokens on controls: Fill = nfBackground, Color = nfText, etc.
- App:
Control: App
Properties:
Formulas: |-
# … 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 Set(varThemeIsLight, 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 kit is locale-independent — it's named formulas, not control formulas).
- 2In Power Apps Studio, open App > Formulas and paste the whole block.
- 3Toggle the theme anywhere with Set(varThemeIsLight, true) or false.
- 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.