6. UI Guidelines

Webflow doesn’t require Designer Extensions to feel native to the Designer, but we do believe apps that feel native will resonate with our customers and provide a higher-level experience. Webflow provides a App UI toolkit in Figmaand CSS variables to help you build an app that feels native to Webflow’s Designer.

Figma app kit

Webflow’s App UI kit provides a simplified version of our design system with colors, typography, components, patterns, and app examples to help kickstart the design and build of your app.

Access the App UI kit here
Password: WebflowAppsBeta23

CSS variables

To design and build an app that feels native to Webflow’s Designer, you can use the following CSS variables. Implement these variables by pasting and defining them within a ruleset like :root or body, and calling them in your CSS selectors with the var() function:

:root {
  --background1: red;
}
.button {
  background: var(--background1);
}
Body {
  --background1: red;
}
.button {
  background: var(--background1);
}

Common tokens:

--actionPrimaryBackground color for it’s primary buttons
--actionPrimaryText color for primary button text

--actionSecondaryBackground color for secondary and default buttons
--actionSecondaryText color for secondary button text

--text1 color for highlighted text, headlines, emphasized text
--text2 default text color, labels, descriptions

--border1 default border color for buttons, inputs, dividing lines

--background1 default app background color

--border-radius-small default border radius for buttons, inputs

--font-size-small default font sizes for labels, inputs, text
--font-size-large large text for headlines

--font-weight-normal default text weight for buttons, labels, inputs
--font-weight-medium text weight for headlines and emphasized text

/* Webflow colors */
--background1: #404040;
--background2: #4d4d4d;
--background3: #363636;
--background4: #2b2b2b;
--background5: #212121;
--backgroundInactive: #4d4d4d;
--backgroundInverse: #EBEBEB;


--actionSecondaryBackground: #5e5e5e;
--actionSecondaryBackgroundHover: #696969;
--actionPrimaryText: #FFFFFF;
--actionPrimaryTextHover: #F6F6F6;
--actionSecondaryText: #EBEBEB;
--actionSecondaryTextHover: #F6F6F6;
--actionPrimaryBackground: #0073E6;
--actionPrimaryBackgroundHover: #1280EE;


--border1: #363636;
--border2: #2b2b2b;
--border3: #212121;
--border4: #5e5e5e;


--text1: #d9d9d9;
--text2: #ababab;
--text3: #757575;
--text4: #696969;
--textInactive: #757575;
--textInverse: #363636;


--blueText: #8AC2FF;
--blueIcon: #2496FF;
--blueBorder: #2496FF;


--greenBackground: #008547;
--greenBackgroundHover: #00944F;
--greenText: #63D489;
--greenIcon: #2FC862;
--greenBorder: #2FC862;


--yellowBackground: #996E00;
--yellowBackgroundHover: #AD7D00;
--yellowText: #FFC700;
--yellowIcon: #FFC700;
--yellowBorder: #FFC700;
--redBackground: #CF313B;
--redBackgroundHover: #DB434C;
--redText: #FF8A8A;
--redIcon: #FF424D;
--redBorder: #FF424D;


--orangeBackground: #C75300;
--orangeBackgroundHover: #DD7124;
--orangeText: #FFAB66;
--orangeIcon: #F67E28;
--orangeBorder: #F67E28;
--purpleBackground: #7F5AE9;
--purpleBackgroundHover: #8A61FF;
--purpleText: #B89EFF;
--purpleIcon: #A484FF;
--purpleBorder: #A484FF;


/* TYPOGRAPHY */
--font-stack: 'Inter', sans-serif;


--font-size-small: 11px;
--font-size-large: 12px;


--font-weight-normal: 400;
--font-weight-medium: 500;


--border-radius: 2px;

Fonts

To use Webflow’s main font face, Inter, you will need to download the files into your app or access them via Google Font’s API.

Access Inter font family on Google Fonts.