Source Foundation

About this plugin

Bootstrap design system foundation in a few simple steps.

1. Source Foundation Demo -> Watch onYouTube (11:10)
2. Source Foundation Deep Dive -> Watch on You Tube (9:43)
3. How it works → Read on Medium

Colours

Source 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 →

Typography

For typography there are tree scales:

1. Major third
2. Minor third
3. Major second

And three base font sizes

1. Compact (13/16): Suits for native desktop applications
2. Base (15/20): Well balanced size that works for majority of use cases
3. Large (17/24): Touch oriented UIs

Spacing

There are four pre-calculated spacing scales:

1. Compact (16): Suits for native desktop applications
2. Base (20): Well balanced size that works for majority of use cases
3. Large (24): Max negative space
4. Touch (16): Optimised for touch devices

Radii

There are three pre-calculated radii scales

1. Compact (4): Suits for native desktop applications
2. Base (6): Well balanced size that works for majority of use cases
3. Large (8): Touch oriented UIs

Dev Tools

Connect Source Foundation with development

Tailwind CSS Integration →

Integrate Source Foundation with Tailwind CSS

Node CLI Generator →

Export settings to build CSS variables file with command line tool