Typography

// app/layout.tsx
import { Fraunces, Inter } from 'next/font/google'
import '@nuton/tokens/tokens.css'

const fraunces = Fraunces({ subsets: ['latin'], axes: ['SOFT', 'WONK', 'opsz'], variable: '--font-fraunces', display: 'swap' })
const inter = Inter({ subsets: ['latin'], variable: '--font-inter', display: 'swap' })

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${fraunces.variable} ${inter.variable}`}>
      {/* next/font generates hashed family names; point the Nuton font tokens at them. */}
      <body style={{
        '--nu-font-header': 'var(--font-fraunces), var(--nu-font-fallback-header)',
        '--nu-font-body': 'var(--font-inter), var(--nu-font-fallback-body)',
      } as React.CSSProperties}>
        {children}
      </body>
    </html>
  )
}

/* If you load the fonts under their real family names ("Fraunces", "Inter"),
   for example with @font-face or a font service, the default tokens already
   point at them and no mapping is needed. Only remap when the names differ: */
:root {
  --nu-font-header: "Fraunces Variable", var(--nu-font-fallback-header);
  --nu-font-body: "Inter Variable", var(--nu-font-fallback-body);
}

.lesson-title {
  font-family: var(--nu-type-title-h4-family);
  font-size: var(--nu-type-title-h4-size);
  line-height: var(--nu-type-title-h4-line-height);
  letter-spacing: var(--nu-type-title-h4-tracking);
  font-weight: var(--nu-type-title-h4-weight);
  font-variation-settings: var(--nu-font-variation-display); /* D6, Fraunces only */
}

.lesson-summary {
  font-family: var(--nu-type-paragraph-small-family);
  font-size: var(--nu-type-paragraph-small-size);
  line-height: var(--nu-type-paragraph-small-line-height);
  letter-spacing: var(--nu-type-paragraph-small-tracking);
  font-weight: var(--nu-type-paragraph-small-weight);
  color: var(--nu-text-sub-600);
}

/* app.css */
@import "tailwindcss";
@import "@nuton/tokens/tokens.css";
@import "@nuton/tokens/tailwind-v4-theme.css";

// Each text-* utility sets size, line height, tracking and weight.
// The family is separate: font-header or font-body.
<h2 className="font-header text-title-h4 [font-variation-settings:var(--nu-font-variation-display)]">
  Photosynthesis, explained
</h2>
<p className="font-body text-paragraph-small text-text-sub-600">
  A 12-minute lesson with a short quiz at the end.
</p>

// tailwind.config.js
module.exports = { presets: [require('@nuton/tokens/tailwind-v3-preset')] }

// fontSize entries carry line height, tracking and weight; fontFamily is header / body.
<h2 className="font-header text-title-h4 [font-variation-settings:var(--nu-font-variation-display)]">
  Photosynthesis, explained
</h2>
<p className="font-body text-paragraph-small text-text-sub-600">
  A 12-minute lesson with a short quiz at the end.
</p>

import type { CSSProperties } from 'react'

/** Applies a Nuton type style from its tokens. Fraunces styles also get the D6 axes. */
export function typeStyle(style: string, header = style.startsWith('title-')): CSSProperties {
  return {
    fontFamily: `var(--nu-type-${style}-family)`,
    fontSize: `var(--nu-type-${style}-size)`,
    lineHeight: `var(--nu-type-${style}-line-height)`,
    letterSpacing: `var(--nu-type-${style}-tracking)`,
    fontWeight: `var(--nu-type-${style}-weight)` as CSSProperties['fontWeight'],
    fontVariationSettings: header ? 'var(--nu-font-variation-display)' : undefined,
  }
}