Installation · Aura

Two workspace packages, two stylesheets, four faces — and your first component.

The packages

Aura ships as two workspace packages: @morna/tokens (the constants — color, type, motion, spacing, the roster resolver) and @morna/ui (the primitives built on them). Apps consume both; nothing reaches around them.

package.json

{
  "dependencies": {
    "@morna/tokens": "workspace:*",
    "@morna/ui": "workspace:*"
  }
}

Mount the stylesheets

The token sheet carries every CSS variable (themes, seat lights, density, radii, elevation); system.css carries the primitives’ classes. Import both once, at the root — system.css last, so the design system has final say in the cascade.

app/layout.tsx

import "@morna/tokens/tokens.css";
import "./globals.css";
import "@morna/ui/system.css"; // last — final say in the cascade

Mount the four faces

Four faces mount, but they are not four equal voices: Geist is the workspace — every operable surface and every figure — and Geist Mono is the witness. Fraunces and Newsreader are editorial exports, reached for by marketing, generated artifacts and the error pages only. They all mount as CSS variables via next/font; the token sheet picks them up by name.

app/fonts.ts

import { Fraunces, Newsreader } from "next/font/google";
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";

export const heroSerif = Fraunces({ variable: "--font-hero", subsets: ["latin"], /* … */ });   // editorial
export const figureSerif = Newsreader({ variable: "--font-figure", subsets: ["latin"], /* … */ }); // compat
export const uiSans = GeistSans;      // exposes --font-geist-sans → --font-system-sans
export const witnessMono = GeistMono; // exposes --font-geist-mono → --font-witness-mono
                                      //   (and --font-system-mono, its alias)

Render your first component

tsx

import { Button, WorkCard } from "@morna/ui";
import type { WorkItem } from "@morna/ui";

const item: WorkItem = {
  id: actionId,
  who: "maris",               // any seat id — base team or tenant-grown
  title: "Approve the renewal reply",
  state: "needs-approval",
  floor: true,                // irreversible ⇒ the hold gesture, not a tap
};

export function Morning() {
  return (
    <>
      <WorkCard item={item} onApprove={approve} onReject={reject} />
      <Button variant="primary" size="lg">Approve</Button>
    </>
  );
}

There is no CLI and no copy-paste registry — Aura is a private system with one consumer. The registry is the package; when a pattern earns a second use, it moves into packages/ui and both surfaces inherit it.