design productivity Color System
Webflow's website is a visually rich, tool-forward platform that communicates "design without code" ...
Webflow's website is a visually rich, tool-forward platform that communicates "d...
Webflow uses #080808 as the primary accent for interactive elements
Carefully selected 8 colors for design-productivity applications
Clean, minimalist approach with purposeful color usage
#080808
Primary text
#146ef5
`--_color---primary--webflow-blue`, primary CTA and links
#3b89ff
`--_color---primary--blue-400`, lighter interactive blue
#006acc
`--_color---blue-300`, darker blue variant
#0055d4
`--mkto-embed-color-button-hover`
#7a3dff
`--_color---secondary--purple`
#ed52cb
`--_color---secondary--pink`
#00d722
`--_color---secondary--green`
/* Webflow Color System */
:root {
--webflow-near-black: #080808;
--webflow-webflow-blue: #146ef5;
--webflow-blue-400: #3b89ff;
--webflow-blue-300: #006acc;
--webflow-button-hover-blue: #0055d4;
--webflow-purple: #7a3dff;
--webflow-pink: #ed52cb;
--webflow-green: #00d722;
}
/* Example usage */
.webflow-button-primary {
background-color: var(--webflow-near-black);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 8px 15px;
}Airtable's website is a clean, enterprise-friendly platform that communicates "s...
Cal.com's website is a masterclass in monochromatic restraint — a grayscale worl...
Clay's website is a warm, playful celebration of color that treats B2B data enri...
Figma's interface is the design tool that designed itself — a masterclass in typ...