One system. Your signature.

Start with Bronze, Silver, or Gold. Make a few changes, or create an entirely different identity.

Use the Foundry finish

The workbench finish is available as an optional CSS foundation. Load it after your Axonyx UI styles, then wrap your components in a theme container.

<div data-foundry="bronze">
  <Card title="Ready to ship">
    <Button variant="primary">Save changes</Button>
  </Card>
</div>

Choose a style and a palette

Alloy keeps the clean, restrained finish. Forge adds angular corners, stronger edges, beveled buttons, and inset fields. Classic preserves the original Axonyx UI colors, generous corners, and rich surfaces. All three work with Bronze, Silver, and Gold. Try Style and Palette in the header.

<div data-foundry="bronze" data-foundry-style="forge">
  <!-- Your Foundry components -->
</div>

The style system is included in axonyx-ui 0.0.73. Native apps load it through use "@axonyx/ui". Without a style attribute, a container uses Alloy. Nested theme containers choose their own style. Brand overrides load last.

Override just what you need

Add a brand class to the container and load your overrides after the foundation. Every component inside shares the same tokens.

[data-foundry].my-brand {
  --ax-primary: #6e99e8;
  --ax-on-primary: #000000;
  --ax-radius-md: 12px;
  --ax-radius-lg: 14px;
}

Useclass="my-brand"on the theme container. Check text and focus contrast when you change colors.

Go further with recipes

Theme tokens set the global identity. A recipe override changes one component's appearance while preserving its structure and behavior.

[data-foundry].my-brand .ax-card {
  padding: 32px;
  box-shadow: none;
}