Ethereal

Applying an Ethereal visual direction

You are being asked to apply an Ethereal visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.

What “Ethereal” means here

Ethereal holds an interface in high, even light. Pale gradients wash across the surface with no visible edge where one begins and another ends. Regions separate through gradual tonal change rather than through lines or containers. Type is thin and large, floating in space rather than sitting in a block. Most of the page is empty. Motion, where it exists, is slow enough to feel like drift.

The intended feeling is calm and weightlessness — the sense that nothing is demanding anything. It suits work about rest, care, craft, or luxury, and it is actively wrong for anything urgent or dense.

The tension to manage is that everything characteristic of this direction pushes contrast down. High-key color, thin strokes, and diffuse edges each reduce the difference between text and its background, and together they reduce it a lot. The resolution is not to compromise the look but to be deliberate: the palette can stay pale as long as the text does not, and a thin face at a large size can still be perfectly legible if its color is dark enough. Softness is a property of the surface, not of the text sitting on it.

Recommendations

• Keep the overall surface bright. The page should read as high-key, with most of its area well up the luminance range.
• Build gradients from low-saturation stops and let them transition over long distances — a couple of hundred pixels at least — so no band or edge is visible anywhere in the blend.
• Leave most of the page empty. Around a third of the initial screen covered is the target, and less is usually better.
• Set headlines thin and large. A light weight at a generous size reads as delicate; the same weight at a small size just reads as faint.
• Separate regions with tonal shifts, not lines. A gradient that gradually becomes another color does the work a divider would do elsewhere, without the hard edge.
• Keep motion slow. If anything animates, give it a long duration and gentle easing, and honor reduced-motion preferences.
• Choose text and control colors dark enough to pass on the pale ground. This does not compromise the direction — a deep ink on a blush field is entirely consistent with it, and a pale grey on the same field is simply unreadable.

Avoid

• Hard lines, borders, or containers with visible edges.
• Saturated color, which breaks the high-key register immediately.
• Thin type at small sizes, where delicacy becomes faintness.
• Short, snappy animation, which contradicts the drift.
• Pale grey text on a pale background, the failure this style is most prone to.
• Dense content, which the composition cannot hold without abandoning the emptiness that defines it.

How to check your own work

Before considering the result finished, look at it and ask:

• Is there a visible edge anywhere in a gradient? Lengthen the transition until it disappears.
• How much of the first screen is covered? If it is more than half, the emptiness is not doing its work.
• Take the lightest text on the page and measure it. If it fails, darken the text — not the background, which would cost you the whole look.
• Is the thin type actually large? Thin at a small size is the most common way this direction becomes unreadable.
• Turn on reduced motion. Does anything still animate? It should not.

Ethereal — Specification

Definition

Ethereal is a web-interface design style that holds the surface in high, even light: pale low-saturation gradients transition without visible edges, regions separate through tonal shift rather than through lines, type is thin and large, most of the page is empty, and motion is slow. Its register is calm and weightless. Because every characteristic property reduces contrast, the style requires that text and control colors be chosen deliberately dark against the pale ground.

Core principles

• High-key throughout. The surface sits well up the luminance range.
• Boundaries dissolve. Separation is tonal and gradual, never a line.
• Delicacy needs size. Thin type is legible when large and faint when small.
• Emptiness is the composition. Most of the surface carries nothing.
• Softness belongs to the surface, not the text. The pale ground never justifies pale text.

Visual characteristics

• A bright overall surface with high average luminance.
• Low-saturation gradients transitioning over long distances with no visible banding.
• Regions separated by gradual tonal change rather than borders.
• Large headlines at light weights.
• Large uncovered areas across the initial viewport.
• Slow, gently eased motion where motion exists at all.

Rules

1. High-key surface. The page is bright overall. Acceptance criterion: The mean relative luminance of the rendered page is 0.8 or greater.

2. Soft desaturated gradients. Blends have no visible edge. Acceptance criterion: Gradient stops measure 30% saturation or less and each transition spans at least 200px.

3. Emptiness dominates. The composition is mostly open. Acceptance criterion: Rendered content covers 35% or less of the initial viewport area.

4. Thin type at scale. Delicacy is carried by size. Acceptance criterion: Headline elements compute a font-weight of 300 or less at a rendered size of 40px or greater.

5. Diffuse boundaries. Regions are not drawn. Acceptance criterion: Separation between regions is produced by a gradient transition or soft mask; no 1px border divides primary regions.

6. Slow motion or none. Movement reads as drift. Acceptance criterion: Any animation has a duration of 800ms or greater with gentle easing, and is suppressed under prefers-reduced-motion.

7. Delicacy costs no contrast. Legibility is unaffected by the register. Acceptance criterion: Despite Rules 1 and 4, all text measures at least 4.5:1 and all controls at least 3:1 against their background.

Avoid

• Hard lines, borders, or containers with visible edges.
• Saturated color, which breaks the high-key register.
• Thin type at small sizes.
• Short, snappy animation.
• Pale grey text on a pale background.
• Dense content, which the composition cannot hold.

Acceptance criteria

• Rule 1: Mean page luminance is 0.8 or greater.
• Rule 2: Gradient stops are 30% saturation or less, transitioning over 200px or more.
• Rule 3: Content covers 35% or less of the initial viewport.
• Rule 4: Headlines are weight 300 or less at 40px or larger.
• Rule 5: No 1px border separates primary regions.
• Rule 6: Animations run 800ms or longer and respect reduced-motion.
• Rule 7: All text meets 4.5:1 and all controls 3:1.

Blocking failures

• Text is rendered in a pale color on the pale ground and falls below 4.5:1. This is the characteristic failure of the style, and it is never necessary: a deep ink on a blush field is fully consistent with the direction.
• A control has no boundary or focus indicator reaching 3:1, since the absence of borders required by Rule 5 removes the fallback that would otherwise make it findable.
• Animation continues under prefers-reduced-motion, which in a style built on slow drifting movement affects a large proportion of the interface rather than an isolated element.

These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.

Responsive adaptation guidance

• Coverage (Rule 3) is evaluated per breakpoint; at narrow widths the target may rise to 55% as content stacks vertically, since a short viewport cannot hold the same proportion of open space.
• Headline size (Rule 4) may fall below 40px at narrow viewports only if the weight increases to 400 in compensation, since thin strokes at small sizes are where legibility degrades fastest.
• Gradient transition length (Rule 2) scales with the viewport rather than staying fixed, otherwise a 200px blend that reads as seamless on a wide screen becomes a visible band on a narrow one.
• Rules 5, 6, and 7 hold unchanged at every breakpoint, and Rule 7 is re-verified at 200% zoom.