Immersive

Immersive is a playful, exhibit-like style that turns a product page into a continuous interactive stage. A single deep-green canvas runs unbroken behind everything, while bold white cards with thick black borders and hard offset shadows float on top like cut-out props. Skewed buttons, oversized expressive type, and motion-driven storytelling give it the energy of a walk-through experience rather than a static page. Reach for Immersive when you want to guide visitors through a narrative or tour and make each scroll feel like stepping into the next room of an exhibit.

Design principles

• One continuous canvas: the deep-green background never breaks, creating a single immersive space.
• White cards act as graphic cut-outs, separated by thick black borders and hard offset shadows.
• Depth is graphic, not realistic: shadows are solid black with no blur.
• Skew and slight rotation give elements playful, hand-placed energy.
• Motion carries the story: elements reveal, slide, and react as the visitor scrolls.
• Bold, expressive typography sets a confident, exhibition-poster tone.

Color

The whole experience sits on a deep forest green (#0F3D2E) that runs edge-to-edge as a continuous stage. Floating surfaces are pure white (#FFFFFF) so cards pop sharply against the green. The primary accent is a bright lemon yellow (#FFE14D) for key actions and highlights; the secondary is a warm coral (#FF6B4A) for energy and contrast. All borders and primary text are near-black (#111111), giving every card a bold cut-out outline. Muted text on green uses a soft sage (#5C7A6E). Use yellow and coral as spotlight colors, never as backgrounds for large text regions. In dark mode, deepen the canvas to #0A2A20, keep cards white or shift to a very dark panel (#15201B) with white text and borders, and slightly soften accents (yellow to #F2D544) to control glare.

Typography

Headings use an expressive display family (Clash Display or Space Grotesk) at weights 600 to 700, oversized, with tight tracking (-0.02em) for poster-like impact. Body is Space Grotesk at 16px with 1.6 line-height. Labels, counters, and step markers use a monospace (Space Mono) in uppercase with +0.06em tracking for a gamified, instrumented feel. The scale is bold at a 1.414 ratio (16, 23, 32, 45, 64) so display headlines dominate each scene. Headlines can sit at slight angles to match the skewed motif.