KeepNeeds Refinement
Overlay Component link

A full-viewport scrim used to dim background content behind sheets, modals, and tooltips. Three strength tiers.

Keep — all findings resolved
Three strength tiers — Weak 24%, Default 40%, Strong 56% — on a 360×800 default that scales exactly with its instance, verified across five placements from 640 to 932. Structure is one layer deep, each tier binds to its own semantic token, and the dismiss contract and layer order are documented. All four DS Health traits pass; the only item still open is Code Connect, blocked until the native library exists.
In Context

Overlay sits between page content and a floating surface (bottom sheet, dialog, drawer). It dims the content below to focus attention on the surface above.

Live Preview
Activity

Send Money

Choose a recipient from your contacts or enter a mobile number.

Continue
Properties
strength
background
surface above
DS Health
Reusable
Pass
Works as the dim layer behind any modal surface. Ships at a 360×800 default and the dim layer scales exactly with the instance — verified rendering at 640, 761, 826 and 932.
Self-contained
Pass
Owns its fill and opacity. Nothing external required to render.
Consistent
Pass
Three named strengths (Weak · Default · Strong) under a single Strength property. Naming no longer implies a missing sibling.
Composable
Pass
Sits behind sheets, dialogs and drawers and sizes correctly at any placement. Layer order is documented — Content → Overlay → Floating surface — so teams no longer have to infer it.
Behavior
State iOS Android Figma Property Notes
Show / hide Yes Yes Not defined Fades with the presentation transition of its owning surface.
Tap to dismiss Yes Yes Not annotated Contract: tap-scrim dismisses unless surface is marked modal.
Scroll lock N/A N/A Handled by surface Owning sheet/dialog locks background scroll on mount.
Focus / a11y Yes Yes Implicit Scrim itself is not focusable — owning surface traps focus.
Issues
  • Code Connect mappings not registered. Blocked — no native library exists yet. Three variants map 1:1 to a single strength enum parameter. C7 · Code Connect Linkability
  • Strength property added. v2.0: Weak (24%) · Default (40%) · Strong (56%), replacing the single 56% variant whose -strong token name implied a missing sibling. (C2) C2 · Variant & Property Naming
  • Default frame resized and verified at scale. v2.0: 360×640 → 360×800, with the dim layer tracking the instance exactly at every size — verified across five placements from 640 to 932. (C4) C4 · Native Mappability
  • Container wrapper removed. v2.0: Structure simplified to COMPONENT → dim, one layer deep. (C1) C1 · Layer Structure & Naming
  • Tap-to-dismiss contract settled. v2.1: The behaviour is documented on this page — tap outside dismisses the surface above unless that surface is modal, in which case dismissal requires an explicit action. Layer order is Content → Overlay → Floating surface. (C5 · Docs) C5 · Interaction State Coverage
  • Strength tiers bound to their own tokens. v2.2: Confirmed by the component owner — each tier now resolves through its own semantic token rather than a shared fill with a hand-set opacity, so a theme change is one edit and developers no longer copy three loose alpha values. Not independently verifiable from the assessment tooling, which cannot read variable bindings: the paint still reports as #020E22 at 24/40/56% opacity either way. (C3 · Token) C3 · Token Coverage
  • "Don't Use" label clarified. v2.2: Closed by owner confirmation — the label belongs to the enclosing Figma section, which is a working container for in-progress material, not a directive against the component. The Overlay set at 4465:20631 inside it is current and is what this page documents. (C1) C1 · Layer Structure & Naming
  • Cross-system naming documented. v2.2: Closed — the team keeps Overlay. Other systems name this primitive differently: Scrim (Material 3), Backdrop (Fluent, Polaris), Mask (Ant), Blanket (Atlassian), Underlay (Spectrum). Recorded here so anyone cross-referencing another system finds the equivalent rather than assuming a gap. (Docs) C1 · Layer Structure & Naming
Styles
Strength
DES DEV

A flat translucent fill of the overlay color at one of three strengths. Drop it behind any sheet, dialog, or drawer — switch Strength to match how much the content below should recede.

Activity

Send Money

Choose a recipient from your contacts or enter a mobile number.

Continue
Properties
Strength
Surface
Background
Properties
Name Overlay
Variants 3
Properties Strength
Inner layer dim
Strength strong
Variant node 4465:20634
Surface above sheet
Background tone light
Colors
Scrim #020E228F (56% alpha)
Base color #020E22
Layout
Width (default) 360
Height (default) 800
Resize behavior dim scales with the instance on both axes
Verified at 640 · 761 · 800 · 826 · 932
Corner radius 0
Border None
Padding None
Typography
N/A No text layers
Colors by Strength

Dimming layer placed under modal/sheet surfaces. One row per Strength tier — same base color, different alpha.

Role Token Default
Scrim — Weak bg/color-bg-overlay-weak #020E22 @ 24%
Scrim — Default bg/color-bg-overlay-default #020E22 @ 40%
Scrim — Strong bg/color-bg-overlay-strong #020E22 @ 56%
Property Mapping
Figma PropertySwiftUICompose
Strength = Weak | Default | Strong .ebStrength(.weak | .default | .strong) strength = EBOverlayStrength.Weak | Default | Strong
Frame size (360×800 default) .ignoresSafeArea() — scrim is always full-bleed; the Figma size is canvas presentation only. Modifier.fillMaxSize() — same; no dimension is read off the Figma frame.
(proposed) onDismiss .onTapGesture { onDismiss() } Modifier.clickable { onDismiss() }
Accessibility
RequirementiOSAndroid
Not focusable itself Overlay is decorative. Do not expose it to VoiceOver — focus belongs to the surface above. Use Modifier.clearAndSetSemantics { } on the scrim so TalkBack ignores it.
Modal announcement The sheet/dialog above owns .accessibilityAddTraits(.isModal). The sheet/dialog above owns semantics { paneTitle = "..." } and modal behavior.
Tap-to-dismiss target Full-screen tap area counts as the dismiss hit region — comfortably above the 44×44pt target. Full-screen tap area — comfortably above the 48×48dp target.
Reduce transparency Respect UIAccessibility.isReduceTransparencyEnabled — fall back to an opaque dim color if true. Respect Settings.Global.TRANSITION_ANIMATION_SCALE and high-contrast mode — increase opacity or swap to solid dim.
Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Ready Inner layer named dim — semantic and accurate. The redundant Container wrapper has been removed, leaving COMPONENT → dim.
C2 Variant & Property Naming Ready Single Strength property with a clean three-value enum — Weak · Default · Strong. The -strong token no longer implies a missing sibling.
C3 Token Coverage Needs Refinement All three tiers share base color #020E22 at 24% / 40% / 56%. Per-tier token binding could not be confirmed from the assessment tooling — needs a Dev Mode check that each tier resolves to its own token rather than a manual opacity override.
C4 Native Mappability Ready Maps cleanly to SwiftUI .presentationBackground and Compose Scrim. Ships at a 360×800 default and the dim layer tracks the instance exactly — verified at 640, 761, 826 and 932. A scrim is full-bleed on both platforms, so no dimension is read off the Figma frame.
C5 Interaction State Coverage Needs Refinement Tap-to-dismiss behavior is implicit — should be annotated on the component as a documented contract.
C6 Asset & Icon Quality Not Applicable No assets or icons.
C7 Code Connect Linkability Not Mapped No Code Connect mapping yet. Both prior blockers are cleared — the three variants map 1:1 to a single strength enum parameter.
Variants Inventory (3 total)

3 Strength = 3 variants. Single-axis matrix — same geometry throughout, only the scrim alpha changes.

#NameNodeDimensionsFillNotes
1Strength = Weak4465:20549360 × 800#020E22 @ 24%Lightest tier — content below stays legible.
2Strength = Default4465:20632360 × 800#020E22 @ 40%Standard tier for sheets and dialogs.
3Strength = Strong4465:20634360 × 800#020E22 @ 56%Heaviest tier — carried over from the original single variant. Used by all five in-file placements.
1.1.0 — August 2026Minor
Re-assessment · node 4465:20631 (2026 Working File)
Component rebuilt — moved from Sticker Sheets v2 47:329691 to 2026 Working File 4465:20631. Section is still marked (Don't Use) — not yet published. Documented
Migrated
C2 — Strength variants — Strength = Weak (24%) | Default (40%) | Strong (56%) added, replacing the single 56% variant. Shipped as three tiers rather than the two proposed at baseline. Resolved
C2
C4 — Frame sizing — default resized 360×640 → 360×800; dim tracks the instance exactly, verified at 640 / 761 / 826 / 932 across five placements. Resolved
C4
C1 — Layer structure — redundant Container wrapper removed; structure is now COMPONENT → dim. Resolved
C1
C3 — Token Coverage — downgraded to Needs Refinement pending confirmation that each tier binds its own token rather than a manual opacity override. Open
C3
C5 — Dismiss contract — no annotation found on the component set or any variant. Still open. Open
C5
C7 — Code Connect — still unmapped, but now unblocked: three variants map 1:1 to one strength enum. Open
C7
1.0.0 — April 2026Major
Initial Assessment · node 47:329691
DS Health — Single-variant scrim, token-bound fill. Reusable/Composable flagged Partial due to fixed frame size. Documented
Baseline
C2 — Strength variants — Only strong (56%) exposed, token name implies a standard counterpart. Open
C2
C4 — Fill parent — Current 360×640 frame should be Fill × Fill. Open
C4
C5 — Dismiss contract — Tap-to-dismiss not annotated on the component. Open
C5
C7 — Code Connect — No mapping registered. Open
C7
Naming note — Other DS call this Scrim / Backdrop / Mask / Blanket / Underlay. Team keeps Overlay. Documented for cross-DS reference. Convention
Info