effect
Lock frame effect
An 8px blur over a locked project's thumbnail, the blurred view behind the lock.
.locked .thumb {
filter: var(--effect-lock-frame);
}When to use
- On the thumbnail of a locked project (NDA, password), together with the lock icon.
When not to use
- Loading or disabled states. Blur says "hidden", not "wait".
Behaviour
filter: blur(8px) blurs the element's own content. Thumb is the opposite: it blurs what's behind it. In Figma the blur is tied to spacing/base-8, which isn't in tokens.css, so the code uses --effect-lock-frame instead.
Accessibility
- Name: say it's locked in words ("Locked case study"). Blur and an icon aren't enough.
- Content: blurred text is still in the page for anyone who looks. Don't blur confidential copy, show a placeholder.
Values
Straight from the contract. Each value sits next to its token, because six tokens here all come out as #3a3a3a and the colour alone can't tell you which one is right.
Never changes
| Part | Property | Value | Token |
|---|---|---|---|
| root | filter | blur(8px) | effect/lock-frame |