Styles & Foundation

The Framer foundation kit provides a base for responsive color, text, animation and shadow styling.

When you post a component to the foundation kit, it dynamically changes color
→ Components pasted to the dark foundation becomes dark
→ Components pasted into light mode, will stay light

A good starting point for creating a color palette from your brand color is the tailwind palette generator.

Dynamic Foundation

For projects that need to adapt to the system theme

Light Foundation

For websites/projects that are light mode only

Dark Foundation

For websites/ projects that are dark mode only

Foundation Kit for Figma

Text and color styles for Figma similar to the foundation kit for Framer. Ideal for quickly ideating designs in figma before starting with Framer. Also comes with a foundation sample page

Dark Foundation

Color and text styles for creating dark websites in Figma.

Light Foundation

Color and text styles for creating light websites in Figma. After downloading, click on import from the top right and select downloaded file

Styles & Foundation

The Framer foundation kit provides a base for responsive color, text, animation and shadow styling.

When you post a component to the foundation kit, it dynamically changes color
→ Components pasted to the dark foundation becomes dark
→ Components pasted into light mode, will stay light

A good starting point for creating a color palette from your brand color is the tailwind palette generator.

Dynamic Foundation

For projects that need to adapt to the system theme

Light Foundation

For websites/projects that are light mode only

Dark Foundation

For websites/ projects that are dark mode only

Foundation Kit for Figma

Text and color styles for Figma similar to the foundation kit for Framer. Ideal for quickly ideating designs in figma before starting with Framer. Also comes with a foundation sample page

Dark Foundation

Color and text styles for creating dark websites in Figma.

Light Foundation

Color and text styles for creating light websites in Figma. After downloading, click on import from the top right and select downloaded file

Supercharge your Framer workflow

100+ variations of styles, components, interactions, layouts, transforms, code overrides, code components. Preview Kit or See Pricing

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Supercharge your Framer workflow

100+ variations of styles, components, interactions, layouts, transforms, code overrides, code components. Preview Kit or See Pricing

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.