Installation

Two ways to use the foundation. The quick path needs no install, no registry, and no AWS — just the hosted files. The package path is for later, once it's published.

Quick start — no install

The foundation publishes plain files at this site. Drop them into any project — no pnpm add, no registry auth.

1. Tokens. Pull in the CSS variables. Either link the hosted file:

<link rel="stylesheet" href="https://sj-foundation-docs.vercel.app/tokens.css" />

…or download tokens.css from that URL and commit it into your project, then import it from your global stylesheet.

2. Use the variables anywhere — they hold every token, in light and dark:

.card {
  background: var(--appearance-background-primary);
  color: var(--appearance-text-secondary);
  border: 1px solid var(--appearance-border-2);
}

3. Fonts. No files to copy — the Aptos web fonts (woff2) are hosted. Add one line to your CSS, then use font-family: "Aptos":

@import url("https://sj-foundation-docs.vercel.app/fonts.css");

The token map

Don't want to guess a value? Every token, resolved per mode, lives at /tokens.json — your lookup map. Browse them on this site, or fetch it:

curl -s https://sj-foundation-docs.vercel.app/tokens.json \
  | jq '.tokens["Background/primary"]'
# { "cssVar": "--appearance-background-primary",
#   "modes": { "Light": "#ffffff", "Dark": "#111111" }, ... }

Each entry gives the cssVar to use in code and the raw value per mode — so you (or your dev) can wire tokens into a project by name, not by eyeballing hex.

Theming

Modes are CSS mechanisms — set them on a parent element, no JS:

<html class="dark">                 <!-- light (:root) / dark -->
<html data-gray="slate">             <!-- gray theme -->
<html data-accent="teal">            <!-- accent theme -->

Because tokens reference each other, flipping an attribute re-cascades every dependent value.

Later — install as a package

Once someone with registry access publishes @dtux/tokens to the SJ private registry, a project can install it instead of copying files:

pnpm add @dtux/tokens

import "@dtux/tokens/fonts.css";
import "@dtux/tokens/tokens.css";

Same variables, but versioned and auto-updating. Until then, the quick-start path above does everything.