Foundation "Styled" Library

Overview

Get the template here ↗

All elements copied and pasted will be linked to your app's styles: colors, typography, and base elements (inputs, buttons, etc).

The Foundation template is required for this to work. To use this library, create an app using the Basis Founation Template

Styles & Customization

The template has predefined styles that make customizing the your application with Basis much simpler.

Editing the styles in your application will impact the look and feel of the elements pasted from the Foundation Library!

Colors

The foundation template has 24 custom color styles to fully control color value of your (in addition to Bubble's 8 default color styles)

By default, Basis uses Tailwind CSS's color system. If you'd like to tweak your color palette, check out the following links:

• Tailwind Color Palette

• Custom palette generator

Color Styles

The template color styles or structured as follows.

Primary (brand): Primary, Primary 100-900

• Edit the colors via the styles panel to change the primary brand colors of your app

Neutrals: Text, Background, Neutral 100-800

• Edit the colors styles above if changing the neutral palette of your app

Semantic Colors

• Destructive 100-900

• Warning 100-900

• Success 100-900

Typography

Font Variables

• App - Changing this font style will impact both Paragraph and Label font styles

• Heading - Changing this font style will impact all Heading font styles

Base element styles

You can change the look and feel of the default buttons, inputs, dropdowns, etc in Basis, by editing the element styles.