Surfaces/Experience/Media

ExperienceSurface layer

MediaSurface

Media

Media gallery with lightbox and metadataExperience surfaces should feel product-ready, branded, and emotionally coherent at first glance.

SummarySurface-owned framing, app-owned wiring, and runtime switching stay cleanly separated here.

Classic

Modern

1 structure + 1 pattern

Live preview

The real MediaSurface recipe rendered with representative, domain-free mock data. Compare layout rhythm and section cadence across engines; the app still owns data, permissions, and routing.

classicmodernrustic

Engine comparisonSurface render checkEach engine renders the same page recipe with the same active brand. Judge layout rhythm, chrome placement, and section cadence rather than the wrapper.

Rottay3 live enginesSame tenant, isolated engine

Live provider

Composition

Recipe map and contract boundary

1 structure + 1 pattern

Surfaces are page recipes: structures hold the frame, patterns carry reusable tasks, and the app provides domain state, permissions, and routing.

Structures

Page-level scaffolding

Patterns

Pattern-specific widgets

Boundary flow

Route and permissions gate access before the surface renders.

Surface config defines layout, actions, and data hooks for the page recipe.

Structures establish the page chrome and stable navigation frame.

Patterns fill the work area while product-owned logic stays outside the DS contract.

API and code

Import and usage contract

Media

Audit focus

brand fitnarrative claritycall-to-action priority

Layer fit

Primitives

Patterns

Structures

Surfaces

ImportPublished package entrypoint, ready to copy.

tsx

1 line

Consumption

Runtime-aware snippet

import { MediaSurface } from '@rottay/design-system';

Usage contractPaste-ready example that shows the base contract first.

tsx

11 lines

Consumption

Runtime-aware snippet

import { MediaSurface } from '@rottay/design-system';

<MediaSurface
  config={{
    title: 'Your page title',
    dataSource,
    actions,
    permissions,
    routing,
  }}
/>

Media

Live preview

Recipe map and contract boundary

Import and usage contract

Design System Showroom

Media

Media

Live preview

Media library

Media library

Media library

Recipe map and contract boundary

Import and usage contract

Media

Media library

Media library

Media library