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.Copy
+---------------------------------------------------------------------------------+
| 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).Copy
+---------------------------------------------------------------------------------+
| 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.Copy
+---------------------------------------------------------------------------------+
| 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
Copy
+---------------------------------------------------------------------------------+
| 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.Copy
+---------------------------------------------------------------------------------+
| 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
Copy
+---------------------------------------------------------------------------------+
| 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.Copy
+---------------------------------------------------------------------------------+
| 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.Copy
+---------------------------------------------------------------------------------+
| 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
Copy
+---------------------------------------------------------------------------------+
| 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