VendHub Design System

Opacity Scale

9 semantic opacity tokens for disabled states, hover overlays, press feedback, and background scrims.

9 Tokens — Click to Inspect

Each token maps to a specific UI state. Click any swatch to see its role and usage context.

State Patterns

How opacity tokens apply to real UI components — disabled buttons, overlays, placeholders, and pressed states.

Disabled state · opacity-38
Pressed state · opacity-90
Placeholder · opacity-75
Modal overlay · opacity-50
Modal backdrop at 50%