Webflow

Webflow's design system projects confident utility through a sharp, clean interface. A monochromatic foundation of stark blacks and whites is punctuated by a singular, vibrant blue, drawing focus to interactive elements. Typography is the primary conveyor of brand personality, with large, precisely tracked sans-serif headlines creating a modern, impactful presence while subtle shadows add depth to interactive elements without overwhelming the clean aesthetic. Use WF Visual Sans Variable weight 600 for main headlines to convey importance with a modern, sharp tone. Apply Webflow Blue (#146ef5) exclusively to primary calls to action and critical interactive elements. Maintain a clear visual hierarchy by utilizing Ink Black (#080808) for primary text and Slate Gray (#5a5a5a) for secondary, descriptive content. Employ a 4px border-radius for all interactive buttons and smaller UI elements to establish a consistent subtle softness. Use the Ink Black to Canvas White (20:1) contrast for all essential text to ensure AAA legibility. Apply subtle, multi-layered shadows (e.g., rgba(0,0,0,0.01) 0px 54px 22px 0px) to interactive or elevated elements for depth, avoiding heavy dropshadows. Do not introduce additional vibrant colors beyond the established Webflow Blue, Emerald Green, and Amber Glow accents. Avoid using flat black (#000000) for text; opt for Ink Black (#080808) for a softer, yet still direct, appearance. Do not use overly large line heights for headlines; maintain a tight 1.0 to 1.2 ratio to keep headlines compact and powerful. Refrain from varying letter-spacing on body text; apply only to large headlines with the specified negative tracking for impact. Do not use sharp 0px corners in functional components, except for subtle decorative elements like specific input borders.