Docs
Design System
Named Formulas that give you theme-aware colors, spacing, typography, responsive breakpoints, and icons. Define once, use everywhere.
On this page
Named Formulas are declarative. Change
varThemeName once → your entire app theme updates. No OnStart, no ordering issues, full autocomplete in Studio.Without
- Hardcoded RGBA on every control
- Theme change = edit 100+ properties
- No autocomplete for design values
With Named Formulas
- One source of truth for all colors
- Theme switch = single Set() call
- Type
nf→ full design system
Add this to App → Formulas. This gives you themed colors, spacing, and responsive detection in 25 lines.
App → Formulas — minimum setup
nfThemeName = Coalesce(varThemeName, "Light");
nfIsLight = nfThemeName = "Light";
nfHex(h: Text): Color = ColorValue(h);
nfPalette = If(nfIsLight,
{ pageBg:"#F9FAFB", cardBg:"#FFFFFF", text:"#111827",
text2:"#4B5563", border:"#E5E7EB", primary:"#2563EB" },
{ pageBg:"#111827", cardBg:"#1F2937", text:"#FFFFFF",
text2:"#D1D5DB", border:"#374151", primary:"#60A5FA" }
);
nfColors = {
pageBg: nfHex(nfPalette.pageBg),
cardBg: nfHex(nfPalette.cardBg),
text: nfHex(nfPalette.text),
text2: nfHex(nfPalette.text2),
border: nfHex(nfPalette.border),
primary:nfHex(nfPalette.primary)
};
nfTokens = { space: { sm:8, md:12, lg:16, xl:24 } };
nfIsMobile = App.Width < 640;
nfIsDesktop = App.Width >= 1024;Or use the Copy Full Starter Code button above for the complete version with 20+ colors, typography, icons, and status helpers.
Every Named Formula starts with nf. In Power Apps Studio, type nf and autocomplete shows your entire design system.
| Formula | Purpose | Returns |
|---|---|---|
| nfPalette.* | Hex color strings | "#2563EB" |
| nfColors.* | Color values | Color |
| nfTokens.space.* | Spacing scale | 4 → 32 |
| nfTokens.radius.* | Border radius | 4 → 999 |
| nfType.* | Typography | Record |
| nfHeights.* | Layout heights | Number |
| nfIcons.* | SVG data URIs | Text |
| nfIsMobile | Width < 640 | Boolean |
| nfIsDesktop | Width ≥ 1024 | Boolean |
| nfStatusBg() | Status pill bg | Color |
Use It With Our Components
The Data Table, KPI Cards, Charts, and all PowerApps UI components work with this design system. Configure them with nfColors and nfTokens.