Request API access
Micro Frontend

Styling tool

Brand the micro-frontend by adjusting design tokens and layout options. Every parameter is explained, the preview re-skins live, and the generated mount() call is ready to paste.

Presets
Suggest from a screenshot

Upload, drop or paste a PNG, JPEG or WebP (max. 5 MB). A reduced, metadata-stripped rendition is sent to our AI processor to analyze visual roles; contrast is then validated locally. ADITUS retains the original image and derived style set for 6 months for quality control.

Drop an image here
You can also focus this area and paste from the clipboard.

--aditus-accent

Primary brand color: buttons, active states, emphasis.

--aditus-accent-strong

Hover/pressed shade of the accent.

--aditus-accent-contrast

Text/icon color on top of the accent.

--aditus-accent-soft

Faint accent tint for soft fills/hovers.

--aditus-surface

Panel/card/input background.

--aditus-surface-2

Slightly raised surface for nested fills.

--aditus-border

Hairline border color.

--aditus-border-strong

Stronger border for inputs/controls.

--aditus-text

Primary body text color.

--aditus-muted

Muted/secondary text color.

--aditus-heading

Heading/title color, brighter than body text.

--aditus-overlay-surface

Opaque background of the article detail modal. Set an OPAQUE color when Surface is translucent (glass themes), so the floating dialog never turns see-through and its text stays readable.

--aditus-overlay-backdrop

Scrim behind the detail modal. Use a dark scrim (e.g. rgba(0,0,0,0.6)) for dark themes, where the text-derived default would be a pale veil.

--aditus-success

Success color: completed steps, done check.

--aditus-success-soft

Faint success tint.

--aditus-danger

Error color.

--aditus-danger-soft

Faint error tint.

--aditus-radius

Corner radius of panels/cards.

--aditus-radius-sm

Corner radius of inputs/small chips.

--aditus-radius-button

Corner radius of buttons.

--aditus-gap

Gap between stacked sections inside a phase.

--aditus-shadow

Box-shadow for raised panels/cards.

--aditus-font

Font family stack for the whole micro-frontend.

--aditus-font-size

One CSS length (e.g. 16px or 1rem) that scales the WHOLE typography — body text, metadata, controls and headings keep their proportions and grow together. Default: 15px.

The event step as a vertical list of rows, or a card grid. Each event shows only its own info plus a single select button.

The article step as a vertical list, or a pricing-tier card grid (authored via articleContent).

How articles lay out inside an expanded group of the list layout: a compact stack, or a responsive multi-column grid.

How users pick articles in the list layout: a single select button per row, or a per-row quantity stepper with line subtotals and one footer button that adds every pick at once.

Show the per-article icon (the small tinted SVG the real shop renders left of each ticket) in the list layout.

Show a header graphic: the resolved event's large brand banner as a full-width masthead above the flow. Appears once an event is selected.

Culture sent as the Accept-Language header — drives the localized content from the API (e.g. de-DE, en-GB).

On step change, gently realign the widget into view (never on initial mount). Off if the host manages scrolling.

Answer-option columns for RadioButtonList/CheckBoxList survey questions (1-4). Narrow viewports collapse back to a single column.

Inject the bundled neutral default theme. Turn off when you ship your own complete skin.

Live preview
Preview backgroundStyling aid only — not a Micro-Frontend token. The Micro-Frontend is transparent and inherits your page background.
mount.ts
import { mount } from "@workspace/aditus-shop-embed";

mount(document.getElementById("aditus-shop")!, {
  publicKey: "pk_deine_seite",
  // sessionToken,  // required to activate the shop — minted by your backend, see "Micro Frontend"
  eventTheme: false,  // render your tokens, not the event organizer's branding
});

Only tokens you changed are emitted — omitted ones keep the bundled defaults.