Design System: Webflow

1. Visual Theme & Atmosphere

Webflow's website is a visually rich, tool-forward platform that communicates "design without code" through clean white surfaces, the signature Webflow Blue (#146ef5), and a rich secondary color palette (purple, pink, green, orange, yellow, red). The custom WF Visual Sans Variable font creates a confident, precise typographic system with weight 600 for display and 500 for body.

Key Characteristics:

• White canvas with near-black (#080808) text
• Webflow Blue (#146ef5) as primary brand + interactive color
• WF Visual Sans Variable custom variable font with weight 500600
• Rich secondary palette: purple #7a3dff, pink #ed52cb, green #00d722, orange #ff6b00, yellow #ffae13, red #ee1d36
• Conservative 4px8px border-radius sharp, not rounded
• Multi-layer shadow stacks (5-layer cascading shadows)
• Uppercase labels: 10px15px, weight 500600, wide letter-spacing (0.6px1.5px)
• translate(6px) hover animation on buttons

2. Color Palette & Roles