Home
DESIGN.mdStar on GitHub
Copied!

Make your website a growth engine

The agentic web platform to visually design, build, and scale sites — with clean code and a real CMS.

Colors
Primary
Webflow Blue
#146EF5
Brand, CTAs, selection
Blue Deep
#002A6A
Dark accents
Ink
#080808
Text, dark page
Purple
#7A3DFF
Accent
Pastels — Section Backgrounds (2024 rebrand)
Lavender
#CDBCF0
Section bg
Mint
#A6DABF
Section bg
Peach
#FFCA97
Section bg
Cream
#FAFFE7
Section bg
Designer Chrome — always dark
Panel
#2E2E2E
Style panel
Panel Deep
#1E1E1E
Inputs, wells
Input
#383838
Fields
Canvas Backdrop
#3A3A3A
Behind canvas
Surfaces — Dark (from real #080808)
Page
#080808
Dark background
Surface
#141414
Cards
Page Light
#FAFCFF
Light background
Border
#E2E6ED
Dividers (light)
Typography — Inter ≈ WF Visual Sans · WF Visual Sans Mono
h1
Design without limits
40px800Inter
h2
Build visually. Ship real code.
27px700lh 1.1
h3
Style panel & breakpoints
20px600lh 1.3
body
Design responsive websites visually and Webflow generates clean, semantic HTML and CSS behind the scenes.
15px400lh 1.6
css
display: flex; justify-content: space-between;
13pxVisual Sans Mono
Signature — Designer
Flex Container
Card 1
Card 2
Card 3
Layout
Direction
Justify
Align
Gap 12px
Background
Color
146EF5
Components
Buttons
Inputs
Pastels
Breakpoints
Desktop 992+Tablet 768Mobile 480
Guardrails
DO
Use Webflow blue #146EF5 for brand, CTAs, and canvas selection
Keep the Designer chrome dark regardless of the page theme
Use WF Visual Sans Mono for CSS values, class names, breakpoints
Use pastels as section backgrounds, not control colors
Show the selected element and its style values together
DON'T
Don't use the pre-rebrand indigo #4353FF — brand blue is #146EF5
Don't recolor the Webflow mark outside blue or a flat color
Don't put pastel fills on interactive controls
Don't set CSS values or class names in a proportional font
Don't invent dark surfaces; step within real #080808