The Transparency Flow Concept
Transparency Flow derives semi-transparent versions of Core Colors. Unlike traditional opacity approaches, Transparency Flow maintains perceptual color accuracy through OKLAB color space.āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā TRANSPARENCY FLOW ARCHITECTURE ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā CORE COLOR (100% Opacity) ā
ā āāāāāāāāāāāāāāāāāāāāāāāāā ā
ā #################################################### ā
ā ā ā
ā ā Mix with transparent at various levels ā
ā v ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā TRANSPARENCY SPECTRUM ā ā
ā ā ā ā
ā ā 100% 80% 60% 40% 20% 10% 5% 0% ā ā
ā ā #### #### ..## ...# .... .... .... .... ā ā
ā ā ā ā
ā ā solid subtle medium light very almost trace fully ā ā
ā ā color tint fill wash light gone hint transparentā ā
ā ā ā ā
ā ā Badge Status Hover Select Subtle Focus Glow None ā ā
ā ā Label BG State BG Tint Ring Effect ā ā
ā ā ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
The Standard Muted Pattern: 80% Transparent
The standard muted level across Gestalt is 80% transparent (20% visible).āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā TRANSPARENCY LEVELS AND USE CASES ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā TRANSPARENCY VISIBLE VISUAL USE CASE ā
ā āāāāāāāāāāāā āāāāāāā āāāāāā āāāāāāāā ā
ā ā
ā 80% 20% ....####............ Badge backgrounds ā
ā Selection highlights ā
ā ā
ā 70% 30% ....######.......... Heavy shadows ā
ā Scrims ā
ā ā
ā 50% 50% ....##########...... Focus rings ā
ā Overlays ā
ā ā
ā 30% 70% ....##############.. Strong tints ā
ā ā
ā 0% 100% #################### Solid color (Core) ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
Light Overlay System
Light overlays create subtle hover and selection states on dark backgrounds.āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā LIGHT OVERLAY OPACITY PROGRESSION ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā LEVEL TRANSPARENT OPACITY VISUAL ā
ā āāāāā āāāāāāāāāāā āāāāāāā āāāāāā ā
ā ā
ā Light-1 92% 8% .................... ā
ā Barely visible ā
ā ā
ā Light-2 88% 12% #................... ā
ā Subtle hint ā
ā ā
ā Light-3 84% 16% ##.................. ā
ā Noticeable tint ā
ā ā
ā Light-4 80% 20% ###................. ā
ā Clear overlay ā
ā ā
ā Progression Pattern: +4% opacity per step ā
ā Base value: 8% -> 12% -> 16% -> 20% ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
Usage Pattern
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā LIGHT OVERLAY USAGE ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā NORMAL STATE ā
ā Background: transparent (0%) ā
ā ................................................................ ā
ā ā
ā HOVER STATE ā
ā Background: overlay-light-1 (8%) ā
ā #............................................................... ā
ā ā
ā FOCUS STATE ā
ā Background: overlay-light-2 (12%) ā
ā ##.............................................................. ā
ā ā
ā SELECTED STATE ā
ā Background: overlay-light-3 (16%) ā
ā ###............................................................. ā
ā ā
ā ACTIVE/PRESSED STATE ā
ā Background: overlay-light-4 (20%) ā
ā ####............................................................ ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
Dark Overlay System
Dark overlays create shadows, scrims, and dimming effects.āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā DARK OVERLAY OPACITY PROGRESSION ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā LEVEL TRANSPARENT OPACITY VISUAL ā
ā āāāāā āāāāāāāāāāā āāāāāāā āāāāāā ā
ā ā
ā Dark-1 95% 5% .................... ā
ā Very subtle shadow ā
ā ā
ā Dark-2 90% 10% ##.................. ā
ā Light shadow ā
ā ā
ā Dark-3 80% 20% ####................ ā
ā Medium shadow ā
ā ā
ā Dark-4 70% 30% ######.............. ā
ā Heavy shadow ā
ā ā
ā Progression Pattern: Accelerating (+5, +10, +10) ā
ā Base value: 5% -> 10% -> 20% -> 30% ā
ā ā
ā NOTE: Dark overlays use larger jumps because visual perception ā
ā of darkness requires more contrast to notice differences. ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
Light vs Dark Overlay Comparison
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā LIGHT VS DARK OVERLAY COMPARISON ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā LIGHT OVERLAYS DARK OVERLAYS ā
ā āāāāāāāāāāāāāā āāāāāāāāāāāāā ā
ā ā
ā Source: Theme text color Source: Black ā
ā (Adapts to theme) (Fixed, universal) ā
ā ā
ā Opacity steps: 8, 12, 16, 20% Opacity steps: 5, 10, 20, 30% ā
ā (Linear +4% progression) (Accelerating progression) ā
ā ā
ā Use case: Use case: ā
ā * Hover states on dark BG * Shadows ā
ā * Selection highlights * Scrims/backdrops ā
ā * Active indicators * Disabled overlays ā
ā * Focus rings * Modal backgrounds ā
ā ā
ā Appearance: Appearance: ā
ā Lightens the background Darkens the background ā
ā (white tint on dark theme) (universal darkening) ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
Status Badge Transparency
Each status semantic uses the same 80% transparent pattern for consistency.āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā STATUS BADGE ARCHITECTURE ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā BADGE STRUCTURE: ā
ā ā
ā āāāāāāāāāāāāāāāāāāāāāā ā
ā ā [*] Running ā <ā Status Badge ā
ā āāāāāāāāāāāāāāāāāāāāāā ā
ā ā ā ā
ā ā āāā Text: 100% Core (fully saturated) ā
ā ā ā
ā āāā Icon: 100% Core (fully saturated) ā
ā ā
ā Background: 20% visible (80% transparent) ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā ALL STATUS TYPES USE SAME TRANSPARENCY: ā
ā ā
ā SUCCESS WARNING DANGER INFO ā
ā ....##.. ....##.. ....##.. ....##.. ā
ā Green 20% Yellow 20% Red 20% Blue 20% ā
ā ā
ā CONSISTENCY: All status backgrounds use exactly 80% transparent ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
Theme-Specific Transparency
Light themes require different overlay values.āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā THEME-SPECIFIC TRANSPARENCY ADJUSTMENTS ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā DARK THEME LIGHT THEME ā
ā āāāāāāāāāā āāāāāāāāāāā ā
ā ā
ā Light overlays use theme text color Light overlays use BLACK ā
ā (bright on dark = visible) (dark on light = visible) ā
ā ā
ā Level Opacity Level Opacity ā
ā āāāāā āāāāāāā āāāāā āāāāāāā ā
ā Light-1 8% Light-1 3% ā
ā Light-2 12% Light-2 5% ā
ā Light-3 16% Light-3 8% ā
ā Light-4 20% Light-4 12% ā
ā ā
ā WHY LESS OPACITY IN LIGHT THEME? ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā
ā Dark-on-light is more visible than light-on-dark ā
ā Light theme needs LESS overlay to achieve same visual effect ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
Summary: Transparency Pattern Reference
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā TRANSPARENCY PATTERN REFERENCE ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā PATTERN TRANSPARENT OPACITY PRIMARY USE ā
ā āāāāāāā āāāāāāāāāāā āāāāāāā āāāāāāāāāāā ā
ā ā
ā Muted colors 80% 20% Badge backgrounds ā
ā Selection ā
ā ā
ā Overlay light-1 92% 8% Subtle hover ā
ā Overlay light-2 88% 12% Standard hover ā
ā Overlay light-3 84% 16% Emphasized hover ā
ā Overlay light-4 80% 20% Active states ā
ā ā
ā Overlay dark-1 95% 5% Very subtle shadows ā
ā Overlay dark-2 90% 10% Light shadows ā
ā Overlay dark-3 80% 20% Medium shadows ā
ā Overlay dark-4 70% 30% Heavy shadows/scrims ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
Shadow and Overlay
Learn about depth, elevation, and modal backdrops