---
schema_version: 1
id: "soft-spatial"
name: "Soft Spatial"
summary: "Soft sculptural volumes, diffuse light and generous depth cues support a single object study and a layered practice overview."
family: "spatial"
tags: ["dimensional", "calm", "product-led"]
best_for: ["products", "portfolio", "services"]
avoid_for: []
density: "sparse"
image_dependency: "low"
motion_level: "subtle"
complexity: "low"
signature: {"composition": "One sculptural object in a lit room dominates A; three indented layers, led by a primary first layer, organize B.", "typography": "Rounded-feeling plain system sans display, open line spacing and small measured object labels.", "navigation": "Visible object/layers links, anchored reading routes and native scope notes.", "content_rhythm": "Large object stage and fine form observations versus alternating layered service volumes and output records.", "imagery": "Original static CSS clay forms with diffuse highlights, recessed openings and grounded contact shadows.", "color_and_material": "Chalk, sage and pale blush material studies against an airy warm background and dark green text.", "interaction": "Real page and section links, visible focus and working native disclosures.", "motion": "Still spatial composition; no perpetual float, camera orbit or required WebGL."}
status: "ready"
prompt_path: prompts/soft-spatial/prompt.en.md
---

# Soft Spatial

## Intent

Soft Spatial introduces an object or a small practice through light, volume and breathing room. The fictional Halvessa studio presents a Pebble ambient-object study, then explains three connected layers of spatial work. The page should feel approachable and tangible without claiming that a digital form is a manufactured product. Its dimensional quality comes from consistent illumination and well placed shadows, not from an expensive rendering engine or a continuous floating animation that competes with reading.

## Signature

Preserve four traits: a large softly rounded volume; diffuse directional highlights; a contact shadow that locates every object in space; and generous clear space between objects and practical copy. Chalk, muted sage and pale blush form a controlled material family. Text remains dark and flat rather than becoming another embossed object. The shallow opening in the Pebble gives its silhouette a recognizable interior. These relationships matter more than copying any particular pastel color or border radius.

## Typography

Use Arial for display and Arial for body copy, both with explicit system fallback stacks. The display voice must remain distinct from captions, navigation and sustained reading. Keep paragraphs near sixty characters per line, let long headings wrap, and preserve useful caption sizes. The reference includes ĄČĘĖĮŠŲŪŽ and lowercase glyphs so the actual installed font can be inspected. There are no remote font requests or bundled font binaries. A new licensed font requires a recorded asset before use.

## Color and surfaces

Semantic tokens define the page, supporting surface, readable foreground, secondary labels, action accent, boundary and focus outline. Reference CSS consumes generated tokens.css; artwork may retain its separately authored material palette. Preserve the contrast relationships when replacing colors rather than copying an arbitrary accent. Do not use muted type for essential instructions if it becomes difficult to read. A successful token ratio is only one part of checking the rendered interface and every actual text background.

## Layout A

Open with a visible practice name and a compact navigation. A short invitation sits left of the first stage, where one large Pebble stands in a small room. A window lights it from the left, a floor line grounds it, and its shadow falls to the right. The caption names the window as the light source. Three restrained notes then describe what the object does in that light, not only its mood. Two enlarged material samples follow, with scope information and a native disclosure. This is a focused object presentation, not a general catalogue or a row of interchangeable product cards.

## Layout B

Start with a broad typographic introduction and an anchored route through the practice. Three layers step down the page as an indented staircase. The first layer, Atmosphere, is primary: its vignette is the largest and its heading the strongest, because the light it sets governs the other two. Arrangement and Detail follow, each indented further. Arrangement uses raised volumes and Detail a recessed rounded surface, and every layer ends with a definition-list output. A generous closing statement and notes follow. This sequential explanation differs from A’s singular hero object and close observations.

## Imagery

All geometry is original code-authored CSS artwork. The Pebble sits in a small room with a window glow, a floor line and an offset contact shadow; its shell is elliptical with a recessed opening. The practice layers use discs, platforms and rounded blocks under the same light direction. Decorative artwork is hidden from assistive reading and paired with meaningful adjacent prose. No external model, photograph, font or texture is loaded, so the asset registry is empty. Never substitute a grey missing-image frame or describe these illustrative surfaces as verified real materials.

## Navigation and interaction

Literal navigation connects the object presentation, the separate layers page and practical notes. Pill-shaped links have actual section or page destinations; they are not simulated booking buttons. Native disclosures open scope and form information with normal keyboard behavior. Keep the link text visible and give focus enough separation from decorative shadows. Reading does not require a drag, a hover-only label or an orbit control. The atmosphere, arrangement and detail sequence remains ordinary document content.

## Motion

Content is present immediately. Short state transitions are allowed when they explain an operable control; essential copy never waits for a reveal. The reduced-motion media query removes nonessential animation, transitions and smooth scrolling. If an adaptation introduces movement, keep a useful static composition, avoid autoplay distractions and give visitors control over any sustained activity. A decorative motion effect must not turn the page into a different design direction or hide its navigation.

## Responsive behavior

At 1440 pixels allow the object to occupy a broad open stage, with its shadow fully inside the frame. Service layers use side-by-side visual and text areas. At 768 reduce the outer space and heading size before reducing the visual to a token thumbnail. At 360 stack the object after its introduction, retain the whole shell and contact shadow, then place each service explanation after its visual. Decorative shapes stay bounded and all body copy remains readable without horizontal panning.

## Accessibility

Use one main landmark, one descriptive h1, ordered headings, visible keyboard focus and a skip link. Links navigate and buttons change state; native disclosures expose real information. Provide informative alternatives for meaningful images, while purely ornamental geometry stays out of the reading order. Check actual loading, contrast, focus, control coverage and horizontal overflow at 360, 768 and 1440 pixels. The accompanying task evidence records what was executed; these bounded checks are not a full WCAG certification or a guarantee for adapted content.

## Adaptation

Choose a small number of coherent volumes and establish one lighting direction before writing decorative gradients. Keep the object’s scale large enough to explain the form, and label the work honestly as an illustration or a real product. A production practice can replace the fictional layers with verified services and actual enquiry destinations. The same HTML structure works in another stack without WebGL. Retain flat readable controls and modest practical labels while changing the brand or material palette.

## Avoid

1. Do not turn depth into perpetual floating, spinning objects or scroll-driven camera travel. 2. Do not emboss every text label or reduce contrast to make the interface look soft. 3. Do not replace the object/layer distinction with repeated rounded dashboard cards or imply real product specifications.

## Closest styles

Quiet Luxury is the nearest available object-led neighbor. Its illustrated furniture sits in broad rectangular display stages with restrained serif headings and terse edition dossiers. Soft Spatial builds its identity from rounded clay-like volumes, diffuse depth and recessed forms, using plain sans display and a sequential atmosphere-to-detail service explanation. Navigation moves between object study and practice layers rather than collection and edition. The larger material vignettes and staggered service rhythm establish differences in composition, navigation and content rhythm beyond palette.