Design languageFoundry

Foundry

Foundry is the design language behind Axonyx UI. It is engineered, dark-first, CSS-driven, and built around a stable contract shared by React and native Axonyx pages.

Principles

Dark-first surfaces

Foundry starts from deep product surfaces, then uses metal-like light, borders, and shadows to create hierarchy without noisy decoration.

Signal over ornament

Accents should help people read state, intent, and priority. Bronze, silver, and gold are product signals, not random skins.

CSS as the visual engine

The UI layer is mostly tokens, data attributes, and semantic classes. JavaScript is reserved for interaction that actually needs state.

Adapter-friendly

React components are thin wrappers over the same CSS contract used by native Axonyx pages.

Theme model

Foundry themes are selected at the document root, with data-foundry for the palette and data-foundry-style for Classic, Alloy, or Forge. Components do not hardcode bronze, silver, or gold. They read semantic tokens such as surface, border, text, and primary signal.

<html data-theme="bronze" data-foundry="bronze" data-foundry-style="classic">
<div data-foundry="silver" data-foundry-style="alloy">...</div>
<div data-foundry="gold" data-foundry-style="forge">...</div>

Silver

Neutral, clean, and practical for docs, dashboards, and framework surfaces.

Bronze

Warm forged-metal energy for product identity and expressive marketing pages.

Gold

Premium highlight mode for launches, hero moments, and high-value calls to action.

Component contract

The important part of Axonyx UI is not only the React API. It is the HTML and CSS contract: predictable classes, data attributes, tokens, and minimal stateful islands.

<article class="ax-card" data-surface="brushed">
  <h2>Readable structure</h2>
  <p>Visuals come from tokens and component CSS.</p>
</article>

For React today

In Next.js, @axonyx/react gives teams familiar components while @axonyx/uistays the source of visual truth.

import "@axonyx/ui/css/index.css";
import { Button, Card } from "@axonyx/react";

For native Axonyx

CSS-first runtime

Foundry helps Axonyx keep generated pages light: semantic HTML, shared CSS, and only the JavaScript needed for interaction.

One UI contract

The same components can be consumed by React apps and native Axonyx pages through their respective packages.