Build your brand. Rank in AI search. Drive real revenue. All with Webflow.
Advanced collaboration, security, and scale for teams.
Own your site’s visibility in AI search, right within Webflow.
Get tips and tricks from AEO experts in our free webinar.
Start building for free. Upgrade any time. Get started →
The primary CTA is #146ef5 at radius 4px / 51px tall with 16px×24px padding; the compact variant is 8px / 36px with a 12/12 uppercase label at +0.6px. Hover is the signature detail — an inset 0 0 0 100px box-shadow whose spread animates, so the fill sweeps in from the edges instead of cross-fading. Fields and panels are separated by 1px #363636, stepping to #5a5a5a on emphasis. No form field is exposed on the marketing page — section 4 captures only the CTA, compact button, nav link, text link, card and badge, and the spec states plainly: Focus: not captured. The pair above is therefore composed, not measured. It borrows only captured tokens: the primary-CTA geometry (51px tall, radius 4px, 0 24px padding), the #171717 surface under a 1px #363636 hairline, 16/19.2 at 500 / -0.16px UI text and #ababab placeholder. The focus state is derived from the captured hover mechanic — the inset 0 0 0 100px box-shadow sweep at 0.3s cubic-bezier(.165,.84,.44,1) — run at a 1px spread in the single captured accent #146ef5, with the border stepping to that same blue and the placeholder lifting to #ffffff.
The scale is deliberately gapped — 80px straight down to 24px with nothing between — and negative tracking appears only at 80px (-0.8px) and on 16px UI text (-0.16px). Weight never exceeds 600.
Motion runs on three curves: background-color / color / border at 0.3s cubic-bezier(.455,.03,.515,.955) (the house curve), transform at 0.3s cubic-bezier(.645,.045,.355,1), and opacity at 0.45s. The CTA fill sweep uses box-shadow 0.3s cubic-bezier(.165,.84,.44,1). No scroll animation, parallax, gradients, blur or grain anywhere — every surface is a flat solid.