Applying an Ethereal visual direction

You are applying Ethereal to a contemporary art gallery and digital viewing room. Preserve the product’s purpose and information architecture, then create a quiet high-key experience where atmosphere gives a focal work room to breathe and deep ink keeps every piece of information usable.

What Ethereal means here

Ethereal holds the page in pale, low-saturation light. Blush, lilac, pearl, or blue fields move into one another over long distances; the boundary between regions is a tonal drift, not a visible line. Large delicate type floats in the open field, while gallery titles, metadata, and controls stay dark and precise.

The softness belongs to the surface, not to the content. Use blur, translucency, and glow only around the focal artwork where they explain atmosphere. Do not turn every region into a translucent card: a viewing room needs one dominant work, a small index, and enough quiet around both to preserve scale.

Recommendations

• Open with one large exhibition title and one abstract focal work surrounded by visible negative space.
• Keep the overall field bright and use low-saturation gradients that run at least 200px or across the relevant container.
• Pair a thin/light title at 40px or larger with compact, darker metadata that remains easy to read.
• Present at least three distinct works with title, descriptor, and viewing state or medium.
• Use tonal change, whitespace, or a soft mask instead of hard borders between the main regions.
• Keep blur and translucency on the artwork atmosphere, never on essential text or state labels.
• Add one slow, optional drift or glow response; start from a complete still composition and honor reduced motion.
• At narrow widths, stack the artwork and index with breathing room. Increase title weight if the title must become smaller than 40px.

Avoid

• Pale grey copy on a pale field, or controls with no visible state/focus treatment.
• A dark-mode inversion, saturated neon palette, or generic aurora background.
• Glassmorphism-by-default, with blur and transparency on every surface.
• Dense equal cards that make the gallery feel like a dashboard.
• Hard dividers, abrupt gradient edges, and fast entrance animations.
• Invented artist, exhibition, date, or collection claims presented as real provenance.

How to check your own work

Before considering the result finished, ask:

• Is the first viewport remembered as a specific viewing room, not only as “soft”?
• Does the focal work have more air than the supporting index?
• Is the lightest visible copy still dark enough against its actual field?
• Does the still state explain the work without motion?
• Does the narrow composition preserve hierarchy, breathing room, and a readable index?

A working order

1. Establish the light field and deep-ink reading color.
2. Set the exhibition title and the focal work’s negative-space composition.
3. Add one restrained atmospheric layer and the viewing metadata.
4. Build the three-work index with distinct states.
5. Recompose in narrow containers, then verify contrast, focus treatment, motion, and overflow.

Ethereal — Specification

Definition

Ethereal is a high-key interface language for a quiet, immersive viewing experience. Pale low-saturation fields dissolve into one another, translucent atmosphere gives a focal artwork room to breathe, and large delicate type establishes a calm pace. The surface is soft; the information is not: gallery titles, work metadata, and controls use deep ink so the lightness never becomes illegibility.

Core principles

• High-key atmosphere. Light and low saturation define the room before any object appears.
• Dissolved boundaries. Tonal drift and soft masks separate regions instead of visible rules.
• Artwork in negative space. A focal object gets room, scale, and quiet around it.
• Delicacy at a readable scale. Thin display type is reserved for large titles; small metadata remains darker and sturdier.
• Softness on the surface. Blur, translucency, and glow belong to atmosphere, never to essential text.
• Slow looking. Movement is a restrained drift that supports contemplation and has a complete still state.

Visual characteristics

• A bright surface with blush, lilac, blue, or pearl tonal fields and no hard color seams.
• Large, thin or light display type balanced by compact deep-ink metadata.
• One dominant abstract artwork or light form surrounded by generous open space.
• A small gallery index with distinct works, titles, and viewing states.
• Translucent layers, soft masks, and restrained blur used only where they explain atmosphere.
• A slow, gently eased focal motion that is optional rather than required.
• Controls with a clear dark state and a visible focus treatment despite the borderless surface.

Rules

1. High-key room. The viewing room starts in light. Acceptance criterion: The specimen background is predominantly pale and its primary surface colors have high relative luminance; no dark panel occupies the main field.

2. Long atmospheric transitions. Color changes feel continuous. Acceptance criterion: Every primary gradient uses low-saturation stops and spans at least 200px or the full relevant container dimension; no abrupt stop separates gallery regions.

3. Negative-space composition. The artwork is given air. Acceptance criterion: The initial viewport leaves a substantial open field around the focal artwork and the gallery index does not occupy the entire hero.

4. Delicate display, anchored metadata. Typography carries both lightness and proof. Acceptance criterion: The main title is at least 40px at weight 300 or lighter on wide containers; labels and metadata use a darker, readable weight and size.

5. Atmospheric boundaries. Regions dissolve rather than become cards. Acceptance criterion: Primary regions have no visible 1px divider or boxed card edge; tonal fields, masks, or whitespace establish the separation.

6. Focal translucency. Soft effects have a job. Acceptance criterion: Blur, translucency, or glow is limited to the focal artwork and its atmosphere; essential text and metadata remain unblurred and opaque.

7. Gallery index. The room supports looking and choosing. Acceptance criterion: At least three works are presented with distinct titles, a concise descriptor, and a visible viewing state or medium label.

8. Contrast under lightness. Calm never means faint. Acceptance criterion: All visible text meets 4.5:1 contrast against its actual background, and any control state reaches at least 3:1 with a visible focus treatment.

9. Slow optional motion. Drift is a material, not a dependency. Acceptance criterion: Any animation lasts at least 800ms, uses gentle easing, starts from a complete visible state, and is disabled under prefers-reduced-motion.

10. Responsive quiet. Narrow rooms preserve hierarchy. Acceptance criterion: The title, artwork, and work index recompose at the container breakpoint without horizontal overflow, and small-screen title weight increases if its size drops below 40px.

Avoid

• Pale grey copy that disappears into the field.
• A dark mode inversion, saturated neon palette, or generic aurora effect.
• Blur or translucency applied to every surface until the interface becomes glassmorphism.
• Equal card grids that remove the sense of a viewing room.
• Hard borders, abrupt gradient stops, and short attention-grabbing motion.
• Thin typography at small sizes or metadata that is too low-contrast to read.

Acceptance criteria

• Rule 1: The room reads predominantly pale and high-key.
• Rule 2: Primary gradients use low-saturation, long transitions with no hard seam.
• Rule 3: The focal artwork has visible negative space around it.
• Rule 4: The title is delicate at large scale and metadata is anchored.
• Rule 5: Primary regions are separated without visible divider lines or boxes.
• Rule 6: Soft effects are restricted to the focal artwork and remain off essential text.
• Rule 7: Three or more works expose title, descriptor, and state/medium.
• Rule 8: Text reaches 4.5:1 and controls/focus treatment remain findable.
• Rule 9: Motion is slow, optional, and reduced-motion safe.
• Rule 10: Narrow containers preserve hierarchy and avoid horizontal overflow.

Blocking failures

• Gallery copy or control text is pale against the pale field and fails contrast.
• The primary gallery regions are turned into hard-bordered, dense cards that defeat the viewing-room composition.
• Blur makes a title, work label, or state unreadable.
• The artwork or index requires animation to be understood, or animation continues under reduced motion.

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

Responsive adaptation guidance

• Re-evaluate the open field after every container reflow. A stacked narrow layout may cover more area, but it must retain visible breathing room around the focal work.
• Keep the title as the first typographic anchor. If it falls below 40px, increase weight to 400 and preserve deep contrast.
• Let the gallery index move to one column with generous vertical gaps; do not squeeze three works into unreadable slivers.
• Scale the atmosphere with the container so its gradients remain long and edge-free. Remove secondary haze layers before reducing text contrast.
• Check at 200% zoom and with reduced motion: metadata order, control boundaries, and focus visibility must stay intact.