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