webflow.com

webflow.com is a Magician brand — cool, kinetic, bold, modern and visionary — anchored on #146ef5 and WF Visual Sans Variable, mixed motion.

Adjectives

• cool
• kinetic
• bold
• modern
• visionary

Personality axes

Evidence

• #146ef5 at 216° reads cool → cool (warmth -1)
• 50px median radius, 450ms median motion → kinetic (energy +0.5)
• heaviest weight 600, 4.6:1 brand contrast → bold (weight +0.34)
• Axis fingerprint nearest the Magician archetype (64% fit, vs Explorer).

Page intent

landing 75% confidence

Material language

flat

Imagery style

photography

Component library

bootstrap

Stack

webflow

Voice tone

neutral

1 primary · 1 secondary · 1 accent · 12 neutrals · 17 total

Neutrals

Full palette

WCAG 95% · 20 passing pairs · 1 failing. Full breakdown in §11.

3 families · 21 sizes · 4 weights

Display

WF Visual Sans Variable

Body

WFVisualSans-Mono

Weights

400, 500, 600, 550

Specimen

Scale

Base 1px · 22 steps captured

Rhythm

4 radii · 5 elevation tiers

Border radii

Elevation

unknown · 24 captured

Library

unknown

Confidence

0%

Stroke style

—

Feel: mixed · 4 durations · 3 easings

Duration scale

Easings

• ease-out
• custom
• custom

bootstrap · 3 component patterns captured

Mocks

Detected patterns

neutral · — · —

Headlines from the site

• Platform
• Build
• Manage
• Optimize

CTA verbs

• ×14
• ×6
• ×4
• ×3
• ×3
• ×3
• ×3
• ×3

Failing pairs

Suggested replacements

• #ffffff → (3.68:1)

Drop-in code for the most common stacks. All values from the live extraction.

:root {
  --color-primary: #146ef5;
  --font-display: "WF Visual Sans Variable";
  --space-base: 4px;
  --radius-md: 6px;
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#146ef5' },
      fontFamily: { display: ['WF Visual Sans Variable', 'serif'] },
      spacing: { base: '4px' },
      borderRadius: { md: '6px' },
    },
  },
};

Run npx designlang pack webflow.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

1. Lead with the primary.

   It belongs on calls-to-action and one accent moment per screen. Not on body copy.

2. Two type families, three weights.

   Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

3. Snap to the spacing scale.

   Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

4. Treat accessibility as a hard constraint.

   When a colour pair fails WCAG, fix the colour — not the contrast check.