Design languageFoundry

Foundry

Foundry is the design language behind Axonyx UI. It is engineered, dark-first, CSS-driven, and built around a stable contract that can work in React today and native Axonyx pages later.

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 today. The same contract should later be renderable from .ax pages in the Axonyx framework.

Theme model

Foundry themes are selected at the document root, usually with data-theme. Components do not hardcode bronze, silver, or gold. They read semantic tokens such as surface, border, text, and primary signal.

<html data-theme="silver">
<html data-theme="bronze">
<html data-theme="gold">

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 Axonyx tomorrow

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 now and mapped from .ax components as the framework matures.