Tokens Semânticos

12-step graduated opacity scale for composable blue accent usage. Click any swatch to copy its CSS variable. Hover to see the usage context.

/* Blue Accent Opacity Ladder */
--blue-02: rgba(74, 144, 255, 0.02);  /* hover tint     */
--blue-04: rgba(74, 144, 255, 0.04);  /* ambient pools   */
--blue-06: rgba(74, 144, 255, 0.06);  /* section glow    */
--blue-08: rgba(74, 144, 255, 0.08);  /* subtle glow     */
--blue-10: rgba(74, 144, 255, 0.10);  /* badge bg        */
--blue-12: rgba(74, 144, 255, 0.12);  /* blue glow       */
--blue-15: rgba(74, 144, 255, 0.15);  /* card hover      */
--blue-20: rgba(74, 144, 255, 0.20);  /* badge border    */
--blue-30: rgba(74, 144, 255, 0.30);  /* border accent   */
--blue-40: rgba(74, 144, 255, 0.40);  /* focus ring      */
--blue-50: rgba(74, 144, 255, 0.50);  /* rotating border */
--blue-80: rgba(74, 144, 255, 0.80);  /* near-solid      */

Signal colors for form validation, status indicators, and user feedback. These are the only non-blue, non-white colors in the system. Each signal has 3 tokens: foreground, background, and border. The live alerts below use the actual tokens.

Text hierarchy through opacity of white. Never use raw hex grays. Each level renders live below at its actual opacity.

Borders use white at varying opacities. Hover each box to see the border more prominently.

Shadows are used sparingly. On dark backgrounds, elevation comes from surface layering. Shadows are reserved for floating elements. Hover each card to see the shadow in context.

/* Shadow System */
--shadow-subtle:    0 1px 2px rgba(0,0,0,0.3);
--shadow-default:   0 4px 16px rgba(0,0,0,0.25);
--shadow-elevated:  0 8px 30px rgba(0,0,0,0.4);
--shadow-dramatic:  0 16px 70px rgba(0,0,0,0.5);
--shadow-blue-glow: 0 0 50px rgba(74,144,255,0.12);

Tokens for focus indicators, text selection, and hover tints. These ensure consistent interactive behavior across all components.

Named gradient tokens for ambient effects, border accents, surface transitions, and utility patterns. Gradients are blue-tinted or surface-relative, never multi-color.

5 custom easing curves, each engineered for specific interaction types. Click each demo to replay the animation and see the bezier curve visualization. No default CSS ease or linear.

7 duration tiers, each roughly 1.5-2x the previous. Click to replay. The bar fills over the exact duration with a gradient fill.

8-layer z-index scale. Never use arbitrary z-index values. The bars are proportionally stacked to visualize the layer hierarchy. Higher layers are closer to the viewer.