Fonts

The type system is intentionally small and opinionated. It gives the interface a strong visual rhythm while keeping the code readable and production-friendly.

Font stack

The project wires fonts in app/layout.tsx using next/font/google:

import { Arima, Instrument_Serif, Geist_Mono } from "next/font/google";

const arima = Arima({
  subsets: ["latin"],
  variable: "--font-arima",
});

const instrumentSerif = Instrument_Serif({
  subsets: ["latin"],
  variable: "--font-instrument-serif",
});

const geistMono = Geist_Mono({
  subsets: ["latin"],
  variable: "--font-geist-mono",
});

These are then exposed through the Tailwind theme in app/globals.css:

@theme {
  --font-sans: var(--font-arima), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
  --font-display: var(--font-instrument-serif), ui-serif, Georgia, serif;
}

Type roles

Usage examples

<h1 className="font-display text-fg">Interfaces with Aura</h1>
<p className="font-sans text-fg/80">Readable UI copy with a soft macOS tone.</p>
<code className="font-mono text-accent-primary">npm run dev</code>

Design notes

• Body and UI text default to the Arima stack for warmth and clarity.
• Display moments use Instrument Serif for a premium editorial accent.
• Code and terminal-style content use Geist Mono to keep commands legible and precise.

Theme-aware usage

Use the CSS variables or Tailwind classes instead of hardcoded font stacks when building new components:

<div className="font-display text-5xl">A soft editorial headline</div>
<div className="font-mono text-sm text-fg/60">npm install</div>

This keeps the visual identity aligned with the rest of the Aura system and makes swapping styles easier across the whole product.

Aura UI font CDN

The deployed font gallery publishes a CSS endpoint for every discovered font family. Replace the domain below if you deploy Aura UI under a different origin.

<link rel="stylesheet" href="https://aura-ui-os.vercel.app/fonts/arima.css" />

Then use the family name in your stylesheet:

body {
  font-family: "Arima", sans-serif;
}

The same endpoint can be loaded with CSS @import:

@import url("https://aura-ui-os.vercel.app/fonts/arima.css");

.headline {
  font-family: "Arima", sans-serif;
  font-weight: 700;
}

Use the lowercase family slug to access another font:

https://aura-ui-os.vercel.app/fonts/poppins.css
https://aura-ui-os.vercel.app/fonts/satoshi.css
https://aura-ui-os.vercel.app/fonts/pramukhrounded.css

The detail page for each family is available at /fonts/[slug] and includes its available weights, styles, install snippets, and direct WOFF2 URLs. For example:

https://aura-ui-os.vercel.app/fonts/arima

Installing multiple families

Use the checkbox on each font card to select multiple families. The cart icon beside the grid/list controls opens a combined installation workspace at /fonts/collection. That workspace includes the CDN URL, HTML link, CSS import, Next.js localFont example, and individual WOFF2 downloads for every selected family.

Next.js projects

Add the HTML link in app/layout.tsx:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link rel="stylesheet" href="https://aura-ui-os.vercel.app/fonts/arima.css" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Licensing

Only use a font in production when its original license allows web embedding and redistribution. The Aura UI collection license covers Aura UI-authored registry metadata, documentation, and tooling; it does not replace the original license for third-party WOFF2 files.