Light & Shadow

How does light create depth on a flat screen?

A screen is flat — physically, there is no depth. Yet we perceive cards floating above backgrounds, buttons raised above surfaces, text hovering over color. This illusion is created entirely by light and shadow.

Material Design formalized this: every surface has an 'elevation' measured in dp. Higher surfaces cast larger shadows. The shadow tells your eye: this is closer to you. Lower surfaces have smaller shadows: this is further away.

Neomorphism takes a different approach: dual shadows (light on one side, dark on the other) create the illusion of surfaces pushed out of or pressed into a single material. No floating — only extrusion.

Web Brutalism rejects the illusion entirely: no shadows, no depth. The page is a document, not a space. Flatness is honesty.

What is a vignette and why do some styles use it?

A vignette is a gradual darkening (or warming) at the edges of the viewport. It focuses attention toward the center by making the periphery less visible — like a spotlight in a theater.

Art Deco uses a dramatic vignette — deep black at the edges, creating a theatrical spotlight. The page is not a document; it is a stage.

Victorian uses a warm amber vignette — like firelight in a paneled room. The edges darken with warmth, creating intimacy and enclosure.

Art Nouveau uses the gentlest vignette — barely perceptible warming. It creates atmosphere without drama.

Bauhaus, Swiss International, and Web Brutalism use no vignette — the page is evenly lit. This is itself a statement: refusing atmosphere is choosing clarity.

How do shadows communicate interactivity?

In digital design, shadow often means 'this element can be interacted with.' A button with a shadow appears raised — and raised things can be pressed. Remove the shadow and the button flattens into the page, losing its affordance.

Material Design uses shadow as a strict system: elevation levels communicate what an element does. A FAB (floating action button) at 6dp is the primary action. A card at 1dp is passive content. The shadow is not decorative — it is semantic.

Memphis uses hard offset shadows (4px 4px 0) — not realistic depth but graphic depth. The shadow says 'this is separate from its background' without pretending to be physically real.

Nordic Minimal uses barely-there shadows (1px blur) — the lightest possible depth. Cards float by a whisper, not a shout.

What is the relationship between light direction and consistency?

Shadows imply a light source. If all shadows point the same direction, the brain reads a single consistent light — and the illusion holds. If shadows point different directions, the illusion breaks and the design feels wrong.

Material Design specifies a single key light at the top of the screen, casting shadows downward and slightly right. Every element on every screen follows this rule. The consistency is what makes the system feel physical.

Neomorphism uses the same principle more strictly: all light shadows top-left, all dark shadows bottom-right. One inconsistent shadow destroys the entire 'single material' illusion.

The lesson: if you use shadows, commit to a direction. If one element breaks the rule, every other element becomes suspect.

How does color temperature create the feeling of light?

Light has temperature. Sunlight is warm (yellow). Moonlight is cool (blue). Firelight is very warm (amber). The background color of a design can simulate these light conditions without any shadow at all.

Victorian's dark mahogany palette simulates gaslight — warm, amber, enclosed. You feel like you're in a room lit by flame.

Nordic Minimal's off-white palette simulates daylight through a large window — neutral, even, democratic. Every element receives the same light.

Glassmorphism's dark blue-purple palette simulates screen glow — artificial, cool, technological. The interface is the light source.

You don't need a vignette or shadow to create light. The color of the page itself can be the light.