Foundation

About this plugin

FoundationFoundation generates a design system in your Figma file: variables, text styles, shadow styles, and an interactive component library. It is built to be updated afterwards, so changing a decision six months later can be done straight from the plugin.You give it a brand colour and a handful of principles. It writes 236 variables across four collections, 16 text styles, 3 shadow styles and 61 component sets, then documents the result on its own pages inside your file.📹 Getting startedhttps://youtu.be/rWJ5h5C_T8k⭐️ What it generatesVariables, in four collections:Primitives (108): the ramps and alpha steps everything else points at. Hidden from publishing, so consumers of your library never see themColors (44): semantic background, foreground, border and shadow roles, with a Light and a Dark modeLayout (60): spacing, radius, border width, and the size roles component chrome binds toTypography (24): font sizes and line heightsStyles:16 text styles, with size and line height bound to the Typography variables3 shadow styles, paired to the surface ladderComponents, on by default and switchable off:61 component sets and 551 variants: buttons, selection controls, nine input flavours, textarea, select, slider, calendar, badges, avatar, tooltip, card, modal, drawer, menus, tabs, breadcrumbs, pagination, sidebar shell, toasts, alerts, progress, steps, nav, toolbar, stat card, empty state35 sets have hover, press and toggle wired as prototype reactions43 icons as components, in asset-panel foldersPages, appended under a divider at the bottom of your page list, after your own pages:How to: how the system is organised, and what is safe to editFoundations: sheets for colour, type, spacing, shape and elevation, built from the variables so they restyle when you updateComponents: the libraryExamples: 10 composed screens, off by defaultIcons: the icon set🤨 How it worksPaste a brand colour. Every other input has a working defaultSet the principles you care about: type, shape, density, modesGenerate, in one passChange an input later, review the diff, apply. Your instances update in place✏️ InputsColour:Brand hex, required. It survives generation verbatim at its snapped stopNeutral temperament: cool, pure or warm. Tints the greys from your brand hueSignal overrides for success, warning, error and info. Curated hues apply when you leave them aloneType:Families for display, text and codeHeading scale ratio, from 1.125 to 1.333Root size, default 16. Spacing and size values scale with it, while token names stay canonicalShape:Card radius and gutter. Every semantic radius derives from those two, with the inner radius being the outer radius minus its paddingControl shape for buttons, inputs and chips: pill or roundedDensity: compact, comfortable or spacious. It changes which spacing tokens components consume.Modes: Dark and Wireframe, both subject to your Figma plan.🧱 How the system is organisedFive rules account for every token, which is what keeps 236 variables navigable:Colours come in pairs. Every background/* has a foreground/* that reads on itSurfaces nest: app, then card, then inset, each with its own matching radius. In dark mode the ladder lightens as it risesStates stack. background/neutral at 5%, -stronger at 10% and -strongest at 15% are translucent, so default, hover and pressed work on any surface, in both modesText fades in four steps: 100%, 70%, 40% and 10% inkStop numbers are lightness grades from 50 to 950. Two stops 700 apart are readable body text on each otherSpacing is numeric by pixel: space/16 is 16px at root 16, and exports as 1rem.🎨 ContrastRamps are generated in OKLCH and anchored to perceptual lightness, so a stop number means something measurable rather than approximate.Every foreground and background pairing is then checked in each mode, with translucent colours composited in gamma space. APCA is the pass target, and WCAG 2.x ratios are reported next to it for compliance reference. Pairings that cannot pass are listed in the completion report and written into the token description, so you find them at generate time instead of in review.♻️ Updating a system you already haveThe document is the only source of truth. Foundation stores your inputs, not your values, and reads the current state of the file before every write.Your edits are adopted. Rename a variable, change a value or delete a token, and Foundation records it as yours and preserves it through later updates. Conflicts default to your valueEvery write is previewed. You see what will be added, updated, removed, preserved, and what conflicts, before anything happensComponent structure can change between plugin versions. When it does, the rebuild is counted in the diff, placed instances are migrated with overrides matched by layer name, and variants you added yourself are keptThree ways back. Undo in one ⌘Z, a version-history checkpoint written before every update, and a revert inside the plugin🚀 Sharing it with your teamThe system lives in the file, so publishing the file as a library shares it the normal Figma way. Primitives are hidden from publishing, so consumers see semantic roles instead of 108 raw ramp steps.The How to and Foundations pages are generated in the file, which gives a new teammate the naming rules and the live token sheets without a separate document to maintain. Both restyle themselves on update, because they are built from the variables they describe.🤖 Sharing it with engineers and agentsFour exports:W3C DTCG 2025.10 JSON, with descriptions, mode extensions and the verified pairing tableCSS custom propertiesTailwind v4 @themeAI guidelines pack: design-system.md plus machine-readable rules, including the contrast pairing table, so a coding agent works from your system’s rules instead of inferring values from a screenshotUnits are metadata on the token, not inferred from its name at export time, so space/16 exports as 1rem at any root size. No html { font-size } override is emitted, since pinning it would override the reader’s own browser text-size setting.💰 Plan limitsVariable modes are limited by your Figma plan, and Foundation checks the limit before it writes anything rather than failing partway through.On a free plan you get one mode. Foundation generates the full Light theme and adds a one-click Theme Switch that flips the whole file between Light and DarkDark and Wireframe are unavailable on a free plan, with the reason on hover, and can be added to the same file in place after you upgradeWireframe needs a plan with three modesStarter plans cap files at three pages. Foundation says which page it could not create instead of returning an API error❌ What it does not doIt does not generate chart or heatmap palettes. Data visualisation sits outside the core token treeIt does not export a Tailwind v3 config. Tailwind v4 @theme onlyIt does not migrate tokens from other plugins, including Foundation 3.x. Objects it did not create are left untouched, and it generates alongside themIt does not re-point existing designs at the new system. That stays a deliberate migrationFree and ProFree covers the generator, the live preview, the diff review and Theme Switch, with 3 applies per document. Pro removes the apply limit and unlocks the four exports.