AURA Design System — @jirawatpyk/aura-tokens (imported as @aura/tokens)

Enterprise Standard, Human Creative. Tokens, Tailwind preset, Figma variables a contrast check and token lint. The components live in @jirawatpyk/aura-react; components/ here is a synced copy of their window.Aura bundle for <script>-tag use.

What's inside

ใช้งาน (5 นาที)

# public on npmjs; internal projects can use GitHub Packages instead (see the repository README)
npm install @aura/tokens@npm:@jirawatpyk/aura-tokens @aura/react@npm:@jirawatpyk/aura-react
# or plain: npm install @jirawatpyk/aura-tokens @jirawatpyk/aura-react

// app/layout.tsx
import '@aura/tokens/aura-fonts.local.css'; // fonts, self-hosted from the package: works under a font-src 'self' CSP
import '@aura/tokens/aura.css'; // tokens
import '@aura/react/styles.css'; // component styles (with @aura/react)

Next.js can load the same families with next/font instead, and a site with no CSP can use Google Fonts (aura-fonts.css or <link> tags). Both are under Fonts below.

Fonts

Pick one of three ways to load Fraunces, Inter, JetBrains Mono and Noto Sans Thai:

<!-- Google Fonts from <head> (only without a strict CSP) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&family=Noto+Sans+Thai:wght@400;500;600&display=swap"
/>

// app/layout.tsx — next/font (downloads at build time and self-hosts, so font-src 'self' is enough)
import { Fraunces, Inter, JetBrains_Mono, Noto_Sans_Thai } from 'next/font/google';
const display = Fraunces({ subsets: ['latin', 'latin-ext'], axes: ['opsz'], variable: '--next-display' });
const sans = Inter({ subsets: ['latin', 'latin-ext'], variable: '--next-sans' });
const mono = JetBrains_Mono({ subsets: ['latin', 'latin-ext'], weight: '400', variable: '--next-mono' });
const thai = Noto_Sans_Thai({ subsets: ['thai'], variable: '--next-thai' });
// <html className={[display, sans, mono, thai].map((f) => f.variable).join(' ')}>

/* app/globals.css, after aura.css — AURA's stacks now use the next/font families */
:root {
  --font-display: var(--next-display), var(--next-thai), serif;
  --font-sans: var(--next-sans), var(--next-thai), sans-serif;
  --font-mono: var(--next-mono), monospace;
  --font-thai: var(--next-thai), sans-serif;
}

Dark theme: put class="dark" (or data-theme="dark") on <html>.

Tailwind v4

/* app/globals.css */
@import 'tailwindcss';
@import '@jirawatpyk/aura-tokens/tailwind.css'; /* imports aura.css too */

Classes: bg-bg-surface, text-fg-primary, border-border-strong, text-fg-danger, bg-alert-warning-bg, fill-chart-1, p-aura-6, gap-aura-4, rounded-aura-xl, shadow-aura-overlay, ease-aura-ease, duration-aura-fast, z-aura-dialog, font-display / font-sans / font-mono. They point at the --aura-* variables, so .dark or data-theme="dark" switches them with no dark: prefix; the file also makes dark: follow those two switches. npm run check:tailwind4 compiles it with Tailwind v4 in CI.

Next to an existing Tailwind theme (shadcn) use @jirawatpyk/aura-tokens/tailwind.prefixed.css instead (4.17). Every name carries aura- (bg-aura-bg-surface, border-aura-border-strong, bg-aura-chart-1, font-aura-sans), with no @custom-variant and no @import. Import aura.css yourself in an early layer so your theme keeps its --font-*. The React package README has the full setup, with @jirawatpyk/aura-react/styles.layer.css.

Tailwind v3

// tailwind.config.ts — copy this file, or spread the maps from '@jirawatpyk/aura-tokens/tailwind'

// ❌ ห้าม
<div className="bg-[#18181b] text-white">
// ✅ ต้อง
<div className="bg-bg-surface-strong text-fg-inverted rounded-aura-xl p-aura-6">

Components

The bundle is a classic script that reads window.React / window.ReactDOM and sets window.Aura:

import React from 'react';
import ReactDOM from 'react-dom';
(window as any).React = React;
(window as any).ReactDOM = ReactDOM;
import '@aura/tokens/components.js';
const { Button, TextField, DataTable, Dialog, toast, Toaster } = (window as any).Aura;

Types for every component are in components/index.d.ts.

Changing a token

1. Edit tokens.json (never aura.css, tailwind.tokens.cjs, aura-tailwind.css or the CSV).
2. npm run build:tokens (regenerates the generated files).
3. npm run a11y (every text/ground pair in both themes must pass AA).
4. Open a PR; see GOVERNANCE.md.

Build & publish

npm run build      # build:tokens + contrast check + dist/
npm publish        # to your private registry