← All foundations
Spacing · card 3 of 3

Elevation — the light comes from below

CODECAVE has no conventional drop shadow. Section panels cast violet light upward: the source sits under the panel edge. It is physically wrong and instantly recognizable, and it is the single most important thing not to normalise.

--shadow-section — all three offsets negative on Y

Three stacked layers seeded from --color-shadow-0 (#281470) at 20%, 10% and 8% alpha. Inspect the space above the panel: that is where the violet has to appear.

correct — light emitted upward from beneath the edge 
--shadow-section:
  0 -64px 64px 0 hsl(from #281470 h s l / 0.20),
  0 -10px 24px 0 hsl(from #281470 h s l / 0.10),
  0  -6px  6px 0 hsl(from #281470 h s l / 0.08);

The one substitution that breaks the brand

Same panel, same radius, conventional downward shadow. Everything recognizable is gone. This is anti-pattern #1 in DESIGN.md for a reason.

off-system — positive Y offset, neutral black

--shadow-glow-button — the CTA halo

Three concentric violet rings at 64px, 16px and 4px spread, all with zero offset. Source: source_examples/common/GlowButton.vue. Hover and press the control — it brightens and scales to 0.98, and the foreground never dims.

Get a free consultation

Input halos — focus and error

Focus draws a violet halo instead of an outline; error swaps it to the red ramp. Click into the first field to see the real focus state, not a mock-up of one.

--shadow-input-focus · #5F20FE at 50% / 60%
Enter a valid work email address.
--shadow-input-error · #FE2020 / #FE9A9A

Cards get no shadow at all. Only section panels glow, and only upward. A card separates from the page with 24px of radius and a 1px #2B2848 border — that is the whole mechanism.