Oxygen 6.2 Beta 8 · MCP Showcase

MiraIA — Oxygen Playground

Un catàleg visual de les possibilitats d'Oxygen 6.2 abans de definir la identitat visual definitiva de MiraIA.

01 · Foundations

Foundations

Els fonaments provenen de la col·lecció existent MiraIA Base. Els valors són semàntics i provisionals, preparats per substituir-se de manera centralitzada.

Colors globals

primary

secondary

accent

background

surface

surface-alt

text

text-muted

text-inverse

border

success

warning

error

Spacing scale

space-xs

space-sm

space-md

space-lg

space-xl

Layout tokens

container-max · content-max

section-padding · page-padding

grid-gap

Radius · shadows · transitions

radius-md

shadow-md

transition-normal · hover demo

02 · Typography

Typography

Jerarquia editorial i combinacions de text sense fixar encara una font de marca.

Heading 1 · XL

Heading 2 · LG

Heading 3 · MD

Heading 4 · SM

Heading 5

Heading 6

Body large, body medium i body small serveixen per construir jerarquies editorials i interfícies.

Text muted per a context secundari, ajuda i metadades.

Text link · Label

03 · UI Elements

UI Elements

Estats i peces bàsiques per comparar comportaments abans de definir l’estil final.

Buttons

Disabled

States

Badge Tag / category Focus Text link

Content elements

“Quote visual de mostra per validar veu editorial.”

Un element de llista
Un altre element

Primer pas
Segon pas

04 · Components

Components reutilitzables

Aquesta zona mostra els components base d’Oxygen i shells preparats. Els exemples de targetes reutilitzen la mateixa estructura visual amb dades diferents.

Components Oxygen

Container · Section · Heading · Text · Button Primary · Button Secondary · Card · Input · Badge · Divider

Les instàncies reutilitzables es demostren amb components Oxygen i propietats editables quan el connector ho permet.

Shells preparats

Artwork Card · Audio Player · Artwork Header · QR / Artwork Indicator

Shell visual preparat. Sense decidir encara la seva identitat definitiva.

Component slot

Heading

Text

Badge

Artwork Card · mateixa estructura, dades diferents

Artwork 01

La nit estrellada Vincent van Gogh · 1889

Artwork 02

Composició VIII Wassily Kandinsky · 1923

Artwork 03

Les demoiselles Pablo Picasso · 1907

Artwork 04

Impressió, sol ixent Claude Monet · 1872

05 · Layouts

Layouts

Galeria de composicions possibles. No són layouts finals de MiraIA.

Full width

Centered content

Centered

Two / three / four columns

Bento

Featured

Split screen

Media

Text

Sidebar / timeline

Editorial / image + text

Image

Editorial text

CTA / featured content

Dynamic Data

Demostració visual amb dades fictícies d’art. No s’han creat CPTs ni custom fields reals.

Obra

Títol: La nit estrellada
Artista: Vincent van Gogh
Any: 1889
Tècnica: Oli sobre tela
Categoria: Paisatge

Què demostraria Oxygen?

Aquests valors podrien provenir de WordPress, custom fields o una font dinàmica sense canviar l’estructura visual.

Demostració visual · dades fictícies

07 · Loops

Loops i repeaters

Un patró de card pot repetir-se sobre múltiples elements. Aquesta és una demostració visual sense CPT real.

Artwork 01 La nit estrellada Van Gogh · Paisatge

Artwork 02 Composició VIII Kandinsky · Abstracte

Artwork 03 Les demoiselles Picasso · Cubisme

Artwork 04 Impressió Monet · Impressionisme

Artwork 05 El petó Klimt · Simbolisme

Artwork 06 Guernica Picasso · Història

Loop conceptual: 1 component → múltiples elements.

08 · Responsive

Responsive real

Els grids canvien de columnes i s’apilen als breakpoints d’Oxygen: desktop, tablet landscape, tablet portrait, phone landscape i phone portrait.

Desktop
4 columns

Tablet
2 columns

Phone
1 column

Stack
content flow

Canvis demostrats

Columnes, padding, grids, bento, split screen, sidebar i ordre natural del contingut.

Breakpoints

1119px · 1023px · 767px · 479px

09 · Interactions

Interactions

Exemples de hover, active, focus, sticky i canvis d’estat. Les peces marcades com a demostració visual no depenen de plugins.

Hover / active / focus

Hover me Press me Focus me

Show / hide · toggle · accordion

+ Artwork details Demostració visual

Tabs · Overview · Audio · Details

Tooltip · informació contextual

Sticky / reveal

Sticky element

Reveal i menu interaction preparats com a patrons d’interacció.

10 · Animations

Animations

Galeria compacta de moviment i transicions. Passa el cursor per veure els exemples interactius.

Fade

Hover

Slide

Hover

Scale / zoom

Hover

Rotate

Hover

Les entrades de scroll i keyframes avançats queden com a capacitats a explorar amb les eines natives d’animació d’Oxygen.

11 · Conditions

Conditions

Exemples de lògica: un element pot aparèixer o ocultar-se segons dades, categoria, context o existència d’un recurs.

Visible si té imatge

Visible si té àudio

Visible si és categoria Paisatge

Visible si hi ha context d’usuari

Visible segons context

Demostració visual de condició

12 · Forms

Forms

Mostra visual de controls i estats de formulari. No s’ha instal·lat cap plugin.

Text input

Nom de l’obra

visitor@example.com

Textarea

Comentari

Select

Selecciona una categoria

Checkbox · Radio · Toggle

☐ Opció · ◉ Opció · ◐ Toggle

Cerca una obra…

Error state

Camp obligatori

Success state

Correcte

Demostració visual: el connector actual no exposa un input natiu complet via html-to-page.

13 · Media

Media

Art direction provisional amb placeholders per veure proporcions, relacions i combinacions de media.

Artwork image

Responsive image

Image + metadata

Artwork card

Video

Video / caption

Audio player

Audio + artwork + CTA

Artwork image + text

QR + artwork

Media + CTA

14 · Oxygen + MCP

Què podem fer amb Oxygen + MCP?

Mapa visual de les capacitats que podem consultar i gestionar des de Zapia mitjançant el bridge MCP.

Pages Crear, editar, previsualitzar

Templates Condicions i estructura

Components Reutilització i props

Selectors CSS global d’Oxygen

Variables Tokens semàntics

Dynamic Data Camps i context

Loops Repetició de components

Conditions Lògica de visibilitat

Interactions Estats i triggers

Animations Moviment i transicions

Responsive Breakpoints i grids

Site structure Arbre i preview

15 · MiraIA Examples

Exemples aplicats a MiraIA

Possibles direccions de producte, sense considerar-les encara disseny final.

Artwork page

Artwork

Títol · artista · any · àudio · curiositat · CTA

Museum landing page

Hero · obres · exposicions · CTA

Artwork Card Grid

Card

Audio Guide Screen

Artwork · “Escolta la teva visita” · player · next

Visitor Profile

Nom

Visitor

Idioma

CA · ES · EN

Interessos

Art modern

QR activation screen

Escaneja · Activa · Comença la visita

MiraIA — Design System

Base provisional i semàntica. Els valors visuals estan centralitzats en variables globals d’Oxygen i no representen encara la identitat definitiva de MiraIA.

Colors

primary

secondary

accent

background

surface

surface-alt

text

text-muted

text-inverse

border

success

warning

error

Tipografia

Heading XL

Heading LG

Heading MD

Heading SM

Body MD — text de mostra per validar ritme, contrast i llegibilitat.

Body SM — text auxiliar de mostra.

Label

Components

Card

Component base amb superfície, vora, radi i ombra variables.

Badge

Input

Input preview

Buttons

Divider

Espaiat

space-xs

space-sm

space-md

space-lg

space-xl

space-2xl

space-3xl

Radis i ombres

radius-sm

radius-md

radius-lg

radius-xl

radius-full

shadow-sm

shadow-md

shadow-lg

Components futurs

Artwork Card · Audio Player · Artwork Header · QR / Artwork Indicator