Source Foundation

Bootstrap design system foundation in a few simple steps.

Source Foundation Demo -> Watch onYouTube (11:10)Source Foundation Deep Dive -> Watch on You Tube (9:43)How it works → Read on MediumColoursSource Foundation generates well-balanced and accessible palettes for light or dark modes. Each palette includes neutrals, brand, semantics and eleven beautiful accent colours to work with. And it is WCAG 2.2 compliant. There is a playground file with design examples and extended documentation on how it works. Learn more about the colour system →TypographyFor typography there are tree scales:

Major thirdMinor thirdMajor secondAnd three base font sizesCompact (13/16): Suits for native desktop applicationsBase (15/20): Well balanced size that works for majority of use casesLarge (17/24): Touch oriented UIsSpacingThere are four pre-calculated spacing scales:

Compact (16): Suits for native desktop applicationsBase (20): Well balanced size that works for majority of use casesLarge (24): Max negative spaceTouch (16): Optimised for touch devicesRadiiThere are three pre-calculated radii scalesCompact (4): Suits for native desktop applicationsBase (6): Well balanced size that works for majority of use casesLarge (8): Touch oriented UIsDev ToolsConnect Source Foundation with developmentTailwind CSS Integration →Integrate Source Foundation with Tailwind CSSNode CLI Generator →Export settings to build CSS variables file with command line tool