Shadow
Elevation scale — none through 2xl. Fixed black-based values, not theme-dependent.
0px 1px 0px rgba(0,0,0,0.05)
0px 1px 2px rgba(0,0,0,0.05)
0px 1px 3px rgba(0,0,0,0.10), 0px 1px 2px rgba(0,0,0,0.06)
0px 2px 4px -1px rgba(0,0,0,0.06), 0px 4px 6px -1px rgba(0,0,0,0.10)
0px 4px 6px -2px rgba(0,0,0,0.05), 0px 10px 15px -3px rgba(0,0,0,0.10)
0px 10px 10px -5px rgba(0,0,0,0.04), 0px 20px 25px -5px rgba(0,0,0,0.10)
0px 25px 50px -12px rgba(0,0,0,0.25)
Opacity (content)
Hierarchy tool — only these four values for content. Never 30/50/70/90/10/15.
opacity: 0.80
Text at 80%
opacity: 0.60
Text at 60%
opacity: 0.40
Text at 40%
opacity: 0.20
Text at 20%
opacity: 0.40 (Webflow alias)
Webflow form
Layout
Flex utilities, page shells, and the canonical 2-column grid.
grid-template-columns: 1fr 1fr
flex-direction: column
align-items: center
justify-content: space-between
Dividers
Horizontal only. 5% opacity. Never vertical.
Accessibility
Screen-reader-only helpers.
Visually hidden — readable by AT
(invisible content present — inspect markup)Visually hidden but announced