Fundational

About this plugin

For people who take accessibility in digital products seriously.Fundational generates the foundation layer of a design system as native Figma variables and styles — the color, type, spacing and layout tokens everything else is built on. Not a whole design system: the part you set up once and reference forever. And when you're ready to build, it exports to code.No components. On purpose. Components would impose someone else's shapes and taste. Fundational makes plenty of decisions, but the systematic ones: how the color ramps are built, how contrast resolves, how the scale steps. The objective parts that are tedious to get right and easy to get wrong. The visual decisions - your colours, type, shape, the feel - stay entirely yours.Accessibility is built in, not bolted on. Color ramps are generated in OKLCH (perceptually even, no clumping in the yellows and greens), and every semantic token resolves to the step that passes WCAG 2.2 AA against its background, in both light and dark. A strong, accessible starting point, designed in from the first token rather than retrofitted later.To be precise: these are accessible foundations, not a guarantee. Whether the final product is compliant depends on how you use the tokens. Foundations, not a finish line.WHAT IT GENERATESColor: OKLCH ramps + a full stateful semantic system (default / hover / pressed / disabled / focus), WCAG-resolved for light and darkAutomatic naming: colours named by their actual hue (a yellow warning is "yellow", not "orange"), collision-safeTypography: a responsive collection (Desktop / Tablet / Mobile); body and UI text hold steady while display and headings scale per breakpointLayout: per-breakpoint grid variables and real Figma grid styles, on boards that reflow when you switch modeSpacing, radius and elevation scales, with per-component roundnessMulti-brand: colour, fonts and roundness per brand, with one shared type scaleDocumentation boards that reference the real variables, so the docs stay in sync with the tokensVariable scopes set for you: each token only appears in the picker where it belongs (radius on corners, spacing on gaps, colours on the right fills), so the system stays tidy out of the boxEXPORT TO CODE People design less and less in Figma alone these days — so the foundation isn't locked to Figma. Download your tokens as CSS custom properties (with a dark-theme block and responsive @media sizes) or as DTCG JSON. References are preserved (not flattened to hex), so it's ready for Style Dictionary, Tokens Studio, or a drop straight into your codebase.HOW TO USESet your brand color(s), type, spacing & radius, and layout across the tabs.Open Review, check the summary, then Generate foundations.Optionally tick Generate documentation (one board per brand) and export to code.Everything lands as native Figma variables and styles, grouped into clean collections (_primitives, brand, mode, scale, responsive) and ready to build on.Found a bug, or want a feature? Let me know - I want to make it better.I hope, somehow, it helps you ship more accessible, more considered digital products.