Page study / Otherworldly
Otherworldly — neutral composition
The local Figma handover translated into default Artist compositions, not its bespoke CSS or obsolete offers.
Source: local Otherworldly Figma handover. Historical pricing and FAQ copy are not adopted.
Working layout preview
Default Artist typography, spacing and components. Gray blocks mark image areas; copy is abbreviated for layout review. This is a structural interpretation, not a replica or replacement of the source site. Gaps are labeled below and inside the preview.
The iframe has a real viewport: responsive rules and sticky behavior run inside it. Wider presets can be panned horizontally in the preview area.
Section-by-section coverage
Covered = existing component composition. Partial = layout exists, but some behavior does not. Gap = useful missing capability. Art direction = site-specific treatment. A simplified preview does not count as full coverage.
| Section | Artist structure | Coverage | Decision |
|---|---|---|---|
| Your brand should be out of this world | Exhibit → full-width Heading + Columns → lede / illustrated CTA | Art direction | Shared-canvas layered artwork is supported. Exact cinematic navigation and the angled consultation teaser are application/site treatments. Keep one scene, not duplicate backgrounds. |
| What clients say | Track → Card → Testimonial | Covered | Existing manual Track fits; use testimonial markup for real quotes. The source has no requirement to invent automatic movement. |
| Why marketing feels harder these days | Group.Exhibit → Artwork + Columns → Content / Content | Covered | Existing Exhibit and text Columns; typography comes from the site theme, not absolute source coordinates. |
| Be the show, not the commercial break | Exhibit + Columns | Covered | Same reusable composition, different artwork and copy. |
| Make marketing part of the fun | Exhibit + layered Artwork + Columns | Art direction | The Pringles scene is artwork-specific; the layout needs no new component. |
| The future of how we consume online | Exhibit + Columns | Covered | Reuse the same pattern rather than naming a new class after this section. |
| The full buyer journey | Exhibit + Columns | Covered | Continuous panels need explicit corner/spacing theme rules; do not assign rounding independently to every panel. |
| Works for brands like yours | Selector → Figure + exclusive Accordion | Covered | Selecting an item opens its explanation and crossfades its paired Figure. Keyboard activation, reduced motion and native no-JS disclosures are supported. |
| Service options — layout only | Grid.Grid-3 → Card → Header + Content + Checklist + Tooltip | Covered | Separate header/body surfaces, compact status markers and accessible tooltips are implemented. Values here are illustrative; billing rules remain application data. |
| Talk through your options | Grid.Grid-2 → Card.Is-Horizontal.Is-Reversed | Covered | Link to the existing consultation application; its state machine does not belong in the CSS framework. |
| Frequently asked questions | Accordion | Covered | Reuses the shared animated Accordion. Source workshop-related answers are intentionally not copied. |
| Your brand should be out of this world | Exhibit repeated as closing CTA | Covered | Same composition as the opening, using H2 here rather than a second H1. |
Recipe & implementation
Recipe: _data/artist_compositions.yml, entry otherworldly. Section renderer: _includes/artist/composition-section.html. Layouts use artist.css; preview-only placeholder and annotation styling is in code-compositions.css.