Skip to content

README.md

Latest commit

 

History

History
44 lines (27 loc) · 1.09 KB

README.md

File metadata and controls

44 lines (27 loc) · 1.09 KB
Raw

Webflow Apps CSS

CSS variables for building Webflow apps that look native in Designer.

Use these tokens for color, typography, and shadows so your UI matches Webflow. Values update automatically from the user’s Appearance settings.

Usage

Include one stylesheet (the others are reference so you can see how tokens look in each theme.)

<link rel="stylesheet" href="webflow-variables.css" />

Then use the variables in your CSS:

.panel {
  background: var(--background1);
  color: var(--text1);
  border: 1px solid var(--border1);
  font-family: var(--font-stack);
  font-size: var(--font-size-large);
}

Themes (reference)

File Theme
webflow-light.css light
webflow-dark-default.css dark
webflow-dark-brighter.css dark brighter
webflow-dark-darker.css dark darker

Design

The Webflow App UI Kit on Figma includes these variables and matching components.