Norbielink is a mostly flat interface. Elevation comes from three places: Tailwind's
shadow scale applied by class, a short list of bespoke shadows for specific floating surfaces, and a brand-tinted
glow reserved for primary actions. The DS previously published an invented four-step ramp
(.08 / .12 / .18 / .24) that appears nowhere in the product.
Scale
Applied by class. Usage counts in the shipped bundle: shadow-2xl ×37,
shadow-lg ×36, shadow-xl ×32, shadow-sm ×7, shadow-md ×1.
shadow-sm
0 1px 2px 0 rgba(0,0,0,0.05)
Switch thumb
shadow-md
0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)
Rare — one use
shadow-lg
0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)
Menus, dropdowns, context menus
shadow-xl
0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)
Large popovers
shadow-2xl
0 25px 50px -12px rgba(0,0,0,0.25)
Modals and confirm dialogs
Bespoke surfaces
Written inline because each one is tuned to its surface. Note that several use
rgba(15,23,42,…) — a slate tint rather than pure black.
Segmented active
0 1px 2px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.04)
The raised pill in a segmented control
Toast — card
0 12px 30px rgba(0,0,0,0.12)
The auth / notification toast
Toast — profile
0 4px 16px rgba(0,0,0,0.10)
The lighter in-app toast
Toast — pill
0 8px 24px rgba(15,23,42,0.18)
The inverted single-line toast
Panel
0 8px 24px rgba(0,0,0,0.12)
Floating panels — the most-used bespoke shadow
Drawer
-8px 0 30px rgba(0,0,0,0.12)
Side drawer — the only horizontal shadow
Deep overlay
0 20px 50px rgba(0,0,0,0.20)
Full-screen overlays
Brand glow
Reserved for primary actions. It is conditional: a toolbar primary
sits flat, a confirming primary in a dialog or wizard glows, and a disabled primary always drops to
none.
Primary glow
0 4px 14px rgba(166,20,195,0.25)
Confirming primaries in dialogs and toolbars
Primary glow — small
0 2px 10px rgba(166,20,195,0.25)
Wizard Continue buttons
Focus ring
0 0 8px rgba(166,20,195,0.40)
Focused control
