Foundations / Shadows and effects

Shadows and effects

Two soft shadows, a blur for the navigation bar and an overlay for photos. No inner, hard or colored shadows.

Version 1.4 · Oct 20, 2026

Shadows

Three levels: flat, small shadow (shadow-sm) and medium shadow (shadow-md).

Flat
Border only (border-default), no shadow

Cards, tables and notes.

shadow-sm
Offset 1 px · blur 2 px · #0000001A

Buttons and small elements.

shadow-md
Offset 4 px · blur 12 px · #0F1E320D

Floating cards and menus.

Blur and overlay

Navigation
blur-nav
Background blur: 40

Navigation bar fixed over the content, with an 80% white background (opacity-80).

Case study
gradient-overlay-photo
Transparent black → black at 50%

Top-to-bottom overlay to put white text on a photo. Check the contrast where the text goes.

What to do and what to avoid

✓
Do this

A soft shadow (shadow-md) to separate a layer from the background.

✕
Avoid this

Hard, colored or inner shadows.

Related pages

Basics

Borders

Flat surfaces with a border.

See page
Application

Imagery

Opacities and overlay on photos.

See page
Basics

Rounded corners

Shape of cards.

See page