feat: chartColor and fontHeading (#10115)

* feat: chart color * fix * fix * fix: chart color * chore: changeset * chore: restore directory registry formatting * feat: add fontHeading * feat: rebuild registry * fix: v0 * refactor * fix * fix * fix * fix * fix * fix: refactor preset handling * fix * fix * fix
2026-06-11 09:51:40 +00:00 · 2026-03-19 23:35:01 +04:00
parent 31dbc6fc91
commit 687f09817b
615 changed files with 13274 additions and 1380 deletions
--- a/.changeset/short-colts-go.md
+++ b/.changeset/short-colts-go.md
@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add fontHeading to presets
--- a/.changeset/spicy-walls-visit.md
+++ b/.changeset/spicy-walls-visit.md
@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add chartColor
--- a/.cursor/rules/registry-bases-parity.mdc
+++ b/.cursor/rules/registry-bases-parity.mdc
@@ -0,0 +1,22 @@
+---
+description: Keep registry base and radix trees in sync when editing shared UI
+globs: apps/v4/registry/bases/**/*
+alwaysApply: false
+---
+
+# Registry bases: Base UI ↔ Radix parity
+
+`apps/v4/registry/bases/base` and `apps/v4/registry/bases/radix` are **parallel registries**. Anything that exists in both trees for the same purpose (preview blocks, mirrored examples, shared card layouts, etc.) **must stay in sync**.
+
+## When editing
+
+- If you change a file under **`bases/base/...`**, apply the **same behavioral and visual change** to the matching path under **`bases/radix/...`** (and the reverse).
+- Only diverge where APIs differ (e.g. import paths like `@/registry/bases/base/ui/*` vs `@/registry/bases/radix/ui/*`, or Base UI vs Radix component props).
+- Do **not** update only one side unless the user explicitly asks for a single-base change.
+
+## Typical mirrored paths
+
+- `blocks/preview/**` — preview cards and blocks
+- Parallel `ui/*` components when both exist for the same component
+
+After edits, briefly confirm both trees were updated (or state why one side is intentionally unchanged).
--- a/apps/v4/app/(app)/docs/changelog/page.tsx
+++ b/apps/v4/app/(app)/docs/changelog/page.tsx
@@ -79,7 +79,7 @@ export default function ChangelogPage() {
            })}
            {olderPages.length > 0 && (
              <div id="more-updates" className="mb-24 scroll-mt-24">
-                <h2 className="font-heading mb-6 text-xl font-semibold tracking-tight">
+                <h2 className="mb-6 font-heading text-xl font-semibold tracking-tight">
                  More Updates
                </h2>
                <div className="grid auto-rows-fr gap-3 sm:grid-cols-2">
--- a/apps/v4/app/(create)/components/chart-color-picker.tsx
+++ b/apps/v4/app/(create)/components/chart-color-picker.tsx
@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+
+import { useMounted } from "@/hooks/use-mounted"
+import {
+  BASE_COLORS,
+  getThemesForBaseColor,
+  type ChartColorName,
+} from "@/registry/config"
+import { LockButton } from "@/app/(create)/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerSeparator,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function ChartColorPicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const mounted = useMounted()
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const availableChartColors = React.useMemo(
+    () => getThemesForBaseColor(params.baseColor),
+    [params.baseColor]
+  )
+
+  const currentChartColor = React.useMemo(
+    () =>
+      availableChartColors.find((theme) => theme.name === params.chartColor),
+    [availableChartColors, params.chartColor]
+  )
+
+  const currentChartColorIsBaseColor = React.useMemo(
+    () => BASE_COLORS.find((baseColor) => baseColor.name === params.chartColor),
+    [params.chartColor]
+  )
+
+  React.useEffect(() => {
+    if (!currentChartColor && availableChartColors.length > 0) {
+      setParams({ chartColor: availableChartColors[0].name })
+    }
+  }, [currentChartColor, availableChartColors, setParams])
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-xs text-muted-foreground">Chart Color</div>
+            <div className="text-sm font-medium text-foreground">
+              {currentChartColor?.title}
+            </div>
+          </div>
+          {mounted && (
+            <div
+              style={
+                {
+                  "--color":
+                    currentChartColor?.cssVars?.dark?.[
+                      currentChartColorIsBaseColor
+                        ? "muted-foreground"
+                        : "primary"
+                    ],
+                } as React.CSSProperties
+              }
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none md:right-2.5"
+            />
+          )}
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+          className="max-h-92"
+        >
+          <PickerRadioGroup
+            value={currentChartColor?.name}
+            onValueChange={(value) => {
+              setParams({ chartColor: value as ChartColorName })
+            }}
+          >
+            <PickerGroup>
+              {availableChartColors
+                .filter((theme) =>
+                  BASE_COLORS.find((baseColor) => baseColor.name === theme.name)
+                )
+                .map((theme) => (
+                  <PickerRadioItem
+                    key={theme.name}
+                    value={theme.name}
+                    closeOnClick={isMobile}
+                  >
+                    {theme.title}
+                  </PickerRadioItem>
+                ))}
+            </PickerGroup>
+            <PickerSeparator />
+            <PickerGroup>
+              {availableChartColors
+                .filter(
+                  (theme) =>
+                    !BASE_COLORS.find(
+                      (baseColor) => baseColor.name === theme.name
+                    )
+                )
+                .map((theme) => (
+                  <PickerRadioItem
+                    key={theme.name}
+                    value={theme.name}
+                    closeOnClick={isMobile}
+                  >
+                    {theme.title}
+                  </PickerRadioItem>
+                ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="chartColor"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
+      />
+    </div>
+  )
+}
--- a/apps/v4/app/(create)/components/customizer.tsx
+++ b/apps/v4/app/(create)/components/customizer.tsx
@@ -7,7 +7,7 @@ import {
  CardFooter,
  CardHeader,
 } from "@/examples/base/ui/card"
-import { FieldGroup } from "@/examples/base/ui/field"
+import { FieldGroup, FieldSeparator } from "@/examples/base/ui/field"
 import { type RegistryItem } from "shadcn/schema"

 import { useIsMobile } from "@/hooks/use-mobile"
@@ -16,6 +16,7 @@ import { MenuAccentPicker } from "@/app/(create)/components/accent-picker"
 import { ActionMenu } from "@/app/(create)/components/action-menu"
 import { BaseColorPicker } from "@/app/(create)/components/base-color-picker"
 import { BasePicker } from "@/app/(create)/components/base-picker"
+import { ChartColorPicker } from "@/app/(create)/components/chart-color-picker"
 import { CopyPreset } from "@/app/(create)/components/copy-preset"
 import { FontPicker } from "@/app/(create)/components/font-picker"
 import { IconLibraryPicker } from "@/app/(create)/components/icon-library-picker"
@@ -27,7 +28,7 @@ import { ResetDialog } from "@/app/(create)/components/reset-button"
 import { StylePicker } from "@/app/(create)/components/style-picker"
 import { ThemePicker } from "@/app/(create)/components/theme-picker"
 import { V0Button } from "@/app/(create)/components/v0-button"
-import { FONTS } from "@/app/(create)/lib/fonts"
+import { FONT_HEADING_OPTIONS, FONTS } from "@/app/(create)/lib/fonts"
 import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"

 export function Customizer({
@@ -54,22 +55,40 @@ export function Customizer({
        <MainMenu />
      </CardHeader>
      <CardContent className="no-scrollbar min-h-0 flex-1 overflow-x-auto overflow-y-hidden md:overflow-y-auto">
-        <FieldGroup className="flex-row gap-2.5 py-px md:flex-col md:gap-3.25">
+        <FieldGroup className="flex-row gap-2.5 py-px **:data-[slot=field-separator]:-mx-4 **:data-[slot=field-separator]:w-auto md:flex-col md:gap-3.25">
          {isMobile && <BasePicker isMobile={isMobile} anchorRef={anchorRef} />}
          <StylePicker
            styles={STYLES}
            isMobile={isMobile}
            anchorRef={anchorRef}
          />
+          <FieldSeparator className="hidden md:block" />
          <BaseColorPicker isMobile={isMobile} anchorRef={anchorRef} />
          <ThemePicker
            themes={availableThemes}
            isMobile={isMobile}
            anchorRef={anchorRef}
          />
+          <ChartColorPicker isMobile={isMobile} anchorRef={anchorRef} />
+          <FieldSeparator className="hidden md:block" />
+          <FontPicker
+            label="Heading"
+            param="fontHeading"
+            fonts={FONT_HEADING_OPTIONS}
+            isMobile={isMobile}
+            anchorRef={anchorRef}
+          />
+          <FontPicker
+            label="Font"
+            param="font"
+            fonts={FONTS}
+            isMobile={isMobile}
+            anchorRef={anchorRef}
+          />
+          <FieldSeparator className="hidden md:block" />
          <IconLibraryPicker isMobile={isMobile} anchorRef={anchorRef} />
-          <FontPicker fonts={FONTS} isMobile={isMobile} anchorRef={anchorRef} />
          <RadiusPicker isMobile={isMobile} anchorRef={anchorRef} />
+          <FieldSeparator className="hidden md:block" />
          <MenuColorPicker isMobile={isMobile} anchorRef={anchorRef} />
          <MenuAccentPicker isMobile={isMobile} anchorRef={anchorRef} />
        </FieldGroup>
--- a/apps/v4/app/(create)/components/design-system-provider.tsx
+++ b/apps/v4/app/(create)/components/design-system-provider.tsx
@@ -64,18 +64,37 @@ export function DesignSystemProvider({
    history: "replace", // …or push updates into the iframe history.
  })
  const [isReady, setIsReady] = React.useState(false)
-  const { style, theme, font, baseColor, menuAccent, menuColor, radius } =
-    searchParams
+  const {
+    style,
+    theme,
+    font,
+    fontHeading,
+    baseColor,
+    chartColor,
+    menuAccent,
+    menuColor,
+    radius,
+  } = searchParams
  const effectiveRadius = style === "lyra" ? "none" : radius
  const selectedFont = React.useMemo(
    () => FONTS.find((fontOption) => fontOption.value === font),
    [font]
  )
+  const selectedHeadingFont = React.useMemo(() => {
+    if (fontHeading === "inherit" || fontHeading === font) {
+      return selectedFont
+    }
+
+    return FONTS.find((fontOption) => fontOption.value === fontHeading)
+  }, [font, fontHeading, selectedFont])
  const initialFontSansRef = React.useRef<string | null>(null)
+  const initialFontHeadingRef = React.useRef<string | null>(null)

  React.useEffect(() => {
    initialFontSansRef.current =
      document.documentElement.style.getPropertyValue("--font-sans")
+    initialFontHeadingRef.current =
+      document.documentElement.style.getPropertyValue("--font-heading")

    return () => {
      removeManagedBodyClasses(document.body)
@@ -86,10 +105,18 @@ export function DesignSystemProvider({
          "--font-sans",
          initialFontSansRef.current
        )
-        return
+      } else {
+        document.documentElement.style.removeProperty("--font-sans")
      }

-      document.documentElement.style.removeProperty("--font-sans")
+      if (initialFontHeadingRef.current) {
+        document.documentElement.style.setProperty(
+          "--font-heading",
+          initialFontHeadingRef.current
+        )
+      } else {
+        document.documentElement.style.removeProperty("--font-heading")
+      }
    }
  }, [])

@@ -124,12 +151,29 @@ export function DesignSystemProvider({
    // Always set --font-sans for the preview so the selected font is visible.
    // The font type (sans/serif/mono) is metadata for the CLI updater.
    if (selectedFont) {
-      const fontFamily = selectedFont.font.style.fontFamily
-      document.documentElement.style.setProperty("--font-sans", fontFamily)
+      document.documentElement.style.setProperty(
+        "--font-sans",
+        selectedFont.font.style.fontFamily
+      )
+    }
+
+    if (selectedHeadingFont) {
+      document.documentElement.style.setProperty(
+        "--font-heading",
+        selectedHeadingFont.font.style.fontFamily
+      )
    }

    setIsReady(true)
-  }, [style, theme, font, baseColor, selectedFont])
+  }, [
+    style,
+    theme,
+    font,
+    fontHeading,
+    baseColor,
+    selectedFont,
+    selectedHeadingFont,
+  ])

  const registryTheme = React.useMemo(() => {
    if (!baseColor || !theme || !menuAccent || !effectiveRadius) {
@@ -140,12 +184,13 @@ export function DesignSystemProvider({
      ...DEFAULT_CONFIG,
      baseColor,
      theme,
+      chartColor,
      menuAccent,
      radius: effectiveRadius,
    }

    return buildRegistryTheme(config)
-  }, [baseColor, theme, menuAccent, effectiveRadius])
+  }, [baseColor, theme, chartColor, menuAccent, effectiveRadius])

  // Use useLayoutEffect for synchronous CSS var updates.
  React.useLayoutEffect(() => {
--- a/apps/v4/app/(create)/components/font-picker.tsx
+++ b/apps/v4/app/(create)/components/font-picker.tsx
@@ -2,13 +2,6 @@

 import * as React from "react"

-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemTitle,
-} from "@/registry/bases/radix/ui/item"
-import { type FontValue } from "@/registry/config"
 import { LockButton } from "@/app/(create)/components/lock-button"
 import {
  Picker,
@@ -20,28 +13,68 @@ import {
  PickerSeparator,
  PickerTrigger,
 } from "@/app/(create)/components/picker"
-import { type Font } from "@/app/(create)/lib/fonts"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { FONTS } from "@/app/(create)/lib/fonts"
+import {
+  useDesignSystemSearchParams,
+  type DesignSystemSearchParams,
+} from "@/app/(create)/lib/search-params"
+
+type FontPickerOption = {
+  name: string
+  value: string
+  type: string
+  font: {
+    style: {
+      fontFamily: string
+    }
+  } | null
+}

 export function FontPicker({
+  label,
+  param,
  fonts,
  isMobile,
  anchorRef,
 }: {
-  fonts: readonly Font[]
+  label: string
+  param: "font" | "fontHeading"
+  fonts: readonly FontPickerOption[]
  isMobile: boolean
  anchorRef: React.RefObject<HTMLDivElement | null>
 }) {
  const [params, setParams] = useDesignSystemSearchParams()
+  const currentValue = param === "font" ? params.font : params.fontHeading
+  const handleFontChange = React.useCallback(
+    (value: string) => {
+      setParams({
+        [param]: value,
+      } as Partial<DesignSystemSearchParams>)
+    },
+    [param, setParams]
+  )

  const currentFont = React.useMemo(
-    () => fonts.find((font) => font.value === params.font),
-    [fonts, params.font]
+    () => fonts.find((font) => font.value === currentValue),
+    [fonts, currentValue]
  )
+  const currentBodyFont = React.useMemo(
+    () => FONTS.find((font) => font.value === params.font),
+    [params.font]
+  )
+  const inheritsBodyFont = param === "fontHeading" && currentValue === "inherit"
+  const displayFontName = inheritsBodyFont
+    ? currentBodyFont?.name
+    : currentFont?.name
+  const inheritFontLabel = currentBodyFont ? currentBodyFont.name : "Body font"
  const groupedFonts = React.useMemo(() => {
-    const groups = new Map<Font["type"], Font[]>()
+    const pickerFonts =
+      param === "fontHeading"
+        ? fonts.filter((font) => font.value !== "inherit")
+        : fonts
+    const groups = new Map<string, FontPickerOption[]>()

-    for (const font of fonts) {
+    for (const font of pickerFonts) {
      const existing = groups.get(font.type)
      if (existing) {
        existing.push(font)
@@ -56,21 +89,25 @@ export function FontPicker({
      label: `${type.charAt(0).toUpperCase()}${type.slice(1)}`,
      items,
    }))
-  }, [fonts])
+  }, [fonts, param])

  return (
    <div className="group/picker relative">
      <Picker>
        <PickerTrigger>
          <div className="flex flex-col justify-start text-left">
-            <div className="text-xs text-muted-foreground">Font</div>
+            <div className="text-xs text-muted-foreground">{label}</div>
            <div className="text-sm font-medium text-foreground">
-              {currentFont?.name}
+              {displayFontName}
            </div>
          </div>
          <div
            className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2.5"
-            style={{ fontFamily: currentFont?.font.style.fontFamily }}
+            style={{
+              fontFamily:
+                currentFont?.font?.style.fontFamily ??
+                currentBodyFont?.font.style.fontFamily,
+            }}
          >
            Aa
          </div>
@@ -82,11 +119,19 @@ export function FontPicker({
          className="max-h-96"
        >
          <PickerRadioGroup
-            value={currentFont?.value}
-            onValueChange={(value) => {
-              setParams({ font: value as FontValue })
-            }}
+            value={currentValue}
+            onValueChange={handleFontChange}
          >
+            {param === "fontHeading" ? (
+              <>
+                <PickerGroup>
+                  <PickerRadioItem value="inherit" closeOnClick={isMobile}>
+                    {inheritFontLabel}
+                  </PickerRadioItem>
+                </PickerGroup>
+                <PickerSeparator />
+              </>
+            ) : null}
            {groupedFonts.map((group) => (
              <PickerGroup key={group.type}>
                <PickerLabel>{group.label}</PickerLabel>
@@ -105,7 +150,7 @@ export function FontPicker({
        </PickerContent>
      </Picker>
      <LockButton
-        param="font"
+        param={param}
        className="absolute top-1/2 right-8 -translate-y-1/2"
      />
    </div>
--- a/apps/v4/app/(create)/components/preset-picker.tsx
+++ b/apps/v4/app/(create)/components/preset-picker.tsx
@@ -31,8 +31,10 @@ export function PresetPicker({
        preset.style === params.style &&
        preset.baseColor === params.baseColor &&
        preset.theme === params.theme &&
+        preset.chartColor === params.chartColor &&
        preset.iconLibrary === params.iconLibrary &&
        preset.font === params.font &&
+        preset.fontHeading === params.fontHeading &&
        preset.menuAccent === params.menuAccent &&
        preset.menuColor === params.menuColor &&
        preset.radius === params.radius
@@ -43,8 +45,10 @@ export function PresetPicker({
    params.style,
    params.baseColor,
    params.theme,
+    params.chartColor,
    params.iconLibrary,
    params.font,
+    params.fontHeading,
    params.menuAccent,
    params.menuColor,
    params.radius,
@@ -67,8 +71,10 @@ export function PresetPicker({
      style: preset.style,
      baseColor: preset.baseColor,
      theme: preset.theme,
+      chartColor: preset.chartColor,
      iconLibrary: preset.iconLibrary,
      font: preset.font,
+      fontHeading: preset.fontHeading,
      menuAccent: preset.menuAccent,
      menuColor: preset.menuColor,
      radius: preset.radius,
--- a/apps/v4/app/(create)/components/project-form.tsx
+++ b/apps/v4/app/(create)/components/project-form.tsx
@@ -87,7 +87,7 @@ export function ProjectForm({
    const rtlFlag = params.rtl ? " --rtl" : ""
    const flags = `${presetFlag}${baseFlag}${templateFlag}${monorepoFlag}${rtlFlag}`

-    return IS_LOCAL_DEV && !process.env.NEXT_PUBLIC_RC
+    return IS_LOCAL_DEV
      ? {
          pnpm: `shadcn init${flags}`,
          npm: `shadcn init${flags}`,
@@ -130,7 +130,7 @@ export function ProjectForm({
      <DialogTrigger render={<Button className={cn(className)} />}>
        Create Project
      </DialogTrigger>
-      <DialogContent className="no-scrollbar max-h-[calc(100svh-2rem)] overflow-y-auto sm:max-w-sm">
+      <DialogContent className="dark no-scrollbar max-h-[calc(100svh-2rem)] overflow-y-auto rounded-2xl border-0 bg-neutral-800 p-6 text-foreground shadow-xl ring-1 ring-neutral-950/80 backdrop-blur-xl [--border:var(--color-neutral-700)]! sm:max-w-sm">
        <DialogHeader>
          <DialogTitle>Create Project</DialogTitle>
          <DialogDescription>
@@ -139,16 +139,17 @@ export function ProjectForm({
        </DialogHeader>
        <div>
          <FieldGroup>
-            <Field>
+            <FieldSeparator className="-mx-6" />
+            <Field className="-mt-2 gap-3">
              <FieldLabel>Template</FieldLabel>
              <TemplateGrid template={params.template} setParams={setParams} />
            </Field>
-            <FieldSeparator />
+            <FieldSeparator className="-mx-6" />
            <Field className="-mt-2">
              <FieldLabel>Base</FieldLabel>
              <BaseGrid base={params.base} setParams={setParams} />
            </Field>
-            <FieldSeparator />
+            <FieldSeparator className="-mx-6" />
            <FieldSet>
              <FieldLegend variant="label" className="sr-only">
                Options
@@ -159,7 +160,7 @@ export function ProjectForm({
              >
                <FieldLabel htmlFor="monorepo">
                  <span
-                    className="size-4 text-foreground [&_svg]:size-4 [&_svg]:fill-current"
+                    className="size-4 text-neutral-100 [&_svg]:size-4 [&_svg]:fill-current"
                    dangerouslySetInnerHTML={{
                      __html: TURBOREPO_LOGO,
                    }}
@@ -181,7 +182,7 @@ export function ProjectForm({
                  }}
                />
              </Field>
-              <FieldSeparator />
+              <FieldSeparator className="-mx-6" />
              <Field orientation="horizontal">
                <FieldLabel htmlFor="rtl">
                  <HugeiconsIcon icon={Globe02Icon} className="size-4" />
@@ -198,7 +199,7 @@ export function ProjectForm({
            </FieldSet>
          </FieldGroup>
        </div>
-        <DialogFooter className="min-w-0">
+        <DialogFooter className="-mx-6 -mb-6 min-w-0">
          <div className="flex w-full min-w-0 flex-col gap-3">
            <Tabs
              value={packageManager}
@@ -208,16 +209,16 @@ export function ProjectForm({
                  packageManager: value as PackageManager,
                }))
              }}
-              className="min-w-0 gap-0 overflow-hidden rounded-lg border bg-surface"
+              className="min-w-0 gap-0 overflow-hidden rounded-xl border-0 bg-neutral-950/20 ring-1 ring-neutral-950/80 dark:bg-neutral-900/50 dark:ring-neutral-700/50"
            >
-              <div className="flex items-center gap-2 px-1 py-1">
-                <TabsList className="font-mono">
+              <div className="flex items-center gap-2 py-1 pr-1.5 pl-1">
+                <TabsList className="bg-transparent font-mono">
                  {PACKAGE_MANAGERS.map((manager) => {
                    return (
                      <TabsTrigger
                        key={manager}
                        value={manager}
-                        className="data-[state=active]:shadow-none"
+                        className="py-0 leading-none data-[state=active]:shadow-none"
                      >
                        {manager}
                      </TabsTrigger>
@@ -241,7 +242,7 @@ export function ProjectForm({
              {Object.entries(commands).map(([key, cmd]) => {
                return (
                  <TabsContent key={key} value={key}>
-                    <div className="relative overflow-hidden border-t border-border/50 bg-surface px-3 py-3 text-surface-foreground">
+                    <div className="relative overflow-hidden border-t border-neutral-700/50 bg-neutral-900/50 px-3 py-3 text-neutral-100">
                      <div className="no-scrollbar overflow-x-auto">
                        <code className="font-mono text-sm whitespace-nowrap">
                          {cmd}
@@ -288,23 +289,26 @@ const TemplateGrid = React.memo(function TemplateGrid({
    <RadioGroup
      value={framework}
      onValueChange={handleTemplateChange}
-      className="grid grid-cols-3 gap-2"
+      className="grid grid-cols-2 gap-2"
    >
      {TEMPLATES.map((item) => (
        <FieldLabel
          key={item.value}
          htmlFor={`template-${item.value}`}
-          className="py-1"
+          className="block w-full"
        >
-          <Field className="gap-0" orientation="horizontal">
-            <FieldContent className="flex flex-col items-center justify-center gap-2">
+          <Field
+            orientation="horizontal"
+            className="w-full rounded-md transition-colors duration-150 hover:bg-neutral-700/45"
+          >
+            <FieldContent className="flex flex-row items-center gap-2 px-2.5 py-1.5">
              <div
-                className="size-6 text-foreground [&_svg]:size-6 *:[svg]:text-foreground!"
+                className="size-4 text-neutral-100 [&_svg]:size-4 *:[svg]:text-neutral-100!"
                dangerouslySetInnerHTML={{
                  __html: item.logo,
                }}
              ></div>
-              <FieldTitle className="text-xs">{item.title}</FieldTitle>
+              <FieldTitle>{item.title}</FieldTitle>
            </FieldContent>
            <RadioGroupItem
              value={item.value}
@@ -343,17 +347,20 @@ const BaseGrid = React.memo(function BaseGrid({
        <FieldLabel
          key={item.name}
          htmlFor={`base-${item.name}`}
-          className="py-1"
+          className="block w-full"
        >
-          <Field className="gap-0" orientation="horizontal">
-            <FieldContent className="flex flex-col items-center justify-center gap-2">
+          <Field
+            orientation="horizontal"
+            className="w-full rounded-md transition-colors duration-150 hover:bg-neutral-700/45"
+          >
+            <FieldContent className="flex flex-row items-center gap-2 px-2.5 py-1.5">
              <div
-                className="size-6 text-foreground [&_svg]:size-6 *:[svg]:text-foreground!"
+                className="size-4 text-neutral-100 [&_svg]:size-4 *:[svg]:text-neutral-100!"
                dangerouslySetInnerHTML={{
                  __html: item.meta?.logo ?? "",
                }}
              />
-              <FieldTitle className="text-xs">{item.title}</FieldTitle>
+              <FieldTitle>{item.title}</FieldTitle>
            </FieldContent>
            <RadioGroupItem
              value={item.name}
--- a/apps/v4/app/(create)/hooks/use-design-system.ts
+++ b/apps/v4/app/(create)/hooks/use-design-system.ts
@@ -1,40 +1,11 @@
 "use client"

-import * as React from "react"
-import { encodePreset, isPresetCode } from "shadcn/preset"
-
+import { getPresetCode } from "@/app/(create)/lib/preset-code"
 import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"

-// Returns the current preset code derived from search params.
+// Returns the canonical preset code derived from the current search params.
 export function usePresetCode() {
  const [params] = useDesignSystemSearchParams()

-  return React.useMemo(() => {
-    // If preset is already in the URL, return it.
-    if (params.preset && isPresetCode(params.preset)) {
-      return params.preset
-    }
-
-    // Otherwise encode current params (e.g. on initial load before first interaction).
-    return encodePreset({
-      style: params.style ?? undefined,
-      baseColor: params.baseColor ?? undefined,
-      theme: params.theme ?? undefined,
-      iconLibrary: params.iconLibrary ?? undefined,
-      font: params.font ?? undefined,
-      radius: params.radius ?? undefined,
-      menuAccent: params.menuAccent ?? undefined,
-      menuColor: params.menuColor ?? undefined,
-    } as Parameters<typeof encodePreset>[0])
-  }, [
-    params.preset,
-    params.style,
-    params.baseColor,
-    params.theme,
-    params.iconLibrary,
-    params.font,
-    params.radius,
-    params.menuAccent,
-    params.menuColor,
-  ])
+  return getPresetCode(params)
 }
--- a/apps/v4/app/(create)/hooks/use-locks.tsx
+++ b/apps/v4/app/(create)/hooks/use-locks.tsx
@@ -6,8 +6,10 @@ export type LockableParam =
  | "style"
  | "baseColor"
  | "theme"
+  | "chartColor"
  | "iconLibrary"
  | "font"
+  | "fontHeading"
  | "menuAccent"
  | "menuColor"
  | "radius"
--- a/apps/v4/app/(create)/hooks/use-random.tsx
+++ b/apps/v4/app/(create)/hooks/use-random.tsx
@@ -10,6 +10,7 @@ import {
  MENU_COLORS,
  RADII,
  STYLES,
+  type FontHeadingValue,
 } from "@/registry/config"
 import { useLocks } from "@/app/(create)/hooks/use-locks"
 import { FONTS } from "@/app/(create)/lib/fonts"
@@ -62,9 +63,41 @@ export function useRandom() {
    const selectedTheme = locks.has("theme")
      ? paramsRef.current.theme
      : randomItem(availableThemes).name
+    context.theme = selectedTheme
+
+    const availableChartColors = applyBias(
+      getThemesForBaseColor(baseColor),
+      context,
+      RANDOMIZE_BIASES.chartColors
+    )
+    const selectedChartColor = locks.has("chartColor")
+      ? paramsRef.current.chartColor
+      : randomItem(availableChartColors).name
+    context.chartColor = selectedChartColor
    const selectedFont = locks.has("font")
      ? paramsRef.current.font
      : randomItem(availableFonts).value
+    context.font = selectedFont
+
+    // Pick heading font: ~70% inherit, ~30% distinct with cross-category contrast.
+    let selectedFontHeading: FontHeadingValue
+    if (locks.has("fontHeading")) {
+      selectedFontHeading = paramsRef.current.fontHeading
+    } else if (Math.random() < 0.7) {
+      selectedFontHeading = "inherit"
+    } else {
+      const bodyType = availableFonts.find(
+        (f) => f.value === selectedFont
+      )?.type
+      const contrastFonts = availableFonts.filter(
+        (f) => f.type !== bodyType && f.value !== selectedFont
+      )
+      selectedFontHeading = (
+        contrastFonts.length > 0
+          ? randomItem(contrastFonts)
+          : randomItem(availableFonts)
+      ).value as FontHeadingValue
+    }
    const selectedRadius = locks.has("radius")
      ? paramsRef.current.radius
      : randomItem(availableRadii).name
@@ -91,16 +124,16 @@ export function useRandom() {
          : paramsRef.current.menuAccent
        : randomItem(MENU_ACCENTS).value

-    context.theme = selectedTheme
-    context.font = selectedFont
    context.radius = selectedRadius

    const nextParams = {
      style: selectedStyle,
      baseColor,
      theme: selectedTheme,
+      chartColor: selectedChartColor,
      iconLibrary: selectedIconLibrary,
      font: selectedFont,
+      fontHeading: selectedFontHeading,
      menuAccent: selectedMenuAccent,
      menuColor: selectedMenuColor,
      radius: selectedRadius,
--- a/apps/v4/app/(create)/hooks/use-reset.tsx
+++ b/apps/v4/app/(create)/hooks/use-reset.tsx
@@ -24,8 +24,10 @@ export function useReset() {
      style: DEFAULT_CONFIG.style,
      baseColor: DEFAULT_CONFIG.baseColor,
      theme: DEFAULT_CONFIG.theme,
+      chartColor: DEFAULT_CONFIG.chartColor,
      iconLibrary: DEFAULT_CONFIG.iconLibrary,
      font: DEFAULT_CONFIG.font,
+      fontHeading: DEFAULT_CONFIG.fontHeading,
      menuAccent: DEFAULT_CONFIG.menuAccent,
      menuColor: DEFAULT_CONFIG.menuColor,
      radius: DEFAULT_CONFIG.radius,
--- a/apps/v4/app/(create)/init/md/build-instructions.ts
+++ b/apps/v4/app/(create)/init/md/build-instructions.ts
@@ -3,13 +3,17 @@ import dedent from "dedent"
 import { UI_COMPONENTS } from "@/lib/components"
 import {
  buildRegistryBase,
-  fonts,
+  getBodyFont,
+  getHeadingFont,
+  getInheritedHeadingFontValue,
  type DesignSystemConfig,
 } from "@/registry/config"

 // Builds step-by-step markdown instructions for manually setting up a project.
 export function buildInstructions(config: DesignSystemConfig) {
  const registryBase = buildRegistryBase(config)
+  const normalizedFontHeading =
+    config.fontHeading === config.font ? "inherit" : config.fontHeading

  const dependencies = [
    ...(registryBase.dependencies ?? []),
@@ -25,13 +29,23 @@ export function buildInstructions(config: DesignSystemConfig) {
    .map(([key, value]) => `  --${key}: ${value};`)
    .join("\n")

-  const font = fonts.find((f) => f.name === `font-${config.font}`)
+  const font = getBodyFont(config.font)
+  const headingFont =
+    normalizedFontHeading === "inherit"
+      ? undefined
+      : getHeadingFont(normalizedFontHeading)

  const sections = [
    buildDependenciesSection(dependencies),
    buildUtilsSection(),
-    buildCssSection(lightVars, darkVars),
-    buildFontSection(font),
+    buildCssSection(
+      lightVars,
+      darkVars,
+      normalizedFontHeading === "inherit"
+        ? getInheritedHeadingFontValue(config.font)
+        : "var(--font-heading)"
+    ),
+    buildFontSection(font, headingFont),
    buildComponentsJsonSection(config),
    buildAvailableComponentsSection(config),
    config.rtl ? buildRtlSection(config) : null,
@@ -67,7 +81,11 @@ function buildUtilsSection() {
  `
 }

-function buildCssSection(lightVars: string, darkVars: string) {
+function buildCssSection(
+  lightVars: string,
+  darkVars: string,
+  fontHeadingValue: string
+) {
  return dedent`
    ## Step 3: Set up CSS

@@ -80,6 +98,7 @@ function buildCssSection(lightVars: string, darkVars: string) {

    @theme inline {
      --font-sans: var(--font-sans);
+      --font-heading: ${fontHeadingValue};
      --font-mono: var(--font-mono);
      --color-background: var(--background);
      --color-foreground: var(--foreground);
@@ -142,40 +161,74 @@ function buildCssSection(lightVars: string, darkVars: string) {
  `
 }

-function buildFontSection(font: (typeof fonts)[number] | undefined) {
+function buildFontSection(
+  font: ReturnType<typeof getBodyFont>,
+  headingFont: ReturnType<typeof getHeadingFont>
+) {
  if (!font) {
    return null
  }

  const googleFontsUrl = `https://fonts.google.com/specimen/${font.font.import.replace(/_/g, "+")}`
+  const headingGoogleFontsUrl = headingFont
+    ? `https://fonts.google.com/specimen/${headingFont.font.import.replace(/_/g, "+")}`
+    : null
+  const nextImports = headingFont
+    ? `${font.font.import}, ${headingFont.font.import}`
+    : font.font.import
+  const nextDeclarations = [
+    `const fontSans = ${font.font.import}({`,
+    `  subsets: ["latin"],`,
+    `  variable: "${font.font.variable}",`,
+    `})`,
+    headingFont ? `const fontHeading = ${headingFont.font.import}({` : null,
+    headingFont ? `  subsets: ["latin"],` : null,
+    headingFont ? `  variable: "${headingFont.font.variable}",` : null,
+    headingFont ? `})` : null,
+  ]
+    .filter(Boolean)
+    .join("\n")
+  const nextHtmlClassName = headingFont
+    ? 'className={fontSans.variable + " " + fontHeading.variable}'
+    : `className={fontSans.variable}`
+  const otherFrameworkCss = [
+    ":root {",
+    `  ${font.font.variable}: ${font.font.family};`,
+    ...(headingFont
+      ? [`  ${headingFont.font.variable}: ${headingFont.font.family};`]
+      : []),
+    "}",
+  ].join("\n")
+  const headingSection = headingFont
+    ? dedent`
+
+      This config also uses **${headingFont.title.replace(" (Heading)", "")}** for headings (\`${headingFont.font.variable}\`).
+    `
+    : ""

  return dedent`
    ## Step 4: Set up the font

    This config uses **${font.title}** (\`${font.font.variable}\`).
+    ${headingSection}

    ### Next.js

    \`\`\`tsx
-    import { ${font.font.import} } from "next/font/google"
+    import { ${nextImports} } from "next/font/google"

-    const fontSans = ${font.font.import}({
-      subsets: ["latin"],
-      variable: "${font.font.variable}",
-    })
+    ${nextDeclarations}

-    // Add fontSans.variable to your <html> className.
-    // <html className={fontSans.variable}>
+    // Add the font variable classes to your <html> className.
+    // <html ${nextHtmlClassName}>
    \`\`\`

    ### Other frameworks

-    Add the font from [Google Fonts](${googleFontsUrl}) and set the \`${font.font.variable}\` CSS variable to the font family:
+    Add the font${headingFont ? "s" : ""} from [Google Fonts](${googleFontsUrl})${headingGoogleFontsUrl ? ` and [Google Fonts](${headingGoogleFontsUrl})` : ""} and set the CSS variable${headingFont ? "s" : ""} to the font famil${headingFont ? "ies" : "y"}:

    \`\`\`css
-    :root {
-      ${font.font.variable}: ${font.font.family};
-    }
+    ${otherFrameworkCss}
    \`\`\`
  `
 }
--- a/apps/v4/app/(create)/init/parse-config.test.ts
+++ b/apps/v4/app/(create)/init/parse-config.test.ts
@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest"
+
+import { parseDesignSystemConfig } from "./parse-config"
+
+describe("parseDesignSystemConfig", () => {
+  it("honors explicit fontHeading and chartColor overrides when a preset is present", () => {
+    const result = parseDesignSystemConfig(
+      new URLSearchParams(
+        "preset=a0&fontHeading=playfair-display&chartColor=emerald"
+      )
+    )
+
+    expect(result.success).toBe(true)
+    if (!result.success) {
+      throw new Error(result.error)
+    }
+
+    expect(result.data.fontHeading).toBe("playfair-display")
+    expect(result.data.chartColor).toBe("emerald")
+  })
+})
--- a/apps/v4/app/(create)/init/parse-config.ts
+++ b/apps/v4/app/(create)/init/parse-config.ts
@@ -4,6 +4,7 @@ import {
  designSystemConfigSchema,
  type DesignSystemConfig,
 } from "@/registry/config"
+import { resolvePresetOverrides } from "@/app/(create)/lib/preset-query"

 // Parses design system config from URL search params.
 export function parseDesignSystemConfig(searchParams: URLSearchParams) {
@@ -15,8 +16,10 @@ export function parseDesignSystemConfig(searchParams: URLSearchParams) {
    if (!decoded) {
      return { success: false as const, error: "Invalid preset code" }
    }
+    const presetOverrides = resolvePresetOverrides(searchParams, decoded)
    configInput = {
      ...decoded,
+      ...presetOverrides,
      base: searchParams.get("base") ?? "radix",
      template: searchParams.get("template") ?? undefined,
      rtl: searchParams.get("rtl") === "true",
@@ -28,7 +31,9 @@ export function parseDesignSystemConfig(searchParams: URLSearchParams) {
      iconLibrary: searchParams.get("iconLibrary"),
      baseColor: searchParams.get("baseColor"),
      theme: searchParams.get("theme"),
+      chartColor: searchParams.get("chartColor") ?? undefined,
      font: searchParams.get("font"),
+      fontHeading: searchParams.get("fontHeading") ?? undefined,
      menuAccent: searchParams.get("menuAccent"),
      menuColor: searchParams.get("menuColor"),
      radius: searchParams.get("radius"),
--- a/apps/v4/app/(create)/init/route.ts
+++ b/apps/v4/app/(create)/init/route.ts
@@ -1,10 +1,11 @@
 import { NextResponse, type NextRequest } from "next/server"
 import { track } from "@vercel/analytics/server"
-import { encodePreset, isPresetCode } from "shadcn/preset"
+import { isPresetCode } from "shadcn/preset"
 import { registryItemSchema } from "shadcn/schema"

 import { buildRegistryBase } from "@/registry/config"
 import { parseDesignSystemConfig } from "@/app/(create)/init/parse-config"
+import { getPresetCode } from "@/app/(create)/lib/preset-code"

 export async function GET(request: NextRequest) {
  try {
@@ -15,21 +16,11 @@ export async function GET(request: NextRequest) {
      return NextResponse.json({ error: result.error }, { status: 400 })
    }

-    // Use the preset code from the URL if provided, otherwise encode one.
-    const presetParam = searchParams.get("preset")
+    const rawPreset = searchParams.get("preset")
    const presetCode =
-      presetParam && isPresetCode(presetParam)
-        ? presetParam
-        : encodePreset({
-            style: result.data.style,
-            baseColor: result.data.baseColor,
-            theme: result.data.theme,
-            iconLibrary: result.data.iconLibrary,
-            font: result.data.font,
-            radius: result.data.radius,
-            menuAccent: result.data.menuAccent,
-            menuColor: result.data.menuColor,
-          } as Parameters<typeof encodePreset>[0])
+      rawPreset && isPresetCode(rawPreset)
+        ? rawPreset
+        : getPresetCode(result.data)

    const registryBase = buildRegistryBase(result.data)
    const parseResult = registryItemSchema.safeParse(registryBase)
--- a/apps/v4/app/(create)/init/v0/route.ts
+++ b/apps/v4/app/(create)/init/v0/route.ts
@@ -1,7 +1,9 @@
 import { after, NextResponse, type NextRequest } from "next/server"
 import { track } from "@vercel/analytics/server"
+import { isPresetCode } from "shadcn/preset"

 import { parseDesignSystemConfig } from "@/app/(create)/init/parse-config"
+import { getPresetCode } from "@/app/(create)/lib/preset-code"
 import { buildV0Payload } from "@/app/(create)/lib/v0"

 export async function GET(request: NextRequest) {
@@ -13,11 +15,17 @@ export async function GET(request: NextRequest) {
      return NextResponse.json({ error: result.error }, { status: 400 })
    }

+    const rawPreset = searchParams.get("preset")
+    const presetCode =
+      rawPreset && isPresetCode(rawPreset)
+        ? rawPreset
+        : getPresetCode(result.data)
+
    // Defer analytics to after response is sent.
    after(() => {
      track("create_open_in_v0", {
        ...result.data,
-        preset: searchParams.get("preset") ?? "",
+        preset: presetCode,
      })
    })

--- a/apps/v4/app/(create)/lib/fonts.ts
+++ b/apps/v4/app/(create)/lib/fonts.ts
@@ -3,21 +3,37 @@ import {
  Figtree,
  Geist,
  Geist_Mono,
+  IBM_Plex_Sans,
+  Instrument_Sans,
  Inter,
  JetBrains_Mono,
  Lora,
+  Manrope,
  Merriweather,
+  Montserrat,
  Noto_Sans,
  Noto_Serif,
  Nunito_Sans,
  Outfit,
+  Oxanium,
  Playfair_Display,
  Public_Sans,
  Raleway,
  Roboto,
  Roboto_Slab,
+  Source_Sans_3,
+  Space_Grotesk,
 } from "next/font/google"

+import { FONT_DEFINITIONS, type FontName } from "@/lib/font-definitions"
+
+type PreviewFont = ReturnType<typeof Inter>
+
+const geistSans = Geist({
+  subsets: ["latin"],
+  variable: "--font-geist-sans",
+})
+
 const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
@@ -38,21 +54,6 @@ const figtree = Figtree({
  variable: "--font-figtree",
 })

-const jetbrainsMono = JetBrains_Mono({
-  subsets: ["latin"],
-  variable: "--font-jetbrains-mono",
-})
-
-const geistSans = Geist({
-  subsets: ["latin"],
-  variable: "--font-geist-sans",
-})
-
-const geistMono = Geist_Mono({
-  subsets: ["latin"],
-  variable: "--font-geist-mono",
-})
-
 const roboto = Roboto({
  subsets: ["latin"],
  variable: "--font-roboto",
@@ -78,6 +79,51 @@ const outfit = Outfit({
  variable: "--font-outfit",
 })

+const oxanium = Oxanium({
+  subsets: ["latin"],
+  variable: "--font-oxanium",
+})
+
+const manrope = Manrope({
+  subsets: ["latin"],
+  variable: "--font-manrope",
+})
+
+const spaceGrotesk = Space_Grotesk({
+  subsets: ["latin"],
+  variable: "--font-space-grotesk",
+})
+
+const montserrat = Montserrat({
+  subsets: ["latin"],
+  variable: "--font-montserrat",
+})
+
+const ibmPlexSans = IBM_Plex_Sans({
+  subsets: ["latin"],
+  variable: "--font-ibm-plex-sans",
+})
+
+const sourceSans3 = Source_Sans_3({
+  subsets: ["latin"],
+  variable: "--font-source-sans-3",
+})
+
+const instrumentSans = Instrument_Sans({
+  subsets: ["latin"],
+  variable: "--font-instrument-sans",
+})
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-jetbrains-mono",
+})
+
+const geistMono = Geist_Mono({
+  subsets: ["latin"],
+  variable: "--font-geist-mono",
+})
+
 const notoSerif = Noto_Serif({
  subsets: ["latin"],
  variable: "--font-noto-serif",
@@ -103,109 +149,85 @@ const playfairDisplay = Playfair_Display({
  variable: "--font-playfair-display",
 })

+const PREVIEW_FONTS = {
+  geist: geistSans,
+  inter,
+  "noto-sans": notoSans,
+  "nunito-sans": nunitoSans,
+  figtree,
+  roboto,
+  raleway,
+  "dm-sans": dmSans,
+  "public-sans": publicSans,
+  outfit,
+  oxanium,
+  manrope,
+  "space-grotesk": spaceGrotesk,
+  montserrat,
+  "ibm-plex-sans": ibmPlexSans,
+  "source-sans-3": sourceSans3,
+  "instrument-sans": instrumentSans,
+  "jetbrains-mono": jetbrainsMono,
+  "geist-mono": geistMono,
+  "noto-serif": notoSerif,
+  "roboto-slab": robotoSlab,
+  merriweather,
+  lora,
+  "playfair-display": playfairDisplay,
+} satisfies Record<FontName, PreviewFont>
+
+function createFontOption(name: FontName) {
+  const definition = FONT_DEFINITIONS.find((font) => font.name === name)
+
+  if (!definition) {
+    throw new Error(`Unknown font definition: ${name}`)
+  }
+
+  return {
+    name: definition.title,
+    value: definition.name,
+    font: PREVIEW_FONTS[name],
+    type: definition.type,
+  } as const
+}
+
 export const FONTS = [
-  {
-    name: "Geist",
-    value: "geist",
-    font: geistSans,
-    type: "sans",
-  },
-  {
-    name: "Inter",
-    value: "inter",
-    font: inter,
-    type: "sans",
-  },
-  {
-    name: "Noto Sans",
-    value: "noto-sans",
-    font: notoSans,
-    type: "sans",
-  },
-  {
-    name: "Nunito Sans",
-    value: "nunito-sans",
-    font: nunitoSans,
-    type: "sans",
-  },
-  {
-    name: "Figtree",
-    value: "figtree",
-    font: figtree,
-    type: "sans",
-  },
-  {
-    name: "Roboto",
-    value: "roboto",
-    font: roboto,
-    type: "sans",
-  },
-  {
-    name: "Raleway",
-    value: "raleway",
-    font: raleway,
-    type: "sans",
-  },
-  {
-    name: "DM Sans",
-    value: "dm-sans",
-    font: dmSans,
-    type: "sans",
-  },
-  {
-    name: "Public Sans",
-    value: "public-sans",
-    font: publicSans,
-    type: "sans",
-  },
-  {
-    name: "Outfit",
-    value: "outfit",
-    font: outfit,
-    type: "sans",
-  },
-  {
-    name: "Geist Mono",
-    value: "geist-mono",
-    font: geistMono,
-    type: "mono",
-  },
-  {
-    name: "JetBrains Mono",
-    value: "jetbrains-mono",
-    font: jetbrainsMono,
-    type: "mono",
-  },
-  {
-    name: "Noto Serif",
-    value: "noto-serif",
-    font: notoSerif,
-    type: "serif",
-  },
-  {
-    name: "Roboto Slab",
-    value: "roboto-slab",
-    font: robotoSlab,
-    type: "serif",
-  },
-  {
-    name: "Merriweather",
-    value: "merriweather",
-    font: merriweather,
-    type: "serif",
-  },
-  {
-    name: "Lora",
-    value: "lora",
-    font: lora,
-    type: "serif",
-  },
-  {
-    name: "Playfair Display",
-    value: "playfair-display",
-    font: playfairDisplay,
-    type: "serif",
-  },
+  createFontOption("geist"),
+  createFontOption("inter"),
+  createFontOption("noto-sans"),
+  createFontOption("nunito-sans"),
+  createFontOption("figtree"),
+  createFontOption("roboto"),
+  createFontOption("raleway"),
+  createFontOption("dm-sans"),
+  createFontOption("public-sans"),
+  createFontOption("outfit"),
+  createFontOption("oxanium"),
+  createFontOption("manrope"),
+  createFontOption("space-grotesk"),
+  createFontOption("montserrat"),
+  createFontOption("ibm-plex-sans"),
+  createFontOption("source-sans-3"),
+  createFontOption("instrument-sans"),
+  createFontOption("geist-mono"),
+  createFontOption("jetbrains-mono"),
+  createFontOption("noto-serif"),
+  createFontOption("roboto-slab"),
+  createFontOption("merriweather"),
+  createFontOption("lora"),
+  createFontOption("playfair-display"),
 ] as const

 export type Font = (typeof FONTS)[number]
+
+export const FONT_HEADING_OPTIONS = [
+  {
+    name: "Inherit",
+    value: "inherit",
+    font: null,
+    type: "default",
+  },
+  ...FONTS,
+] as const
+
+export type FontHeadingOption = (typeof FONT_HEADING_OPTIONS)[number]
--- a/apps/v4/app/(create)/lib/preset-code.ts
+++ b/apps/v4/app/(create)/lib/preset-code.ts
@@ -0,0 +1,34 @@
+import { encodePreset, type PresetConfig } from "shadcn/preset"
+
+import { type DesignSystemConfig } from "@/registry/config"
+
+type PresetCodeConfig = Pick<
+  DesignSystemConfig,
+  | "style"
+  | "baseColor"
+  | "theme"
+  | "chartColor"
+  | "iconLibrary"
+  | "font"
+  | "fontHeading"
+  | "radius"
+  | "menuAccent"
+  | "menuColor"
+>
+
+export function getPresetCode(config: PresetCodeConfig) {
+  const presetConfig: Partial<PresetConfig> = {
+    style: config.style as PresetConfig["style"],
+    baseColor: config.baseColor as PresetConfig["baseColor"],
+    theme: config.theme as PresetConfig["theme"],
+    chartColor: config.chartColor as PresetConfig["chartColor"],
+    iconLibrary: config.iconLibrary as PresetConfig["iconLibrary"],
+    font: config.font as PresetConfig["font"],
+    fontHeading: config.fontHeading as PresetConfig["fontHeading"],
+    radius: config.radius as PresetConfig["radius"],
+    menuAccent: config.menuAccent as PresetConfig["menuAccent"],
+    menuColor: config.menuColor as PresetConfig["menuColor"],
+  }
+
+  return encodePreset(presetConfig)
+}
--- a/apps/v4/app/(create)/lib/preset-query.test.ts
+++ b/apps/v4/app/(create)/lib/preset-query.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest"
+
+import { resolvePresetOverrides } from "./preset-query"
+
+describe("resolvePresetOverrides", () => {
+  it("prefers explicit fontHeading and chartColor query params", () => {
+    const overrides = resolvePresetOverrides(
+      new URLSearchParams("fontHeading=playfair-display&chartColor=emerald"),
+      {
+        theme: "neutral",
+        chartColor: "blue",
+        fontHeading: "inherit",
+      }
+    )
+
+    expect(overrides).toEqual({
+      fontHeading: "playfair-display",
+      chartColor: "emerald",
+    })
+  })
+
+  it("falls back to decoded preset values when no overrides are present", () => {
+    const overrides = resolvePresetOverrides(new URLSearchParams(), {
+      theme: "neutral",
+      chartColor: "blue",
+      fontHeading: "inherit",
+    })
+
+    expect(overrides).toEqual({
+      fontHeading: "inherit",
+      chartColor: "blue",
+    })
+  })
+})
--- a/apps/v4/app/(create)/lib/preset-query.ts
+++ b/apps/v4/app/(create)/lib/preset-query.ts
@@ -0,0 +1,30 @@
+import { V1_CHART_COLOR_MAP, type PresetConfig } from "shadcn/preset"
+
+import { type ChartColorName, type FontHeadingValue } from "@/registry/config"
+
+type SearchParamsLike = Pick<URLSearchParams, "get" | "has">
+
+export function resolvePresetOverrides(
+  searchParams: SearchParamsLike,
+  decoded: Pick<PresetConfig, "theme" | "chartColor" | "fontHeading">
+) {
+  const hasFontHeadingOverride = searchParams.has("fontHeading")
+  const hasChartColorOverride = searchParams.has("chartColor")
+
+  const fontHeading = hasFontHeadingOverride
+    ? ((searchParams.get("fontHeading") ??
+        decoded.fontHeading) as FontHeadingValue)
+    : decoded.fontHeading
+
+  const chartColor = hasChartColorOverride
+    ? ((searchParams.get("chartColor") ??
+        decoded.chartColor ??
+        V1_CHART_COLOR_MAP[decoded.theme] ??
+        decoded.theme) as ChartColorName)
+    : (decoded.chartColor ?? V1_CHART_COLOR_MAP[decoded.theme] ?? decoded.theme)
+
+  return {
+    fontHeading,
+    chartColor,
+  }
+}
--- a/apps/v4/app/(create)/lib/randomize-biases.ts
+++ b/apps/v4/app/(create)/lib/randomize-biases.ts
@@ -3,6 +3,7 @@ import type {
  BaseColorName,
  Radius,
  StyleName,
+  Theme,
  ThemeName,
 } from "@/registry/config"

@@ -12,6 +13,7 @@ export type RandomizeContext = {
  style?: StyleName
  baseColor?: BaseColorName
  theme?: ThemeName
+  chartColor?: string
  iconLibrary?: string
  font?: string
  menuAccent?: string
@@ -26,12 +28,30 @@ export type BiasFilter<T> = (

 export type RandomizeBiases = {
  baseColors?: BiasFilter<BaseColor>
+  chartColors?: BiasFilter<Theme>
  fonts?: BiasFilter<(typeof FONTS)[number]>
  radius?: BiasFilter<Radius>
-  // Add more bias filters as needed:
-  // styles?: BiasFilter<Style>
-  // themes?: BiasFilter<Theme>
-  // etc.
+}
+
+// Theme → chart color pairings for randomization.
+const CHART_COLOR_PAIRINGS: Record<string, string[]> = {
+  red: ["teal", "sky"],
+  orange: ["teal", "blue"],
+  amber: ["cyan", "indigo"],
+  yellow: ["sky", "violet"],
+  lime: ["indigo", "pink"],
+  green: ["purple", "rose"],
+  emerald: ["purple", "red"],
+  teal: ["fuchsia", "red"],
+  cyan: ["rose", "amber"],
+  sky: ["red", "yellow"],
+  blue: ["orange", "yellow"],
+  indigo: ["amber", "yellow"],
+  violet: ["yellow", "lime"],
+  purple: ["green", "lime"],
+  fuchsia: ["lime", "teal"],
+  pink: ["green", "cyan"],
+  rose: ["emerald", "sky"],
 }

 /**
@@ -51,21 +71,25 @@ export const RANDOMIZE_BIASES: RandomizeBiases = {
    return fonts
  },
  radius: (radii, context) => {
-    // When style is lyra, always use "none" radius
+    // When style is lyra, always use "none" radius.
    if (context.style === "lyra") {
      return radii.filter((radius) => radius.name === "none")
    }

    return radii
  },
-  // Add more biases here as needed:
-  // Example: When baseColor is "blue", prefer certain themes
-  // themes: (themes, context) => {
-  //   if (context.baseColor === "blue") {
-  //     return themes.filter(theme => theme.name.includes("dark"))
-  //   }
-  //   return themes
-  // },
+  chartColors: (chartColors, context) => {
+    // When theme has a pairing, restrict chart colors to the paired values.
+    const pairing = context.theme ? CHART_COLOR_PAIRINGS[context.theme] : null
+    if (pairing) {
+      const filtered = chartColors.filter((c) => pairing.includes(c.name))
+      if (filtered.length > 0) {
+        return filtered
+      }
+    }
+
+    return chartColors
+  },
 }

 /**
--- a/apps/v4/app/(create)/lib/search-params.ts
+++ b/apps/v4/app/(create)/lib/search-params.ts
@@ -1,4 +1,5 @@
 import * as React from "react"
+import { useSearchParams } from "next/navigation"
 import { useQueryStates } from "nuqs"
 import {
  createLoader,
@@ -10,12 +11,13 @@ import {
  type inferParserType,
  type Options,
 } from "nuqs/server"
-import { decodePreset, encodePreset, isPresetCode } from "shadcn/preset"
+import { decodePreset, isPresetCode } from "shadcn/preset"

 import {
  BASE_COLORS,
  BASES,
  DEFAULT_CONFIG,
+  getThemesForBaseColor,
  iconLibraries,
  MENU_ACCENTS,
  MENU_COLORS,
@@ -24,6 +26,8 @@ import {
  THEMES,
  type BaseColorName,
  type BaseName,
+  type ChartColorName,
+  type FontHeadingValue,
  type FontValue,
  type IconLibraryName,
  type MenuAccentValue,
@@ -33,9 +37,11 @@ import {
  type ThemeName,
 } from "@/registry/config"
 import { FONTS } from "@/app/(create)/lib/fonts"
+import { getPresetCode } from "@/app/(create)/lib/preset-code"
+import { resolvePresetOverrides } from "@/app/(create)/lib/preset-query"

 const designSystemSearchParams = {
-  preset: parseAsString.withDefault("a0"),
+  preset: parseAsString.withDefault("b0"),
  base: parseAsStringLiteral<BaseName>(BASES.map((b) => b.name)).withDefault(
    DEFAULT_CONFIG.base
  ),
@@ -49,9 +55,16 @@ const designSystemSearchParams = {
  theme: parseAsStringLiteral<ThemeName>(THEMES.map((t) => t.name)).withDefault(
    DEFAULT_CONFIG.theme
  ),
+  chartColor: parseAsStringLiteral<ChartColorName>(
+    THEMES.map((t) => t.name)
+  ).withDefault(DEFAULT_CONFIG.chartColor ?? "neutral"),
  font: parseAsStringLiteral<FontValue>(FONTS.map((f) => f.value)).withDefault(
    DEFAULT_CONFIG.font
  ),
+  fontHeading: parseAsStringLiteral<FontHeadingValue>([
+    "inherit",
+    ...FONTS.map((f) => f.value),
+  ]).withDefault(DEFAULT_CONFIG.fontHeading),
  baseColor: parseAsStringLiteral<BaseColorName>(
    BASE_COLORS.map((b) => b.name)
  ).withDefault(DEFAULT_CONFIG.baseColor),
@@ -87,13 +100,24 @@ const DESIGN_SYSTEM_KEYS = [
  "style",
  "baseColor",
  "theme",
+  "chartColor",
  "iconLibrary",
  "font",
+  "fontHeading",
  "radius",
  "menuAccent",
  "menuColor",
 ] as const

+function normalizeFontHeading(
+  font: FontValue,
+  fontHeading: FontHeadingValue
+): FontHeadingValue {
+  // Persist "same as body" as an explicit inherit sentinel so the body font
+  // can change later without freezing headings to a concrete previous value.
+  return fontHeading === font ? "inherit" : fontHeading
+}
+
 // Non-design-system keys that get passed through as-is.
 // `base` is not encoded in preset codes — it's an architectural choice, not visual.
 const NON_DESIGN_SYSTEM_KEYS = [
@@ -145,39 +169,83 @@ function normalizePartialDesignSystemParams(
 function normalizeDesignSystemParams(
  params: DesignSystemSearchParams
 ): DesignSystemSearchParams {
+  let result = {
+    ...params,
+    fontHeading: normalizeFontHeading(params.font, params.fontHeading),
+  }
+
+  // Validate theme and chartColor against baseColor.
+  if (result.baseColor) {
+    const available = getThemesForBaseColor(result.baseColor)
+    const themeValid = available.some((t) => t.name === result.theme)
+    const chartColorValid = available.some((t) => t.name === result.chartColor)
+
+    if (!themeValid || !chartColorValid) {
+      const fallback = (available[0]?.name ?? result.baseColor) as ThemeName
+      result = {
+        ...result,
+        ...(!themeValid && { theme: fallback }),
+        ...(!chartColorValid && { chartColor: fallback as ChartColorName }),
+      }
+    }
+  }
+
  if (
-    params.menuAccent === "bold" &&
-    isTranslucentMenuColor(params.menuColor)
+    result.menuAccent === "bold" &&
+    isTranslucentMenuColor(result.menuColor)
  ) {
    return {
-      ...params,
+      ...result,
      menuAccent: "subtle",
    }
  }

-  return params
+  return result
+}
+
+// If preset param exists, decode it and overlay on raw params.
+// V1 presets don't encode chartColor — fall back to the colored
+// theme that base-color themes originally borrowed charts from.
+type SearchParamsLike = Pick<URLSearchParams, "get" | "has">
+
+function resolvePresetParams(
+  rawParams: DesignSystemSearchParams,
+  searchParams: SearchParamsLike
+) {
+  if (rawParams.preset && isPresetCode(rawParams.preset)) {
+    const decoded = decodePreset(rawParams.preset)
+    if (decoded) {
+      const presetOverrides = resolvePresetOverrides(searchParams, decoded)
+      return normalizeDesignSystemParams({
+        ...decoded,
+        ...presetOverrides,
+        base: rawParams.base,
+        item: rawParams.item,
+        preset: rawParams.preset,
+        template: rawParams.template,
+        rtl: rawParams.rtl,
+        size: rawParams.size,
+        custom: rawParams.custom,
+      })
+    }
+  }
+  return normalizeDesignSystemParams(rawParams)
 }

 // Wraps nuqs useQueryStates with transparent preset encoding/decoding.
 // - Reads: if ?preset=CODE is in the URL, decodes it and returns individual values.
 // - Writes: when design system params are set, encodes them into a preset code.
 export function useDesignSystemSearchParams(options: Options = {}) {
+  const searchParams = useSearchParams()
  const [rawParams, rawSetParams] = useQueryStates(designSystemSearchParams, {
    shallow: false,
    history: "push",
    ...options,
  })

-  // If preset param exists, decode it and overlay on raw params.
  const params = React.useMemo(
-    () =>
-      rawParams.preset && isPresetCode(rawParams.preset)
-        ? normalizeDesignSystemParams({
-            ...rawParams,
-            ...(decodePreset(rawParams.preset) ?? {}),
-          })
-        : normalizeDesignSystemParams(rawParams),
-    [rawParams]
+    () => resolvePresetParams(rawParams, searchParams),
+    [rawParams, searchParams]
  )

  // Use ref so setParams callback stays stable across renders.
@@ -215,21 +283,10 @@ export function useDesignSystemSearchParams(options: Options = {}) {
        ...paramsRef.current,
        ...resolvedUpdates,
      })
-
      // Encode design system fields into a preset code.
      // Cast needed: merged values may include null from nuqs resets,
      // but encodePreset handles missing values by falling back to defaults.
-      const code = encodePreset({
-        style: merged.style ?? undefined,
-        baseColor: merged.baseColor ?? undefined,
-        theme: merged.theme ?? undefined,
-        iconLibrary: merged.iconLibrary ?? undefined,
-        font: merged.font ?? undefined,
-        radius: merged.radius ?? undefined,
-        menuAccent: merged.menuAccent ?? undefined,
-        menuColor: merged.menuColor ?? undefined,
-      } as Parameters<typeof encodePreset>[0])
-
+      const code = getPresetCode(merged)
      // Build update: set preset, clear individual DS params from URL.
      const rawUpdate: Record<string, unknown> = { preset: code }
      for (const key of DESIGN_SYSTEM_KEYS) {
--- a/apps/v4/app/(create)/lib/templates.ts
+++ b/apps/v4/app/(create)/lib/templates.ts
@@ -7,7 +7,7 @@ export const TEMPLATES = [
  {
    value: "vite",
    title: "Vite",
-    logo: '<svg xmlns="http://www.w3.org/2000/svg" width="410" height="404" fill="none" viewBox="0 0 410 404"><path fill="var(--foreground)" d="m399.641 59.525-183.998 329.02c-3.799 6.793-13.559 6.833-17.415.073L10.582 59.556C6.38 52.19 12.68 43.266 21.028 44.76l184.195 32.923c1.175.21 2.378.208 3.553-.006l180.343-32.87c8.32-1.517 14.649 7.337 10.522 14.719"/><path fill="var(--background)" d="M292.965 1.574 156.801 28.255a5 5 0 0 0-4.03 4.611l-8.376 141.464c-.197 3.332 2.863 5.918 6.115 5.168l37.91-8.749c3.547-.818 6.752 2.306 6.023 5.873l-11.263 55.153c-.758 3.712 2.727 6.886 6.352 5.785l23.415-7.114c3.63-1.102 7.118 2.081 6.35 5.796l-17.899 86.633c-1.12 5.419 6.088 8.374 9.094 3.728l2.008-3.103 110.954-221.428c1.858-3.707-1.346-7.935-5.418-7.15l-39.022 7.532c-3.667.707-6.787-2.708-5.752-6.296l25.469-88.291c1.036-3.594-2.095-7.012-5.766-6.293"/></svg>',
+    logo: '<svg xmlns="http://www.w3.org/2000/svg" width="410" height="404" fill="none" viewBox="0 0 410 404"><path fill="var(--foreground)" d="m399.641 59.525-183.998 329.02c-3.799 6.793-13.559 6.833-17.415.073L10.582 59.556C6.38 52.19 12.68 43.266 21.028 44.76l184.195 32.923c1.175.21 2.378.208 3.553-.006l180.343-32.87c8.32-1.517 14.649 7.337 10.522 14.719"/><path fill="var(--color-neutral-800)" d="M292.965 1.574 156.801 28.255a5 5 0 0 0-4.03 4.611l-8.376 141.464c-.197 3.332 2.863 5.918 6.115 5.168l37.91-8.749c3.547-.818 6.752 2.306 6.023 5.873l-11.263 55.153c-.758 3.712 2.727 6.886 6.352 5.785l23.415-7.114c3.63-1.102 7.118 2.081 6.35 5.796l-17.899 86.633c-1.12 5.419 6.088 8.374 9.094 3.728l2.008-3.103 110.954-221.428c1.858-3.707-1.346-7.935-5.418-7.15l-39.022 7.532c-3.667.707-6.787-2.708-5.752-6.296l25.469-88.291c1.036-3.594-2.095-7.012-5.766-6.293"/></svg>',
  },
  {
    value: "start",
--- a/apps/v4/app/(create)/lib/v0.test.ts
+++ b/apps/v4/app/(create)/lib/v0.test.ts
@@ -0,0 +1,115 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+
+import { DEFAULT_CONFIG } from "@/registry/config"
+import { buildV0Payload } from "@/app/(create)/lib/v0"
+
+vi.mock("shadcn/schema", async () => {
+  return await vi.importActual("shadcn/schema")
+})
+
+vi.mock("shadcn/utils", async () => {
+  const actual = (await vi.importActual("shadcn/utils")) as {
+    transformFont: unknown
+  }
+
+  return {
+    transformFont: actual.transformFont,
+    transformIcons: async ({ sourceFile }: { sourceFile: unknown }) =>
+      sourceFile,
+    transformMenu: async ({ sourceFile }: { sourceFile: unknown }) =>
+      sourceFile,
+    transformRender: async ({ sourceFile }: { sourceFile: unknown }) =>
+      sourceFile,
+  }
+})
+
+vi.mock("@/registry/bases/__index__", () => ({
+  Index: {
+    base: {
+      card: {
+        name: "card",
+        type: "registry:ui",
+      },
+    },
+    radix: {
+      card: {
+        name: "card",
+        type: "registry:ui",
+      },
+    },
+  },
+}))
+
+describe("buildV0Payload", () => {
+  beforeEach(() => {
+    process.env.NEXT_PUBLIC_APP_URL = "http://example.test"
+
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (input: string | URL | Request) => {
+        const url =
+          typeof input === "string"
+            ? input
+            : input instanceof URL
+              ? input.toString()
+              : input.url
+        const name = url.split("/").pop()?.replace(".json", "") ?? "component"
+
+        return new Response(
+          JSON.stringify({
+            name,
+            type: "registry:ui",
+            files: [
+              {
+                path: `registry/base-nova/ui/${name}.tsx`,
+                type: "registry:ui",
+                content: `import * as React from "react"\n\nexport function Component() {\n  return <div className="cn-font-heading text-xl" />\n}\n`,
+              },
+            ],
+          }),
+          {
+            status: 200,
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        )
+      })
+    )
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    delete process.env.NEXT_PUBLIC_APP_URL
+  })
+
+  it("rewrites cn-font-heading to font-heading when heading inherits the body font", async () => {
+    const payload = await buildV0Payload({
+      ...DEFAULT_CONFIG,
+      item: undefined,
+      fontHeading: "inherit",
+    })
+
+    const cardFile = payload.files?.find(
+      (file) => file.target === "components/ui/card.tsx"
+    )
+
+    expect(cardFile?.content).toContain("font-heading")
+    expect(cardFile?.content).not.toContain("cn-font-heading")
+  })
+
+  it("rewrites cn-font-heading to font-heading when a distinct heading font is selected", async () => {
+    const payload = await buildV0Payload({
+      ...DEFAULT_CONFIG,
+      item: undefined,
+      fontHeading: "playfair-display",
+    })
+
+    const cardFile = payload.files?.find(
+      (file) => file.target === "components/ui/card.tsx"
+    )
+
+    expect(cardFile?.content).toContain("font-heading")
+    expect(cardFile?.content).not.toContain("cn-font-heading")
+  })
+})
--- a/apps/v4/app/(create)/lib/v0.ts
+++ b/apps/v4/app/(create)/lib/v0.ts
@@ -5,19 +5,28 @@ import {
  type configSchema,
  type RegistryItem,
 } from "shadcn/schema"
-import { transformIcons, transformMenu, transformRender } from "shadcn/utils"
-import { Project, ScriptKind } from "ts-morph"
+import {
+  transformFont,
+  transformIcons,
+  transformMenu,
+  transformRender,
+} from "shadcn/utils"
+import { Project, ScriptKind, type SourceFile } from "ts-morph"
 import { z } from "zod"

 import {
  buildRegistryBase,
-  fonts,
+  getBodyFont,
+  getHeadingFont,
+  getInheritedHeadingFontValue,
  type DesignSystemConfig,
 } from "@/registry/config"

 const { Index } = await import("@/registry/bases/__index__")

-const THEME_INLINE = `--font-sans: var(--font-sans);
+function buildThemeInline(fontHeadingValue: string) {
+  return `--font-sans: var(--font-sans);
+  --font-heading: ${fontHeadingValue};
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);
  --color-background: var(--background);
@@ -59,6 +68,7 @@ const THEME_INLINE = `--font-sans: var(--font-sans);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);`
+}

 // Static file — parsed once at module level.
 const themeProviderFile = registryItemFileSchema.parse({
@@ -148,7 +158,20 @@ const ALIASES = {
  hooks: "@/hooks",
 } as const

-const transformers = [transformIcons, transformMenu, transformRender]
+type V0Transformer = (opts: {
+  filename: string
+  raw: string
+  sourceFile: SourceFile
+  config: z.infer<typeof configSchema>
+  supportedFontMarkers?: string[]
+}) => Promise<unknown>
+
+const transformers: V0Transformer[] = [
+  transformIcons as V0Transformer,
+  transformMenu as V0Transformer,
+  transformRender as V0Transformer,
+  transformFont as V0Transformer,
+]

 function getStyle(designSystemConfig: DesignSystemConfig) {
  return `${designSystemConfig.base}-${designSystemConfig.style}`
@@ -156,10 +179,18 @@ function getStyle(designSystemConfig: DesignSystemConfig) {

 export async function buildV0Payload(designSystemConfig: DesignSystemConfig) {
  const registryBase = buildRegistryBase(designSystemConfig)
+  const normalizedFontHeading =
+    designSystemConfig.fontHeading === designSystemConfig.font
+      ? "inherit"
+      : designSystemConfig.fontHeading

  // Only buildComponentFiles is async — run sync builders directly.
-  const globalsCss = buildGlobalsCss(registryBase)
-  const layoutFile = buildLayoutFile(designSystemConfig)
+  const globalsCss = buildGlobalsCss(
+    registryBase,
+    designSystemConfig.font,
+    normalizedFontHeading
+  )
+  const layoutFile = buildLayoutFile(designSystemConfig, normalizedFontHeading)
  const componentFiles = await buildComponentFiles(designSystemConfig)

  const dependencies = [...(registryBase.dependencies ?? []), "next-themes"]
@@ -181,7 +212,11 @@ export async function buildV0Payload(designSystemConfig: DesignSystemConfig) {
  })
 }

-function buildGlobalsCss(registryBase: RegistryItem) {
+function buildGlobalsCss(
+  registryBase: RegistryItem,
+  font: DesignSystemConfig["font"],
+  fontHeading: DesignSystemConfig["fontHeading"]
+) {
  const lightVars = Object.entries(registryBase.cssVars?.light ?? {})
    .map(([key, value]) => `  --${key}: ${value};`)
    .join("\n")
@@ -197,7 +232,11 @@ function buildGlobalsCss(registryBase: RegistryItem) {
  @custom-variant dark (&:is(.dark *));

  @theme inline {
-  ${THEME_INLINE}
+  ${buildThemeInline(
+    fontHeading === "inherit"
+      ? getInheritedHeadingFontValue(font)
+      : "var(--font-heading)"
+  )}
  }

 :root {
@@ -332,18 +371,23 @@ function buildPackageJson(dependencies: string[]) {
  })
 }

-function buildLayoutFile(designSystemConfig: DesignSystemConfig) {
-  const font = fonts.find(
-    (font) => font.name === `font-${designSystemConfig.font}`
-  )
+function buildLayoutFile(
+  designSystemConfig: DesignSystemConfig,
+  fontHeading: DesignSystemConfig["fontHeading"]
+) {
+  const font = getBodyFont(designSystemConfig.font)
  if (!font) {
    throw new Error(`Font "${designSystemConfig.font}" not found`)
  }

+  const headingFont =
+    fontHeading === "inherit" ? undefined : getHeadingFont(fontHeading)
+
  // Derive const name from the font's CSS variable (e.g. --font-sans → fontSans).
  const constName = font.font.variable
    .replace(/^--/, "")
    .replace(/-./g, (m) => m[1].toUpperCase())
+  const headingConstName = "fontHeading"

  // Add font-serif or font-mono class to body when needed. Sans is the default.
  const fontClass =
@@ -354,14 +398,26 @@ function buildLayoutFile(designSystemConfig: DesignSystemConfig) {
        : ""

  const bodyClassName = fontClass ? `antialiased ${fontClass}` : "antialiased"
+  const imports = headingFont
+    ? Array.from(new Set([font.font.import, headingFont.font.import])).join(
+        ", "
+      )
+    : font.font.import
+  const headingDeclaration = headingFont
+    ? `\nconst ${headingConstName} = ${headingFont.font.import}({subsets:['latin'],variable:'${headingFont.font.variable}'});\n`
+    : ""
+  const htmlClassName = headingFont
+    ? `{${constName}.variable + " " + ${headingConstName}.variable}`
+    : `{${constName}.variable}`

  const content = dedent`
    import type { Metadata } from "next";
-    import { ${font.font.import} } from "next/font/google";
+    import { ${imports} } from "next/font/google";
    import "./globals.css";
    import { ThemeProvider } from "@/components/theme-provider";

    const ${constName} = ${font.font.import}({subsets:['latin'],variable:'${font.font.variable}'});
+    ${headingDeclaration}

    export const metadata: Metadata = {
      title: "Create Next App",
@@ -374,7 +430,7 @@ function buildLayoutFile(designSystemConfig: DesignSystemConfig) {
      children: React.ReactNode;
    }>) {
      return (
-        <html lang="en" suppressHydrationWarning className={${constName}.variable}>
+        <html lang="en" suppressHydrationWarning className=${htmlClassName}>
          <body
            className="${bodyClassName}"
          >
@@ -401,13 +457,14 @@ async function buildComponentFiles(designSystemConfig: DesignSystemConfig) {
  // Build config once for all components.
  const config = buildTransformConfig(designSystemConfig)

-  // Fetch UI components and the item component in parallel.
-  const [registryItemFiles, itemComponentFile] = await Promise.all([
+  // Fetch UI components, the demo, and the item component in parallel.
+  const [registryItemFiles, demoFile, itemComponentFile] = await Promise.all([
    Promise.all(
      allItemsForBase.map((name) =>
        getRegistryItemFile(name, designSystemConfig, config)
      )
    ),
+    getRegistryItemFile("demo", designSystemConfig, config),
    designSystemConfig.item
      ? getRegistryItemFile(designSystemConfig.item, designSystemConfig, config)
      : null,
@@ -415,29 +472,24 @@ async function buildComponentFiles(designSystemConfig: DesignSystemConfig) {

  const files = [...registryItemFiles.filter(Boolean)]

+  // Include the demo component.
+  if (demoFile) {
+    files.push({
+      ...demoFile,
+      target: "components/demo.tsx",
+      type: "registry:component",
+    })
+  }
+
  const pageFile = {
    path: "app/page.tsx",
    type: "registry:page",
    target: "app/page.tsx",
    content: dedent`
-      import { Button } from "@/components/ui/button"
+      import { Demo } from "@/components/demo"

      export default function Page() {
-        return (
-          <div className="flex min-h-svh p-6">
-            <div className="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
-              <div>
-                <h1 className="font-medium">Project ready!</h1>
-                <p>You may now add components and start building.</p>
-                <p>We&apos;ve already added the button component for you.</p>
-                <Button className="mt-2">Button</Button>
-              </div>
-              <div className="font-mono text-xs text-muted-foreground">
-                (Press <kbd>d</kbd> to toggle dark mode)
-              </div>
-            </div>
-          </div>
-        )
+        return <Demo />
      }
    `,
  }
@@ -557,6 +609,7 @@ async function transformFileContent(
      raw: content,
      sourceFile,
      config,
+      supportedFontMarkers: ["cn-font-heading"],
    })
  }

--- a/apps/v4/examples/base/ui-rtl/alert-dialog.tsx
+++ b/apps/v4/examples/base/ui-rtl/alert-dialog.tsx
@@ -116,7 +116,7 @@ function AlertDialogTitle({
    <AlertDialogPrimitive.Title
      data-slot="alert-dialog-title"
      className={cn(
-        "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        "cn-font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
        className
      )}
      {...props}
--- a/apps/v4/examples/base/ui-rtl/alert.tsx
+++ b/apps/v4/examples/base/ui-rtl/alert.tsx
@@ -38,7 +38,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="alert-title"
      className={cn(
-        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        "cn-font-heading font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
        className
      )}
      {...props}
--- a/apps/v4/examples/base/ui-rtl/card.tsx
+++ b/apps/v4/examples/base/ui-rtl/card.tsx
@@ -37,7 +37,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="card-title"
      className={cn(
-        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        "cn-font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
        className
      )}
      {...props}
--- a/apps/v4/examples/base/ui-rtl/dialog.tsx
+++ b/apps/v4/examples/base/ui-rtl/dialog.tsx
@@ -119,7 +119,10 @@ function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
-      className={cn("text-base leading-none font-medium", className)}
+      className={cn(
+        "cn-font-heading text-base leading-none font-medium",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/examples/base/ui-rtl/drawer.tsx
+++ b/apps/v4/examples/base/ui-rtl/drawer.tsx
@@ -97,7 +97,10 @@ function DrawerTitle({
  return (
    <DrawerPrimitive.Title
      data-slot="drawer-title"
-      className={cn("text-base font-medium text-foreground", className)}
+      className={cn(
+        "cn-font-heading text-base font-medium text-foreground",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/examples/base/ui-rtl/empty.tsx
+++ b/apps/v4/examples/base/ui-rtl/empty.tsx
@@ -58,7 +58,10 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="empty-title"
-      className={cn("text-sm font-medium tracking-tight", className)}
+      className={cn(
+        "cn-font-heading text-sm font-medium tracking-tight",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/examples/base/ui-rtl/item.tsx
+++ b/apps/v4/examples/base/ui-rtl/item.tsx
@@ -129,7 +129,7 @@ function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="item-title"
      className={cn(
-        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        "cn-font-heading line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
        className
      )}
      {...props}
--- a/apps/v4/examples/base/ui-rtl/popover.tsx
+++ b/apps/v4/examples/base/ui-rtl/popover.tsx
@@ -60,7 +60,7 @@ function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
  return (
    <PopoverPrimitive.Title
      data-slot="popover-title"
-      className={cn("font-medium", className)}
+      className={cn("cn-font-heading font-medium", className)}
      {...props}
    />
  )
--- a/apps/v4/examples/base/ui-rtl/sheet.tsx
+++ b/apps/v4/examples/base/ui-rtl/sheet.tsx
@@ -102,7 +102,10 @@ function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
-      className={cn("text-base font-medium text-foreground", className)}
+      className={cn(
+        "cn-font-heading text-base font-medium text-foreground",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/examples/base/ui/alert-dialog.tsx
+++ b/apps/v4/examples/base/ui/alert-dialog.tsx
@@ -116,7 +116,7 @@ function AlertDialogTitle({
    <AlertDialogPrimitive.Title
      data-slot="alert-dialog-title"
      className={cn(
-        "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        "cn-font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
        className
      )}
      {...props}
--- a/apps/v4/examples/base/ui/alert.tsx
+++ b/apps/v4/examples/base/ui/alert.tsx
@@ -38,7 +38,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="alert-title"
      className={cn(
-        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        "cn-font-heading font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
        className
      )}
      {...props}
--- a/apps/v4/examples/base/ui/card.tsx
+++ b/apps/v4/examples/base/ui/card.tsx
@@ -37,7 +37,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="card-title"
      className={cn(
-        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        "cn-font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
        className
      )}
      {...props}
--- a/apps/v4/examples/base/ui/dialog.tsx
+++ b/apps/v4/examples/base/ui/dialog.tsx
@@ -119,7 +119,10 @@ function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
-      className={cn("text-base leading-none font-medium", className)}
+      className={cn(
+        "cn-font-heading text-base leading-none font-medium",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/examples/base/ui/drawer.tsx
+++ b/apps/v4/examples/base/ui/drawer.tsx
@@ -97,7 +97,10 @@ function DrawerTitle({
  return (
    <DrawerPrimitive.Title
      data-slot="drawer-title"
-      className={cn("text-base font-medium text-foreground", className)}
+      className={cn(
+        "cn-font-heading text-base font-medium text-foreground",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/examples/base/ui/empty.tsx
+++ b/apps/v4/examples/base/ui/empty.tsx
@@ -58,7 +58,10 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="empty-title"
-      className={cn("text-sm font-medium tracking-tight", className)}
+      className={cn(
+        "cn-font-heading text-sm font-medium tracking-tight",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/examples/base/ui/item.tsx
+++ b/apps/v4/examples/base/ui/item.tsx
@@ -129,7 +129,7 @@ function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="item-title"
      className={cn(
-        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        "cn-font-heading line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
        className
      )}
      {...props}
--- a/apps/v4/examples/base/ui/popover.tsx
+++ b/apps/v4/examples/base/ui/popover.tsx
@@ -60,7 +60,7 @@ function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
  return (
    <PopoverPrimitive.Title
      data-slot="popover-title"
-      className={cn("font-medium", className)}
+      className={cn("cn-font-heading font-medium", className)}
      {...props}
    />
  )
--- a/apps/v4/examples/base/ui/sheet.tsx
+++ b/apps/v4/examples/base/ui/sheet.tsx
@@ -102,7 +102,10 @@ function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
-      className={cn("text-base font-medium text-foreground", className)}
+      className={cn(
+        "cn-font-heading text-base font-medium text-foreground",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/examples/radix/ui-rtl/alert-dialog.tsx
+++ b/apps/v4/examples/radix/ui-rtl/alert-dialog.tsx
@@ -122,7 +122,7 @@ function AlertDialogTitle({
    <AlertDialogPrimitive.Title
      data-slot="alert-dialog-title"
      className={cn(
-        "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        "cn-font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
        className
      )}
      {...props}
--- a/apps/v4/examples/radix/ui-rtl/alert.tsx
+++ b/apps/v4/examples/radix/ui-rtl/alert.tsx
@@ -38,7 +38,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="alert-title"
      className={cn(
-        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        "cn-font-heading font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
        className
      )}
      {...props}
--- a/apps/v4/examples/radix/ui-rtl/card.tsx
+++ b/apps/v4/examples/radix/ui-rtl/card.tsx
@@ -37,7 +37,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="card-title"
      className={cn(
-        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        "cn-font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
        className
      )}
      {...props}
--- a/apps/v4/examples/radix/ui-rtl/dialog.tsx
+++ b/apps/v4/examples/radix/ui-rtl/dialog.tsx
@@ -127,7 +127,10 @@ function DialogTitle({
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
-      className={cn("text-base leading-none font-medium", className)}
+      className={cn(
+        "cn-font-heading text-base leading-none font-medium",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/examples/radix/ui-rtl/drawer.tsx
+++ b/apps/v4/examples/radix/ui-rtl/drawer.tsx
@@ -97,7 +97,10 @@ function DrawerTitle({
  return (
    <DrawerPrimitive.Title
      data-slot="drawer-title"
-      className={cn("text-base font-medium text-foreground", className)}
+      className={cn(
+        "cn-font-heading text-base font-medium text-foreground",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/examples/radix/ui-rtl/empty.tsx
+++ b/apps/v4/examples/radix/ui-rtl/empty.tsx
@@ -58,7 +58,10 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="empty-title"
-      className={cn("text-sm font-medium tracking-tight", className)}
+      className={cn(
+        "cn-font-heading text-sm font-medium tracking-tight",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/examples/radix/ui-rtl/item.tsx
+++ b/apps/v4/examples/radix/ui-rtl/item.tsx
@@ -124,7 +124,7 @@ function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="item-title"
      className={cn(
-        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        "cn-font-heading line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
        className
      )}
      {...props}
--- a/apps/v4/examples/radix/ui-rtl/popover.tsx
+++ b/apps/v4/examples/radix/ui-rtl/popover.tsx
@@ -58,7 +58,7 @@ function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
  return (
    <div
      data-slot="popover-title"
-      className={cn("font-medium", className)}
+      className={cn("cn-font-heading font-medium", className)}
      {...props}
    />
  )
--- a/apps/v4/examples/radix/ui-rtl/sheet.tsx
+++ b/apps/v4/examples/radix/ui-rtl/sheet.tsx
@@ -111,7 +111,10 @@ function SheetTitle({
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
-      className={cn("text-base font-medium text-foreground", className)}
+      className={cn(
+        "cn-font-heading text-base font-medium text-foreground",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/examples/radix/ui/alert-dialog.tsx
+++ b/apps/v4/examples/radix/ui/alert-dialog.tsx
@@ -122,7 +122,7 @@ function AlertDialogTitle({
    <AlertDialogPrimitive.Title
      data-slot="alert-dialog-title"
      className={cn(
-        "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        "cn-font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
        className
      )}
      {...props}
--- a/apps/v4/examples/radix/ui/alert.tsx
+++ b/apps/v4/examples/radix/ui/alert.tsx
@@ -38,7 +38,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="alert-title"
      className={cn(
-        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        "cn-font-heading font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
        className
      )}
      {...props}
--- a/apps/v4/examples/radix/ui/card.tsx
+++ b/apps/v4/examples/radix/ui/card.tsx
@@ -37,7 +37,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="card-title"
      className={cn(
-        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        "cn-font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
        className
      )}
      {...props}
--- a/apps/v4/examples/radix/ui/dialog.tsx
+++ b/apps/v4/examples/radix/ui/dialog.tsx
@@ -127,7 +127,10 @@ function DialogTitle({
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
-      className={cn("text-base leading-none font-medium", className)}
+      className={cn(
+        "cn-font-heading text-base leading-none font-medium",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/examples/radix/ui/drawer.tsx
+++ b/apps/v4/examples/radix/ui/drawer.tsx
@@ -97,7 +97,10 @@ function DrawerTitle({
  return (
    <DrawerPrimitive.Title
      data-slot="drawer-title"
-      className={cn("text-base font-medium text-foreground", className)}
+      className={cn(
+        "cn-font-heading text-base font-medium text-foreground",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/examples/radix/ui/empty.tsx
+++ b/apps/v4/examples/radix/ui/empty.tsx
@@ -58,7 +58,10 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="empty-title"
-      className={cn("text-sm font-medium tracking-tight", className)}
+      className={cn(
+        "cn-font-heading text-sm font-medium tracking-tight",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/examples/radix/ui/item.tsx
+++ b/apps/v4/examples/radix/ui/item.tsx
@@ -124,7 +124,7 @@ function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="item-title"
      className={cn(
-        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        "cn-font-heading line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
        className
      )}
      {...props}
--- a/apps/v4/examples/radix/ui/popover.tsx
+++ b/apps/v4/examples/radix/ui/popover.tsx
@@ -58,7 +58,7 @@ function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
  return (
    <div
      data-slot="popover-title"
-      className={cn("font-medium", className)}
+      className={cn("cn-font-heading font-medium", className)}
      {...props}
    />
  )
--- a/apps/v4/examples/radix/ui/sheet.tsx
+++ b/apps/v4/examples/radix/ui/sheet.tsx
@@ -111,7 +111,10 @@ function SheetTitle({
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
-      className={cn("text-base font-medium text-foreground", className)}
+      className={cn(
+        "cn-font-heading text-base font-medium text-foreground",
+        className
+      )}
      {...props}
    />
  )
--- a/apps/v4/lib/font-definitions.ts
+++ b/apps/v4/lib/font-definitions.ts
@@ -0,0 +1,306 @@
+export type FontDefinition = {
+  name: string
+  title: string
+  type: "sans" | "mono" | "serif"
+  family: string
+  registryVariable: "--font-sans" | "--font-mono" | "--font-serif"
+  previewVariable: string
+  provider: "google"
+  import: string
+  dependency: string
+  subsets: readonly string[]
+  weight?: readonly string[]
+}
+
+export const FONT_DEFINITIONS = [
+  {
+    name: "geist",
+    title: "Geist",
+    type: "sans",
+    family: "'Geist Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-geist-sans",
+    provider: "google",
+    import: "Geist",
+    dependency: "@fontsource-variable/geist",
+    subsets: ["latin"],
+  },
+  {
+    name: "inter",
+    title: "Inter",
+    type: "sans",
+    family: "'Inter Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-inter",
+    provider: "google",
+    import: "Inter",
+    dependency: "@fontsource-variable/inter",
+    subsets: ["latin"],
+  },
+  {
+    name: "noto-sans",
+    title: "Noto Sans",
+    type: "sans",
+    family: "'Noto Sans Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-noto-sans",
+    provider: "google",
+    import: "Noto_Sans",
+    dependency: "@fontsource-variable/noto-sans",
+    subsets: ["latin"],
+  },
+  {
+    name: "nunito-sans",
+    title: "Nunito Sans",
+    type: "sans",
+    family: "'Nunito Sans Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-nunito-sans",
+    provider: "google",
+    import: "Nunito_Sans",
+    dependency: "@fontsource-variable/nunito-sans",
+    subsets: ["latin"],
+  },
+  {
+    name: "figtree",
+    title: "Figtree",
+    type: "sans",
+    family: "'Figtree Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-figtree",
+    provider: "google",
+    import: "Figtree",
+    dependency: "@fontsource-variable/figtree",
+    subsets: ["latin"],
+  },
+  {
+    name: "roboto",
+    title: "Roboto",
+    type: "sans",
+    family: "'Roboto Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-roboto",
+    provider: "google",
+    import: "Roboto",
+    dependency: "@fontsource-variable/roboto",
+    subsets: ["latin"],
+  },
+  {
+    name: "raleway",
+    title: "Raleway",
+    type: "sans",
+    family: "'Raleway Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-raleway",
+    provider: "google",
+    import: "Raleway",
+    dependency: "@fontsource-variable/raleway",
+    subsets: ["latin"],
+  },
+  {
+    name: "dm-sans",
+    title: "DM Sans",
+    type: "sans",
+    family: "'DM Sans Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-dm-sans",
+    provider: "google",
+    import: "DM_Sans",
+    dependency: "@fontsource-variable/dm-sans",
+    subsets: ["latin"],
+  },
+  {
+    name: "public-sans",
+    title: "Public Sans",
+    type: "sans",
+    family: "'Public Sans Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-public-sans",
+    provider: "google",
+    import: "Public_Sans",
+    dependency: "@fontsource-variable/public-sans",
+    subsets: ["latin"],
+  },
+  {
+    name: "outfit",
+    title: "Outfit",
+    type: "sans",
+    family: "'Outfit Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-outfit",
+    provider: "google",
+    import: "Outfit",
+    dependency: "@fontsource-variable/outfit",
+    subsets: ["latin"],
+  },
+  {
+    name: "oxanium",
+    title: "Oxanium",
+    type: "sans",
+    family: "'Oxanium Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-oxanium",
+    provider: "google",
+    import: "Oxanium",
+    dependency: "@fontsource-variable/oxanium",
+    subsets: ["latin"],
+  },
+  {
+    name: "manrope",
+    title: "Manrope",
+    type: "sans",
+    family: "'Manrope Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-manrope",
+    provider: "google",
+    import: "Manrope",
+    dependency: "@fontsource-variable/manrope",
+    subsets: ["latin"],
+  },
+  {
+    name: "space-grotesk",
+    title: "Space Grotesk",
+    type: "sans",
+    family: "'Space Grotesk Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-space-grotesk",
+    provider: "google",
+    import: "Space_Grotesk",
+    dependency: "@fontsource-variable/space-grotesk",
+    subsets: ["latin"],
+  },
+  {
+    name: "montserrat",
+    title: "Montserrat",
+    type: "sans",
+    family: "'Montserrat Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-montserrat",
+    provider: "google",
+    import: "Montserrat",
+    dependency: "@fontsource-variable/montserrat",
+    subsets: ["latin"],
+  },
+  {
+    name: "ibm-plex-sans",
+    title: "IBM Plex Sans",
+    type: "sans",
+    family: "'IBM Plex Sans Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-ibm-plex-sans",
+    provider: "google",
+    import: "IBM_Plex_Sans",
+    dependency: "@fontsource-variable/ibm-plex-sans",
+    subsets: ["latin"],
+  },
+  {
+    name: "source-sans-3",
+    title: "Source Sans 3",
+    type: "sans",
+    family: "'Source Sans 3 Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-source-sans-3",
+    provider: "google",
+    import: "Source_Sans_3",
+    dependency: "@fontsource-variable/source-sans-3",
+    subsets: ["latin"],
+  },
+  {
+    name: "instrument-sans",
+    title: "Instrument Sans",
+    type: "sans",
+    family: "'Instrument Sans Variable', sans-serif",
+    registryVariable: "--font-sans",
+    previewVariable: "--font-instrument-sans",
+    provider: "google",
+    import: "Instrument_Sans",
+    dependency: "@fontsource-variable/instrument-sans",
+    subsets: ["latin"],
+  },
+  {
+    name: "jetbrains-mono",
+    title: "JetBrains Mono",
+    type: "mono",
+    family: "'JetBrains Mono Variable', monospace",
+    registryVariable: "--font-mono",
+    previewVariable: "--font-jetbrains-mono",
+    provider: "google",
+    import: "JetBrains_Mono",
+    dependency: "@fontsource-variable/jetbrains-mono",
+    subsets: ["latin"],
+  },
+  {
+    name: "geist-mono",
+    title: "Geist Mono",
+    type: "mono",
+    family: "'Geist Mono Variable', monospace",
+    registryVariable: "--font-mono",
+    previewVariable: "--font-geist-mono",
+    provider: "google",
+    import: "Geist_Mono",
+    dependency: "@fontsource-variable/geist-mono",
+    subsets: ["latin"],
+  },
+  {
+    name: "noto-serif",
+    title: "Noto Serif",
+    type: "serif",
+    family: "'Noto Serif Variable', serif",
+    registryVariable: "--font-serif",
+    previewVariable: "--font-noto-serif",
+    provider: "google",
+    import: "Noto_Serif",
+    dependency: "@fontsource-variable/noto-serif",
+    subsets: ["latin"],
+  },
+  {
+    name: "roboto-slab",
+    title: "Roboto Slab",
+    type: "serif",
+    family: "'Roboto Slab Variable', serif",
+    registryVariable: "--font-serif",
+    previewVariable: "--font-roboto-slab",
+    provider: "google",
+    import: "Roboto_Slab",
+    dependency: "@fontsource-variable/roboto-slab",
+    subsets: ["latin"],
+  },
+  {
+    name: "merriweather",
+    title: "Merriweather",
+    type: "serif",
+    family: "'Merriweather Variable', serif",
+    registryVariable: "--font-serif",
+    previewVariable: "--font-merriweather",
+    provider: "google",
+    import: "Merriweather",
+    dependency: "@fontsource-variable/merriweather",
+    subsets: ["latin"],
+  },
+  {
+    name: "lora",
+    title: "Lora",
+    type: "serif",
+    family: "'Lora Variable', serif",
+    registryVariable: "--font-serif",
+    previewVariable: "--font-lora",
+    provider: "google",
+    import: "Lora",
+    dependency: "@fontsource-variable/lora",
+    subsets: ["latin"],
+  },
+  {
+    name: "playfair-display",
+    title: "Playfair Display",
+    type: "serif",
+    family: "'Playfair Display Variable', serif",
+    registryVariable: "--font-serif",
+    previewVariable: "--font-playfair-display",
+    provider: "google",
+    import: "Playfair_Display",
+    dependency: "@fontsource-variable/playfair-display",
+    subsets: ["latin"],
+  },
+] as const satisfies readonly FontDefinition[]
+
+export type FontName = (typeof FONT_DEFINITIONS)[number]["name"]
--- a/apps/v4/lib/format-code.ts
+++ b/apps/v4/lib/format-code.ts
@@ -7,7 +7,7 @@ import {
  transformRender,
  transformStyle,
 } from "shadcn/utils"
-import { Project, ScriptKind } from "ts-morph"
+import { Project, ScriptKind, type SourceFile } from "ts-morph"

 import { BASES } from "@/registry/bases"

@@ -50,6 +50,13 @@ function buildDisplayConfig(styleName: string) {
  }
 }

+type DisplayTransformer = (opts: {
+  filename: string
+  raw: string
+  sourceFile: SourceFile
+  config: ReturnType<typeof buildDisplayConfig>
+}) => Promise<unknown>
+
 const styleMapCache = new Map<string, Record<string, string>>()

 async function getStyleMap(styleName: string) {
@@ -94,7 +101,11 @@ export async function formatCode(code: string, styleName: string) {
      scriptKind: ScriptKind.TSX,
    })

-    const transformers = [transformIcons, transformMenu, transformRender]
+    const transformers: DisplayTransformer[] = [
+      transformIcons as DisplayTransformer,
+      transformMenu as DisplayTransformer,
+      transformRender as DisplayTransformer,
+    ]
    for (const transformer of transformers) {
      await transformer({
        filename: "component.tsx",
--- a/apps/v4/mdx-components.tsx
+++ b/apps/v4/mdx-components.tsx
@@ -59,7 +59,7 @@ export const mdxComponents = {
  h1: ({ className, ...props }: React.ComponentProps<"h1">) => (
    <h1
      className={cn(
-        "font-heading mt-2 scroll-m-28 text-3xl font-bold tracking-tight",
+        "mt-2 scroll-m-28 font-heading text-3xl font-bold tracking-tight",
        className
      )}
      {...props}
@@ -75,7 +75,7 @@ export const mdxComponents = {
          .replace(/\?/g, "")
          .toLowerCase()}
        className={cn(
-          "font-heading [&+]*:[code]:text-xl mt-10 scroll-m-28 text-xl font-medium tracking-tight first:mt-0 lg:mt-12 [&+.steps]:mt-0! [&+.steps>h3]:mt-4! [&+h3]:mt-6! [&+p]:mt-4!",
+          "[&+]*:[code]:text-xl mt-10 scroll-m-28 font-heading text-xl font-medium tracking-tight first:mt-0 lg:mt-12 [&+.steps]:mt-0! [&+.steps>h3]:mt-4! [&+h3]:mt-6! [&+p]:mt-4!",
          className
        )}
        {...props}
@@ -85,7 +85,7 @@ export const mdxComponents = {
  h3: ({ className, ...props }: React.ComponentProps<"h3">) => (
    <h3
      className={cn(
-        "font-heading mt-12 scroll-m-28 text-lg font-medium tracking-tight [&+p]:mt-4! *:[code]:text-xl",
+        "mt-12 scroll-m-28 font-heading text-lg font-medium tracking-tight [&+p]:mt-4! *:[code]:text-xl",
        className
      )}
      {...props}
@@ -94,7 +94,7 @@ export const mdxComponents = {
  h4: ({ className, ...props }: React.ComponentProps<"h4">) => (
    <h4
      className={cn(
-        "font-heading mt-8 scroll-m-28 text-base font-medium tracking-tight",
+        "mt-8 scroll-m-28 font-heading text-base font-medium tracking-tight",
        className
      )}
      {...props}
@@ -279,7 +279,7 @@ export const mdxComponents = {
  Step: ({ className, ...props }: React.ComponentProps<"h3">) => (
    <h3
      className={cn(
-        "font-heading mt-8 scroll-m-32 text-lg font-medium tracking-tight",
+        "mt-8 scroll-m-32 font-heading text-lg font-medium tracking-tight",
        className
      )}
      {...props}
--- a/apps/v4/public/r/colors/mauve.json
+++ b/apps/v4/public/r/colors/mauve.json
@@ -19,11 +19,11 @@
      "border": "oklch(0.922 0.005 325.62)",
      "input": "oklch(0.922 0.005 325.62)",
      "ring": "oklch(0.711 0.019 323.02)",
-      "chart-1": "oklch(0.845 0.143 164.978)",
-      "chart-2": "oklch(0.696 0.17 162.48)",
-      "chart-3": "oklch(0.596 0.145 163.225)",
-      "chart-4": "oklch(0.508 0.118 165.612)",
-      "chart-5": "oklch(0.432 0.095 166.913)",
+      "chart-1": "oklch(0.865 0.012 325.68)",
+      "chart-2": "oklch(0.542 0.034 322.5)",
+      "chart-3": "oklch(0.435 0.029 321.78)",
+      "chart-4": "oklch(0.364 0.029 323.89)",
+      "chart-5": "oklch(0.263 0.024 320.12)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.985 0 0)",
      "sidebar-foreground": "oklch(0.145 0.008 326)",
@@ -53,11 +53,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.542 0.034 322.5)",
-      "chart-1": "oklch(0.845 0.143 164.978)",
-      "chart-2": "oklch(0.696 0.17 162.48)",
-      "chart-3": "oklch(0.596 0.145 163.225)",
-      "chart-4": "oklch(0.508 0.118 165.612)",
-      "chart-5": "oklch(0.432 0.095 166.913)",
+      "chart-1": "oklch(0.865 0.012 325.68)",
+      "chart-2": "oklch(0.542 0.034 322.5)",
+      "chart-3": "oklch(0.435 0.029 321.78)",
+      "chart-4": "oklch(0.364 0.029 323.89)",
+      "chart-5": "oklch(0.263 0.024 320.12)",
      "sidebar": "oklch(0.212 0.019 322.12)",
      "sidebar-foreground": "oklch(0.985 0 0)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -88,11 +88,11 @@
      "border": "oklch(0.922 0.005 325.62)",
      "input": "oklch(0.922 0.005 325.62)",
      "ring": "oklch(0.711 0.019 323.02)",
-      "chart-1": "oklch(0.845 0.143 164.978)",
-      "chart-2": "oklch(0.696 0.17 162.48)",
-      "chart-3": "oklch(0.596 0.145 163.225)",
-      "chart-4": "oklch(0.508 0.118 165.612)",
-      "chart-5": "oklch(0.432 0.095 166.913)",
+      "chart-1": "oklch(0.865 0.012 325.68)",
+      "chart-2": "oklch(0.542 0.034 322.5)",
+      "chart-3": "oklch(0.435 0.029 321.78)",
+      "chart-4": "oklch(0.364 0.029 323.89)",
+      "chart-5": "oklch(0.263 0.024 320.12)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.985 0 0)",
      "sidebar-foreground": "oklch(0.145 0.008 326)",
@@ -122,11 +122,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.542 0.034 322.5)",
-      "chart-1": "oklch(0.845 0.143 164.978)",
-      "chart-2": "oklch(0.696 0.17 162.48)",
-      "chart-3": "oklch(0.596 0.145 163.225)",
-      "chart-4": "oklch(0.508 0.118 165.612)",
-      "chart-5": "oklch(0.432 0.095 166.913)",
+      "chart-1": "oklch(0.865 0.012 325.68)",
+      "chart-2": "oklch(0.542 0.034 322.5)",
+      "chart-3": "oklch(0.435 0.029 321.78)",
+      "chart-4": "oklch(0.364 0.029 323.89)",
+      "chart-5": "oklch(0.263 0.024 320.12)",
      "sidebar": "oklch(0.212 0.019 322.12)",
      "sidebar-foreground": "oklch(0.985 0 0)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -157,11 +157,11 @@
      "border": "oklch(0.922 0.005 325.62)",
      "input": "oklch(0.922 0.005 325.62)",
      "ring": "oklch(0.711 0.019 323.02)",
-      "chart-1": "oklch(0.845 0.143 164.978)",
-      "chart-2": "oklch(0.696 0.17 162.48)",
-      "chart-3": "oklch(0.596 0.145 163.225)",
-      "chart-4": "oklch(0.508 0.118 165.612)",
-      "chart-5": "oklch(0.432 0.095 166.913)",
+      "chart-1": "oklch(0.865 0.012 325.68)",
+      "chart-2": "oklch(0.542 0.034 322.5)",
+      "chart-3": "oklch(0.435 0.029 321.78)",
+      "chart-4": "oklch(0.364 0.029 323.89)",
+      "chart-5": "oklch(0.263 0.024 320.12)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.985 0 0)",
      "sidebar-foreground": "oklch(0.145 0.008 326)",
@@ -191,11 +191,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.542 0.034 322.5)",
-      "chart-1": "oklch(0.845 0.143 164.978)",
-      "chart-2": "oklch(0.696 0.17 162.48)",
-      "chart-3": "oklch(0.596 0.145 163.225)",
-      "chart-4": "oklch(0.508 0.118 165.612)",
-      "chart-5": "oklch(0.432 0.095 166.913)",
+      "chart-1": "oklch(0.865 0.012 325.68)",
+      "chart-2": "oklch(0.542 0.034 322.5)",
+      "chart-3": "oklch(0.435 0.029 321.78)",
+      "chart-4": "oklch(0.364 0.029 323.89)",
+      "chart-5": "oklch(0.263 0.024 320.12)",
      "sidebar": "oklch(0.212 0.019 322.12)",
      "sidebar-foreground": "oklch(0.985 0 0)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -207,5 +207,5 @@
    }
  },
  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.145 0.008 326);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.145 0.008 326);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.145 0.008 326);\n    --primary: oklch(0.212 0.019 322.12);\n    --primary-foreground: oklch(0.985 0 0);\n    --secondary: oklch(0.96 0.003 325.6);\n    --secondary-foreground: oklch(0.212 0.019 322.12);\n    --muted: oklch(0.96 0.003 325.6);\n    --muted-foreground: oklch(0.542 0.034 322.5);\n    --accent: oklch(0.96 0.003 325.6);\n    --accent-foreground: oklch(0.212 0.019 322.12);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.922 0.005 325.62);\n    --input: oklch(0.922 0.005 325.62);\n    --ring: oklch(0.711 0.019 323.02);\n    --chart-1: oklch(0.845 0.143 164.978);\n    --chart-2: oklch(0.696 0.17 162.48);\n    --chart-3: oklch(0.596 0.145 163.225);\n    --chart-4: oklch(0.508 0.118 165.612);\n    --chart-5: oklch(0.432 0.095 166.913);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.145 0.008 326);\n    --foreground: oklch(0.985 0 0);\n    --card: oklch(0.212 0.019 322.12);\n    --card-foreground: oklch(0.985 0 0);\n    --popover: oklch(0.212 0.019 322.12);\n    --popover-foreground: oklch(0.985 0 0);\n    --primary: oklch(0.922 0.005 325.62);\n    --primary-foreground: oklch(0.212 0.019 322.12);\n    --secondary: oklch(0.263 0.024 320.12);\n    --secondary-foreground: oklch(0.985 0 0);\n    --muted: oklch(0.263 0.024 320.12);\n    --muted-foreground: oklch(0.711 0.019 323.02);\n    --accent: oklch(0.263 0.024 320.12);\n    --accent-foreground: oklch(0.985 0 0);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.542 0.034 322.5);\n    --chart-1: oklch(0.845 0.143 164.978);\n    --chart-2: oklch(0.696 0.17 162.48);\n    --chart-3: oklch(0.596 0.145 163.225);\n    --chart-4: oklch(0.508 0.118 165.612);\n    --chart-5: oklch(0.432 0.095 166.913);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.145 0.008 326);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.145 0.008 326);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.145 0.008 326);\n    --primary: oklch(0.212 0.019 322.12);\n    --primary-foreground: oklch(0.985 0 0);\n    --secondary: oklch(0.96 0.003 325.6);\n    --secondary-foreground: oklch(0.212 0.019 322.12);\n    --muted: oklch(0.96 0.003 325.6);\n    --muted-foreground: oklch(0.542 0.034 322.5);\n    --accent: oklch(0.96 0.003 325.6);\n    --accent-foreground: oklch(0.212 0.019 322.12);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.922 0.005 325.62);\n    --input: oklch(0.922 0.005 325.62);\n    --ring: oklch(0.711 0.019 323.02);\n    --chart-1: oklch(0.865 0.012 325.68);\n    --chart-2: oklch(0.542 0.034 322.5);\n    --chart-3: oklch(0.435 0.029 321.78);\n    --chart-4: oklch(0.364 0.029 323.89);\n    --chart-5: oklch(0.263 0.024 320.12);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.145 0.008 326);\n    --foreground: oklch(0.985 0 0);\n    --card: oklch(0.212 0.019 322.12);\n    --card-foreground: oklch(0.985 0 0);\n    --popover: oklch(0.212 0.019 322.12);\n    --popover-foreground: oklch(0.985 0 0);\n    --primary: oklch(0.922 0.005 325.62);\n    --primary-foreground: oklch(0.212 0.019 322.12);\n    --secondary: oklch(0.263 0.024 320.12);\n    --secondary-foreground: oklch(0.985 0 0);\n    --muted: oklch(0.263 0.024 320.12);\n    --muted-foreground: oklch(0.711 0.019 323.02);\n    --accent: oklch(0.263 0.024 320.12);\n    --accent-foreground: oklch(0.985 0 0);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.542 0.034 322.5);\n    --chart-1: oklch(0.865 0.012 325.68);\n    --chart-2: oklch(0.542 0.034 322.5);\n    --chart-3: oklch(0.435 0.029 321.78);\n    --chart-4: oklch(0.364 0.029 323.89);\n    --chart-5: oklch(0.263 0.024 320.12);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
--- a/apps/v4/public/r/colors/mist.json
+++ b/apps/v4/public/r/colors/mist.json
@@ -19,11 +19,11 @@
      "border": "oklch(0.925 0.005 214.3)",
      "input": "oklch(0.925 0.005 214.3)",
      "ring": "oklch(0.723 0.014 214.4)",
-      "chart-1": "oklch(0.81 0.117 11.638)",
-      "chart-2": "oklch(0.645 0.246 16.439)",
-      "chart-3": "oklch(0.586 0.253 17.585)",
-      "chart-4": "oklch(0.514 0.222 16.935)",
-      "chart-5": "oklch(0.455 0.188 13.697)",
+      "chart-1": "oklch(0.872 0.007 219.6)",
+      "chart-2": "oklch(0.56 0.021 213.5)",
+      "chart-3": "oklch(0.45 0.017 213.2)",
+      "chart-4": "oklch(0.378 0.015 216)",
+      "chart-5": "oklch(0.275 0.011 216.9)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.987 0.002 197.1)",
      "sidebar-foreground": "oklch(0.148 0.004 228.8)",
@@ -53,11 +53,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.56 0.021 213.5)",
-      "chart-1": "oklch(0.81 0.117 11.638)",
-      "chart-2": "oklch(0.645 0.246 16.439)",
-      "chart-3": "oklch(0.586 0.253 17.585)",
-      "chart-4": "oklch(0.514 0.222 16.935)",
-      "chart-5": "oklch(0.455 0.188 13.697)",
+      "chart-1": "oklch(0.872 0.007 219.6)",
+      "chart-2": "oklch(0.56 0.021 213.5)",
+      "chart-3": "oklch(0.45 0.017 213.2)",
+      "chart-4": "oklch(0.378 0.015 216)",
+      "chart-5": "oklch(0.275 0.011 216.9)",
      "sidebar": "oklch(0.218 0.008 223.9)",
      "sidebar-foreground": "oklch(0.987 0.002 197.1)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -88,11 +88,11 @@
      "border": "oklch(0.925 0.005 214.3)",
      "input": "oklch(0.925 0.005 214.3)",
      "ring": "oklch(0.723 0.014 214.4)",
-      "chart-1": "oklch(0.81 0.117 11.638)",
-      "chart-2": "oklch(0.645 0.246 16.439)",
-      "chart-3": "oklch(0.586 0.253 17.585)",
-      "chart-4": "oklch(0.514 0.222 16.935)",
-      "chart-5": "oklch(0.455 0.188 13.697)",
+      "chart-1": "oklch(0.872 0.007 219.6)",
+      "chart-2": "oklch(0.56 0.021 213.5)",
+      "chart-3": "oklch(0.45 0.017 213.2)",
+      "chart-4": "oklch(0.378 0.015 216)",
+      "chart-5": "oklch(0.275 0.011 216.9)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.987 0.002 197.1)",
      "sidebar-foreground": "oklch(0.148 0.004 228.8)",
@@ -122,11 +122,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.56 0.021 213.5)",
-      "chart-1": "oklch(0.81 0.117 11.638)",
-      "chart-2": "oklch(0.645 0.246 16.439)",
-      "chart-3": "oklch(0.586 0.253 17.585)",
-      "chart-4": "oklch(0.514 0.222 16.935)",
-      "chart-5": "oklch(0.455 0.188 13.697)",
+      "chart-1": "oklch(0.872 0.007 219.6)",
+      "chart-2": "oklch(0.56 0.021 213.5)",
+      "chart-3": "oklch(0.45 0.017 213.2)",
+      "chart-4": "oklch(0.378 0.015 216)",
+      "chart-5": "oklch(0.275 0.011 216.9)",
      "sidebar": "oklch(0.218 0.008 223.9)",
      "sidebar-foreground": "oklch(0.987 0.002 197.1)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -157,11 +157,11 @@
      "border": "oklch(0.925 0.005 214.3)",
      "input": "oklch(0.925 0.005 214.3)",
      "ring": "oklch(0.723 0.014 214.4)",
-      "chart-1": "oklch(0.81 0.117 11.638)",
-      "chart-2": "oklch(0.645 0.246 16.439)",
-      "chart-3": "oklch(0.586 0.253 17.585)",
-      "chart-4": "oklch(0.514 0.222 16.935)",
-      "chart-5": "oklch(0.455 0.188 13.697)",
+      "chart-1": "oklch(0.872 0.007 219.6)",
+      "chart-2": "oklch(0.56 0.021 213.5)",
+      "chart-3": "oklch(0.45 0.017 213.2)",
+      "chart-4": "oklch(0.378 0.015 216)",
+      "chart-5": "oklch(0.275 0.011 216.9)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.987 0.002 197.1)",
      "sidebar-foreground": "oklch(0.148 0.004 228.8)",
@@ -191,11 +191,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.56 0.021 213.5)",
-      "chart-1": "oklch(0.81 0.117 11.638)",
-      "chart-2": "oklch(0.645 0.246 16.439)",
-      "chart-3": "oklch(0.586 0.253 17.585)",
-      "chart-4": "oklch(0.514 0.222 16.935)",
-      "chart-5": "oklch(0.455 0.188 13.697)",
+      "chart-1": "oklch(0.872 0.007 219.6)",
+      "chart-2": "oklch(0.56 0.021 213.5)",
+      "chart-3": "oklch(0.45 0.017 213.2)",
+      "chart-4": "oklch(0.378 0.015 216)",
+      "chart-5": "oklch(0.275 0.011 216.9)",
      "sidebar": "oklch(0.218 0.008 223.9)",
      "sidebar-foreground": "oklch(0.987 0.002 197.1)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -207,5 +207,5 @@
    }
  },
  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.148 0.004 228.8);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.148 0.004 228.8);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.148 0.004 228.8);\n    --primary: oklch(0.218 0.008 223.9);\n    --primary-foreground: oklch(0.987 0.002 197.1);\n    --secondary: oklch(0.963 0.002 197.1);\n    --secondary-foreground: oklch(0.218 0.008 223.9);\n    --muted: oklch(0.963 0.002 197.1);\n    --muted-foreground: oklch(0.56 0.021 213.5);\n    --accent: oklch(0.963 0.002 197.1);\n    --accent-foreground: oklch(0.218 0.008 223.9);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.925 0.005 214.3);\n    --input: oklch(0.925 0.005 214.3);\n    --ring: oklch(0.723 0.014 214.4);\n    --chart-1: oklch(0.81 0.117 11.638);\n    --chart-2: oklch(0.645 0.246 16.439);\n    --chart-3: oklch(0.586 0.253 17.585);\n    --chart-4: oklch(0.514 0.222 16.935);\n    --chart-5: oklch(0.455 0.188 13.697);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.148 0.004 228.8);\n    --foreground: oklch(0.987 0.002 197.1);\n    --card: oklch(0.218 0.008 223.9);\n    --card-foreground: oklch(0.987 0.002 197.1);\n    --popover: oklch(0.218 0.008 223.9);\n    --popover-foreground: oklch(0.987 0.002 197.1);\n    --primary: oklch(0.925 0.005 214.3);\n    --primary-foreground: oklch(0.218 0.008 223.9);\n    --secondary: oklch(0.275 0.011 216.9);\n    --secondary-foreground: oklch(0.987 0.002 197.1);\n    --muted: oklch(0.275 0.011 216.9);\n    --muted-foreground: oklch(0.723 0.014 214.4);\n    --accent: oklch(0.275 0.011 216.9);\n    --accent-foreground: oklch(0.987 0.002 197.1);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.56 0.021 213.5);\n    --chart-1: oklch(0.81 0.117 11.638);\n    --chart-2: oklch(0.645 0.246 16.439);\n    --chart-3: oklch(0.586 0.253 17.585);\n    --chart-4: oklch(0.514 0.222 16.935);\n    --chart-5: oklch(0.455 0.188 13.697);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.148 0.004 228.8);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.148 0.004 228.8);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.148 0.004 228.8);\n    --primary: oklch(0.218 0.008 223.9);\n    --primary-foreground: oklch(0.987 0.002 197.1);\n    --secondary: oklch(0.963 0.002 197.1);\n    --secondary-foreground: oklch(0.218 0.008 223.9);\n    --muted: oklch(0.963 0.002 197.1);\n    --muted-foreground: oklch(0.56 0.021 213.5);\n    --accent: oklch(0.963 0.002 197.1);\n    --accent-foreground: oklch(0.218 0.008 223.9);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.925 0.005 214.3);\n    --input: oklch(0.925 0.005 214.3);\n    --ring: oklch(0.723 0.014 214.4);\n    --chart-1: oklch(0.872 0.007 219.6);\n    --chart-2: oklch(0.56 0.021 213.5);\n    --chart-3: oklch(0.45 0.017 213.2);\n    --chart-4: oklch(0.378 0.015 216);\n    --chart-5: oklch(0.275 0.011 216.9);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.148 0.004 228.8);\n    --foreground: oklch(0.987 0.002 197.1);\n    --card: oklch(0.218 0.008 223.9);\n    --card-foreground: oklch(0.987 0.002 197.1);\n    --popover: oklch(0.218 0.008 223.9);\n    --popover-foreground: oklch(0.987 0.002 197.1);\n    --primary: oklch(0.925 0.005 214.3);\n    --primary-foreground: oklch(0.218 0.008 223.9);\n    --secondary: oklch(0.275 0.011 216.9);\n    --secondary-foreground: oklch(0.987 0.002 197.1);\n    --muted: oklch(0.275 0.011 216.9);\n    --muted-foreground: oklch(0.723 0.014 214.4);\n    --accent: oklch(0.275 0.011 216.9);\n    --accent-foreground: oklch(0.987 0.002 197.1);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.56 0.021 213.5);\n    --chart-1: oklch(0.872 0.007 219.6);\n    --chart-2: oklch(0.56 0.021 213.5);\n    --chart-3: oklch(0.45 0.017 213.2);\n    --chart-4: oklch(0.378 0.015 216);\n    --chart-5: oklch(0.275 0.011 216.9);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
--- a/apps/v4/public/r/colors/neutral.json
+++ b/apps/v4/public/r/colors/neutral.json
@@ -19,11 +19,11 @@
      "border": "oklch(0.922 0 0)",
      "input": "oklch(0.922 0 0)",
      "ring": "oklch(0.708 0 0)",
-      "chart-1": "oklch(0.809 0.105 251.813)",
-      "chart-2": "oklch(0.623 0.214 259.815)",
-      "chart-3": "oklch(0.546 0.245 262.881)",
-      "chart-4": "oklch(0.488 0.243 264.376)",
-      "chart-5": "oklch(0.424 0.199 265.638)",
+      "chart-1": "oklch(0.87 0 0)",
+      "chart-2": "oklch(0.556 0 0)",
+      "chart-3": "oklch(0.439 0 0)",
+      "chart-4": "oklch(0.371 0 0)",
+      "chart-5": "oklch(0.269 0 0)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.985 0 0)",
      "sidebar-foreground": "oklch(0.145 0 0)",
@@ -53,11 +53,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.556 0 0)",
-      "chart-1": "oklch(0.809 0.105 251.813)",
-      "chart-2": "oklch(0.623 0.214 259.815)",
-      "chart-3": "oklch(0.546 0.245 262.881)",
-      "chart-4": "oklch(0.488 0.243 264.376)",
-      "chart-5": "oklch(0.424 0.199 265.638)",
+      "chart-1": "oklch(0.87 0 0)",
+      "chart-2": "oklch(0.556 0 0)",
+      "chart-3": "oklch(0.439 0 0)",
+      "chart-4": "oklch(0.371 0 0)",
+      "chart-5": "oklch(0.269 0 0)",
      "sidebar": "oklch(0.205 0 0)",
      "sidebar-foreground": "oklch(0.985 0 0)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -88,11 +88,11 @@
      "border": "oklch(0.922 0 0)",
      "input": "oklch(0.922 0 0)",
      "ring": "oklch(0.708 0 0)",
-      "chart-1": "oklch(0.809 0.105 251.813)",
-      "chart-2": "oklch(0.623 0.214 259.815)",
-      "chart-3": "oklch(0.546 0.245 262.881)",
-      "chart-4": "oklch(0.488 0.243 264.376)",
-      "chart-5": "oklch(0.424 0.199 265.638)",
+      "chart-1": "oklch(0.87 0 0)",
+      "chart-2": "oklch(0.556 0 0)",
+      "chart-3": "oklch(0.439 0 0)",
+      "chart-4": "oklch(0.371 0 0)",
+      "chart-5": "oklch(0.269 0 0)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.985 0 0)",
      "sidebar-foreground": "oklch(0.145 0 0)",
@@ -122,11 +122,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.556 0 0)",
-      "chart-1": "oklch(0.809 0.105 251.813)",
-      "chart-2": "oklch(0.623 0.214 259.815)",
-      "chart-3": "oklch(0.546 0.245 262.881)",
-      "chart-4": "oklch(0.488 0.243 264.376)",
-      "chart-5": "oklch(0.424 0.199 265.638)",
+      "chart-1": "oklch(0.87 0 0)",
+      "chart-2": "oklch(0.556 0 0)",
+      "chart-3": "oklch(0.439 0 0)",
+      "chart-4": "oklch(0.371 0 0)",
+      "chart-5": "oklch(0.269 0 0)",
      "sidebar": "oklch(0.205 0 0)",
      "sidebar-foreground": "oklch(0.985 0 0)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -157,11 +157,11 @@
      "border": "oklch(0.922 0 0)",
      "input": "oklch(0.922 0 0)",
      "ring": "oklch(0.708 0 0)",
-      "chart-1": "oklch(0.809 0.105 251.813)",
-      "chart-2": "oklch(0.623 0.214 259.815)",
-      "chart-3": "oklch(0.546 0.245 262.881)",
-      "chart-4": "oklch(0.488 0.243 264.376)",
-      "chart-5": "oklch(0.424 0.199 265.638)",
+      "chart-1": "oklch(0.87 0 0)",
+      "chart-2": "oklch(0.556 0 0)",
+      "chart-3": "oklch(0.439 0 0)",
+      "chart-4": "oklch(0.371 0 0)",
+      "chart-5": "oklch(0.269 0 0)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.985 0 0)",
      "sidebar-foreground": "oklch(0.145 0 0)",
@@ -191,11 +191,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.556 0 0)",
-      "chart-1": "oklch(0.809 0.105 251.813)",
-      "chart-2": "oklch(0.623 0.214 259.815)",
-      "chart-3": "oklch(0.546 0.245 262.881)",
-      "chart-4": "oklch(0.488 0.243 264.376)",
-      "chart-5": "oklch(0.424 0.199 265.638)",
+      "chart-1": "oklch(0.87 0 0)",
+      "chart-2": "oklch(0.556 0 0)",
+      "chart-3": "oklch(0.439 0 0)",
+      "chart-4": "oklch(0.371 0 0)",
+      "chart-5": "oklch(0.269 0 0)",
      "sidebar": "oklch(0.205 0 0)",
      "sidebar-foreground": "oklch(0.985 0 0)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -207,5 +207,5 @@
    }
  },
  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.145 0 0);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.145 0 0);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.145 0 0);\n    --primary: oklch(0.205 0 0);\n    --primary-foreground: oklch(0.985 0 0);\n    --secondary: oklch(0.97 0 0);\n    --secondary-foreground: oklch(0.205 0 0);\n    --muted: oklch(0.97 0 0);\n    --muted-foreground: oklch(0.556 0 0);\n    --accent: oklch(0.97 0 0);\n    --accent-foreground: oklch(0.205 0 0);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.922 0 0);\n    --input: oklch(0.922 0 0);\n    --ring: oklch(0.708 0 0);\n    --chart-1: oklch(0.809 0.105 251.813);\n    --chart-2: oklch(0.623 0.214 259.815);\n    --chart-3: oklch(0.546 0.245 262.881);\n    --chart-4: oklch(0.488 0.243 264.376);\n    --chart-5: oklch(0.424 0.199 265.638);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.145 0 0);\n    --foreground: oklch(0.985 0 0);\n    --card: oklch(0.205 0 0);\n    --card-foreground: oklch(0.985 0 0);\n    --popover: oklch(0.205 0 0);\n    --popover-foreground: oklch(0.985 0 0);\n    --primary: oklch(0.922 0 0);\n    --primary-foreground: oklch(0.205 0 0);\n    --secondary: oklch(0.269 0 0);\n    --secondary-foreground: oklch(0.985 0 0);\n    --muted: oklch(0.269 0 0);\n    --muted-foreground: oklch(0.708 0 0);\n    --accent: oklch(0.269 0 0);\n    --accent-foreground: oklch(0.985 0 0);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.556 0 0);\n    --chart-1: oklch(0.809 0.105 251.813);\n    --chart-2: oklch(0.623 0.214 259.815);\n    --chart-3: oklch(0.546 0.245 262.881);\n    --chart-4: oklch(0.488 0.243 264.376);\n    --chart-5: oklch(0.424 0.199 265.638);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.145 0 0);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.145 0 0);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.145 0 0);\n    --primary: oklch(0.205 0 0);\n    --primary-foreground: oklch(0.985 0 0);\n    --secondary: oklch(0.97 0 0);\n    --secondary-foreground: oklch(0.205 0 0);\n    --muted: oklch(0.97 0 0);\n    --muted-foreground: oklch(0.556 0 0);\n    --accent: oklch(0.97 0 0);\n    --accent-foreground: oklch(0.205 0 0);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.922 0 0);\n    --input: oklch(0.922 0 0);\n    --ring: oklch(0.708 0 0);\n    --chart-1: oklch(0.87 0 0);\n    --chart-2: oklch(0.556 0 0);\n    --chart-3: oklch(0.439 0 0);\n    --chart-4: oklch(0.371 0 0);\n    --chart-5: oklch(0.269 0 0);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.145 0 0);\n    --foreground: oklch(0.985 0 0);\n    --card: oklch(0.205 0 0);\n    --card-foreground: oklch(0.985 0 0);\n    --popover: oklch(0.205 0 0);\n    --popover-foreground: oklch(0.985 0 0);\n    --primary: oklch(0.922 0 0);\n    --primary-foreground: oklch(0.205 0 0);\n    --secondary: oklch(0.269 0 0);\n    --secondary-foreground: oklch(0.985 0 0);\n    --muted: oklch(0.269 0 0);\n    --muted-foreground: oklch(0.708 0 0);\n    --accent: oklch(0.269 0 0);\n    --accent-foreground: oklch(0.985 0 0);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.556 0 0);\n    --chart-1: oklch(0.87 0 0);\n    --chart-2: oklch(0.556 0 0);\n    --chart-3: oklch(0.439 0 0);\n    --chart-4: oklch(0.371 0 0);\n    --chart-5: oklch(0.269 0 0);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
--- a/apps/v4/public/r/colors/olive.json
+++ b/apps/v4/public/r/colors/olive.json
@@ -19,11 +19,11 @@
      "border": "oklch(0.93 0.007 106.5)",
      "input": "oklch(0.93 0.007 106.5)",
      "ring": "oklch(0.737 0.021 106.9)",
-      "chart-1": "oklch(0.811 0.111 293.571)",
-      "chart-2": "oklch(0.606 0.25 292.717)",
-      "chart-3": "oklch(0.541 0.281 293.009)",
-      "chart-4": "oklch(0.491 0.27 292.581)",
-      "chart-5": "oklch(0.432 0.232 292.759)",
+      "chart-1": "oklch(0.88 0.011 106.6)",
+      "chart-2": "oklch(0.58 0.031 107.3)",
+      "chart-3": "oklch(0.466 0.025 107.3)",
+      "chart-4": "oklch(0.394 0.023 107.4)",
+      "chart-5": "oklch(0.286 0.016 107.4)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.988 0.003 106.5)",
      "sidebar-foreground": "oklch(0.153 0.006 107.1)",
@@ -53,11 +53,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.58 0.031 107.3)",
-      "chart-1": "oklch(0.811 0.111 293.571)",
-      "chart-2": "oklch(0.606 0.25 292.717)",
-      "chart-3": "oklch(0.541 0.281 293.009)",
-      "chart-4": "oklch(0.491 0.27 292.581)",
-      "chart-5": "oklch(0.432 0.232 292.759)",
+      "chart-1": "oklch(0.88 0.011 106.6)",
+      "chart-2": "oklch(0.58 0.031 107.3)",
+      "chart-3": "oklch(0.466 0.025 107.3)",
+      "chart-4": "oklch(0.394 0.023 107.4)",
+      "chart-5": "oklch(0.286 0.016 107.4)",
      "sidebar": "oklch(0.228 0.013 107.4)",
      "sidebar-foreground": "oklch(0.988 0.003 106.5)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -88,11 +88,11 @@
      "border": "oklch(0.93 0.007 106.5)",
      "input": "oklch(0.93 0.007 106.5)",
      "ring": "oklch(0.737 0.021 106.9)",
-      "chart-1": "oklch(0.811 0.111 293.571)",
-      "chart-2": "oklch(0.606 0.25 292.717)",
-      "chart-3": "oklch(0.541 0.281 293.009)",
-      "chart-4": "oklch(0.491 0.27 292.581)",
-      "chart-5": "oklch(0.432 0.232 292.759)",
+      "chart-1": "oklch(0.88 0.011 106.6)",
+      "chart-2": "oklch(0.58 0.031 107.3)",
+      "chart-3": "oklch(0.466 0.025 107.3)",
+      "chart-4": "oklch(0.394 0.023 107.4)",
+      "chart-5": "oklch(0.286 0.016 107.4)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.988 0.003 106.5)",
      "sidebar-foreground": "oklch(0.153 0.006 107.1)",
@@ -122,11 +122,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.58 0.031 107.3)",
-      "chart-1": "oklch(0.811 0.111 293.571)",
-      "chart-2": "oklch(0.606 0.25 292.717)",
-      "chart-3": "oklch(0.541 0.281 293.009)",
-      "chart-4": "oklch(0.491 0.27 292.581)",
-      "chart-5": "oklch(0.432 0.232 292.759)",
+      "chart-1": "oklch(0.88 0.011 106.6)",
+      "chart-2": "oklch(0.58 0.031 107.3)",
+      "chart-3": "oklch(0.466 0.025 107.3)",
+      "chart-4": "oklch(0.394 0.023 107.4)",
+      "chart-5": "oklch(0.286 0.016 107.4)",
      "sidebar": "oklch(0.228 0.013 107.4)",
      "sidebar-foreground": "oklch(0.988 0.003 106.5)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -157,11 +157,11 @@
      "border": "oklch(0.93 0.007 106.5)",
      "input": "oklch(0.93 0.007 106.5)",
      "ring": "oklch(0.737 0.021 106.9)",
-      "chart-1": "oklch(0.811 0.111 293.571)",
-      "chart-2": "oklch(0.606 0.25 292.717)",
-      "chart-3": "oklch(0.541 0.281 293.009)",
-      "chart-4": "oklch(0.491 0.27 292.581)",
-      "chart-5": "oklch(0.432 0.232 292.759)",
+      "chart-1": "oklch(0.88 0.011 106.6)",
+      "chart-2": "oklch(0.58 0.031 107.3)",
+      "chart-3": "oklch(0.466 0.025 107.3)",
+      "chart-4": "oklch(0.394 0.023 107.4)",
+      "chart-5": "oklch(0.286 0.016 107.4)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.988 0.003 106.5)",
      "sidebar-foreground": "oklch(0.153 0.006 107.1)",
@@ -191,11 +191,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.58 0.031 107.3)",
-      "chart-1": "oklch(0.811 0.111 293.571)",
-      "chart-2": "oklch(0.606 0.25 292.717)",
-      "chart-3": "oklch(0.541 0.281 293.009)",
-      "chart-4": "oklch(0.491 0.27 292.581)",
-      "chart-5": "oklch(0.432 0.232 292.759)",
+      "chart-1": "oklch(0.88 0.011 106.6)",
+      "chart-2": "oklch(0.58 0.031 107.3)",
+      "chart-3": "oklch(0.466 0.025 107.3)",
+      "chart-4": "oklch(0.394 0.023 107.4)",
+      "chart-5": "oklch(0.286 0.016 107.4)",
      "sidebar": "oklch(0.228 0.013 107.4)",
      "sidebar-foreground": "oklch(0.988 0.003 106.5)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -207,5 +207,5 @@
    }
  },
  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.153 0.006 107.1);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.153 0.006 107.1);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.153 0.006 107.1);\n    --primary: oklch(0.228 0.013 107.4);\n    --primary-foreground: oklch(0.988 0.003 106.5);\n    --secondary: oklch(0.966 0.005 106.5);\n    --secondary-foreground: oklch(0.228 0.013 107.4);\n    --muted: oklch(0.966 0.005 106.5);\n    --muted-foreground: oklch(0.58 0.031 107.3);\n    --accent: oklch(0.966 0.005 106.5);\n    --accent-foreground: oklch(0.228 0.013 107.4);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.93 0.007 106.5);\n    --input: oklch(0.93 0.007 106.5);\n    --ring: oklch(0.737 0.021 106.9);\n    --chart-1: oklch(0.811 0.111 293.571);\n    --chart-2: oklch(0.606 0.25 292.717);\n    --chart-3: oklch(0.541 0.281 293.009);\n    --chart-4: oklch(0.491 0.27 292.581);\n    --chart-5: oklch(0.432 0.232 292.759);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.153 0.006 107.1);\n    --foreground: oklch(0.988 0.003 106.5);\n    --card: oklch(0.228 0.013 107.4);\n    --card-foreground: oklch(0.988 0.003 106.5);\n    --popover: oklch(0.228 0.013 107.4);\n    --popover-foreground: oklch(0.988 0.003 106.5);\n    --primary: oklch(0.93 0.007 106.5);\n    --primary-foreground: oklch(0.228 0.013 107.4);\n    --secondary: oklch(0.286 0.016 107.4);\n    --secondary-foreground: oklch(0.988 0.003 106.5);\n    --muted: oklch(0.286 0.016 107.4);\n    --muted-foreground: oklch(0.737 0.021 106.9);\n    --accent: oklch(0.286 0.016 107.4);\n    --accent-foreground: oklch(0.988 0.003 106.5);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.58 0.031 107.3);\n    --chart-1: oklch(0.811 0.111 293.571);\n    --chart-2: oklch(0.606 0.25 292.717);\n    --chart-3: oklch(0.541 0.281 293.009);\n    --chart-4: oklch(0.491 0.27 292.581);\n    --chart-5: oklch(0.432 0.232 292.759);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.153 0.006 107.1);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.153 0.006 107.1);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.153 0.006 107.1);\n    --primary: oklch(0.228 0.013 107.4);\n    --primary-foreground: oklch(0.988 0.003 106.5);\n    --secondary: oklch(0.966 0.005 106.5);\n    --secondary-foreground: oklch(0.228 0.013 107.4);\n    --muted: oklch(0.966 0.005 106.5);\n    --muted-foreground: oklch(0.58 0.031 107.3);\n    --accent: oklch(0.966 0.005 106.5);\n    --accent-foreground: oklch(0.228 0.013 107.4);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.93 0.007 106.5);\n    --input: oklch(0.93 0.007 106.5);\n    --ring: oklch(0.737 0.021 106.9);\n    --chart-1: oklch(0.88 0.011 106.6);\n    --chart-2: oklch(0.58 0.031 107.3);\n    --chart-3: oklch(0.466 0.025 107.3);\n    --chart-4: oklch(0.394 0.023 107.4);\n    --chart-5: oklch(0.286 0.016 107.4);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.153 0.006 107.1);\n    --foreground: oklch(0.988 0.003 106.5);\n    --card: oklch(0.228 0.013 107.4);\n    --card-foreground: oklch(0.988 0.003 106.5);\n    --popover: oklch(0.228 0.013 107.4);\n    --popover-foreground: oklch(0.988 0.003 106.5);\n    --primary: oklch(0.93 0.007 106.5);\n    --primary-foreground: oklch(0.228 0.013 107.4);\n    --secondary: oklch(0.286 0.016 107.4);\n    --secondary-foreground: oklch(0.988 0.003 106.5);\n    --muted: oklch(0.286 0.016 107.4);\n    --muted-foreground: oklch(0.737 0.021 106.9);\n    --accent: oklch(0.286 0.016 107.4);\n    --accent-foreground: oklch(0.988 0.003 106.5);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.58 0.031 107.3);\n    --chart-1: oklch(0.88 0.011 106.6);\n    --chart-2: oklch(0.58 0.031 107.3);\n    --chart-3: oklch(0.466 0.025 107.3);\n    --chart-4: oklch(0.394 0.023 107.4);\n    --chart-5: oklch(0.286 0.016 107.4);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
--- a/apps/v4/public/r/colors/stone.json
+++ b/apps/v4/public/r/colors/stone.json
@@ -19,11 +19,11 @@
      "border": "oklch(0.923 0.003 48.717)",
      "input": "oklch(0.923 0.003 48.717)",
      "ring": "oklch(0.709 0.01 56.259)",
-      "chart-1": "oklch(0.897 0.196 126.665)",
-      "chart-2": "oklch(0.768 0.233 130.85)",
-      "chart-3": "oklch(0.648 0.2 131.684)",
-      "chart-4": "oklch(0.532 0.157 131.589)",
-      "chart-5": "oklch(0.453 0.124 130.933)",
+      "chart-1": "oklch(0.869 0.005 56.366)",
+      "chart-2": "oklch(0.553 0.013 58.071)",
+      "chart-3": "oklch(0.444 0.011 73.639)",
+      "chart-4": "oklch(0.374 0.01 67.558)",
+      "chart-5": "oklch(0.268 0.007 34.298)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.985 0.001 106.423)",
      "sidebar-foreground": "oklch(0.147 0.004 49.25)",
@@ -53,11 +53,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.553 0.013 58.071)",
-      "chart-1": "oklch(0.897 0.196 126.665)",
-      "chart-2": "oklch(0.768 0.233 130.85)",
-      "chart-3": "oklch(0.648 0.2 131.684)",
-      "chart-4": "oklch(0.532 0.157 131.589)",
-      "chart-5": "oklch(0.453 0.124 130.933)",
+      "chart-1": "oklch(0.869 0.005 56.366)",
+      "chart-2": "oklch(0.553 0.013 58.071)",
+      "chart-3": "oklch(0.444 0.011 73.639)",
+      "chart-4": "oklch(0.374 0.01 67.558)",
+      "chart-5": "oklch(0.268 0.007 34.298)",
      "sidebar": "oklch(0.216 0.006 56.043)",
      "sidebar-foreground": "oklch(0.985 0.001 106.423)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -88,11 +88,11 @@
      "border": "oklch(0.923 0.003 48.717)",
      "input": "oklch(0.923 0.003 48.717)",
      "ring": "oklch(0.709 0.01 56.259)",
-      "chart-1": "oklch(0.897 0.196 126.665)",
-      "chart-2": "oklch(0.768 0.233 130.85)",
-      "chart-3": "oklch(0.648 0.2 131.684)",
-      "chart-4": "oklch(0.532 0.157 131.589)",
-      "chart-5": "oklch(0.453 0.124 130.933)",
+      "chart-1": "oklch(0.869 0.005 56.366)",
+      "chart-2": "oklch(0.553 0.013 58.071)",
+      "chart-3": "oklch(0.444 0.011 73.639)",
+      "chart-4": "oklch(0.374 0.01 67.558)",
+      "chart-5": "oklch(0.268 0.007 34.298)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.985 0.001 106.423)",
      "sidebar-foreground": "oklch(0.147 0.004 49.25)",
@@ -122,11 +122,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.553 0.013 58.071)",
-      "chart-1": "oklch(0.897 0.196 126.665)",
-      "chart-2": "oklch(0.768 0.233 130.85)",
-      "chart-3": "oklch(0.648 0.2 131.684)",
-      "chart-4": "oklch(0.532 0.157 131.589)",
-      "chart-5": "oklch(0.453 0.124 130.933)",
+      "chart-1": "oklch(0.869 0.005 56.366)",
+      "chart-2": "oklch(0.553 0.013 58.071)",
+      "chart-3": "oklch(0.444 0.011 73.639)",
+      "chart-4": "oklch(0.374 0.01 67.558)",
+      "chart-5": "oklch(0.268 0.007 34.298)",
      "sidebar": "oklch(0.216 0.006 56.043)",
      "sidebar-foreground": "oklch(0.985 0.001 106.423)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -157,11 +157,11 @@
      "border": "oklch(0.923 0.003 48.717)",
      "input": "oklch(0.923 0.003 48.717)",
      "ring": "oklch(0.709 0.01 56.259)",
-      "chart-1": "oklch(0.897 0.196 126.665)",
-      "chart-2": "oklch(0.768 0.233 130.85)",
-      "chart-3": "oklch(0.648 0.2 131.684)",
-      "chart-4": "oklch(0.532 0.157 131.589)",
-      "chart-5": "oklch(0.453 0.124 130.933)",
+      "chart-1": "oklch(0.869 0.005 56.366)",
+      "chart-2": "oklch(0.553 0.013 58.071)",
+      "chart-3": "oklch(0.444 0.011 73.639)",
+      "chart-4": "oklch(0.374 0.01 67.558)",
+      "chart-5": "oklch(0.268 0.007 34.298)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.985 0.001 106.423)",
      "sidebar-foreground": "oklch(0.147 0.004 49.25)",
@@ -191,11 +191,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.553 0.013 58.071)",
-      "chart-1": "oklch(0.897 0.196 126.665)",
-      "chart-2": "oklch(0.768 0.233 130.85)",
-      "chart-3": "oklch(0.648 0.2 131.684)",
-      "chart-4": "oklch(0.532 0.157 131.589)",
-      "chart-5": "oklch(0.453 0.124 130.933)",
+      "chart-1": "oklch(0.869 0.005 56.366)",
+      "chart-2": "oklch(0.553 0.013 58.071)",
+      "chart-3": "oklch(0.444 0.011 73.639)",
+      "chart-4": "oklch(0.374 0.01 67.558)",
+      "chart-5": "oklch(0.268 0.007 34.298)",
      "sidebar": "oklch(0.216 0.006 56.043)",
      "sidebar-foreground": "oklch(0.985 0.001 106.423)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -207,5 +207,5 @@
    }
  },
  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.147 0.004 49.25);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.147 0.004 49.25);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.147 0.004 49.25);\n    --primary: oklch(0.216 0.006 56.043);\n    --primary-foreground: oklch(0.985 0.001 106.423);\n    --secondary: oklch(0.97 0.001 106.424);\n    --secondary-foreground: oklch(0.216 0.006 56.043);\n    --muted: oklch(0.97 0.001 106.424);\n    --muted-foreground: oklch(0.553 0.013 58.071);\n    --accent: oklch(0.97 0.001 106.424);\n    --accent-foreground: oklch(0.216 0.006 56.043);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.923 0.003 48.717);\n    --input: oklch(0.923 0.003 48.717);\n    --ring: oklch(0.709 0.01 56.259);\n    --chart-1: oklch(0.897 0.196 126.665);\n    --chart-2: oklch(0.768 0.233 130.85);\n    --chart-3: oklch(0.648 0.2 131.684);\n    --chart-4: oklch(0.532 0.157 131.589);\n    --chart-5: oklch(0.453 0.124 130.933);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.147 0.004 49.25);\n    --foreground: oklch(0.985 0.001 106.423);\n    --card: oklch(0.216 0.006 56.043);\n    --card-foreground: oklch(0.985 0.001 106.423);\n    --popover: oklch(0.216 0.006 56.043);\n    --popover-foreground: oklch(0.985 0.001 106.423);\n    --primary: oklch(0.923 0.003 48.717);\n    --primary-foreground: oklch(0.216 0.006 56.043);\n    --secondary: oklch(0.268 0.007 34.298);\n    --secondary-foreground: oklch(0.985 0.001 106.423);\n    --muted: oklch(0.268 0.007 34.298);\n    --muted-foreground: oklch(0.709 0.01 56.259);\n    --accent: oklch(0.268 0.007 34.298);\n    --accent-foreground: oklch(0.985 0.001 106.423);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.553 0.013 58.071);\n    --chart-1: oklch(0.897 0.196 126.665);\n    --chart-2: oklch(0.768 0.233 130.85);\n    --chart-3: oklch(0.648 0.2 131.684);\n    --chart-4: oklch(0.532 0.157 131.589);\n    --chart-5: oklch(0.453 0.124 130.933);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.147 0.004 49.25);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.147 0.004 49.25);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.147 0.004 49.25);\n    --primary: oklch(0.216 0.006 56.043);\n    --primary-foreground: oklch(0.985 0.001 106.423);\n    --secondary: oklch(0.97 0.001 106.424);\n    --secondary-foreground: oklch(0.216 0.006 56.043);\n    --muted: oklch(0.97 0.001 106.424);\n    --muted-foreground: oklch(0.553 0.013 58.071);\n    --accent: oklch(0.97 0.001 106.424);\n    --accent-foreground: oklch(0.216 0.006 56.043);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.923 0.003 48.717);\n    --input: oklch(0.923 0.003 48.717);\n    --ring: oklch(0.709 0.01 56.259);\n    --chart-1: oklch(0.869 0.005 56.366);\n    --chart-2: oklch(0.553 0.013 58.071);\n    --chart-3: oklch(0.444 0.011 73.639);\n    --chart-4: oklch(0.374 0.01 67.558);\n    --chart-5: oklch(0.268 0.007 34.298);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.147 0.004 49.25);\n    --foreground: oklch(0.985 0.001 106.423);\n    --card: oklch(0.216 0.006 56.043);\n    --card-foreground: oklch(0.985 0.001 106.423);\n    --popover: oklch(0.216 0.006 56.043);\n    --popover-foreground: oklch(0.985 0.001 106.423);\n    --primary: oklch(0.923 0.003 48.717);\n    --primary-foreground: oklch(0.216 0.006 56.043);\n    --secondary: oklch(0.268 0.007 34.298);\n    --secondary-foreground: oklch(0.985 0.001 106.423);\n    --muted: oklch(0.268 0.007 34.298);\n    --muted-foreground: oklch(0.709 0.01 56.259);\n    --accent: oklch(0.268 0.007 34.298);\n    --accent-foreground: oklch(0.985 0.001 106.423);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.553 0.013 58.071);\n    --chart-1: oklch(0.869 0.005 56.366);\n    --chart-2: oklch(0.553 0.013 58.071);\n    --chart-3: oklch(0.444 0.011 73.639);\n    --chart-4: oklch(0.374 0.01 67.558);\n    --chart-5: oklch(0.268 0.007 34.298);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
--- a/apps/v4/public/r/colors/taupe.json
+++ b/apps/v4/public/r/colors/taupe.json
@@ -19,11 +19,11 @@
      "border": "oklch(0.922 0.005 34.3)",
      "input": "oklch(0.922 0.005 34.3)",
      "ring": "oklch(0.714 0.014 41.2)",
-      "chart-1": "oklch(0.865 0.127 207.078)",
-      "chart-2": "oklch(0.715 0.143 215.221)",
-      "chart-3": "oklch(0.609 0.126 221.723)",
-      "chart-4": "oklch(0.52 0.105 223.128)",
-      "chart-5": "oklch(0.45 0.085 224.283)",
+      "chart-1": "oklch(0.868 0.007 39.5)",
+      "chart-2": "oklch(0.547 0.021 43.1)",
+      "chart-3": "oklch(0.438 0.017 39.3)",
+      "chart-4": "oklch(0.367 0.016 35.7)",
+      "chart-5": "oklch(0.268 0.011 36.5)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.986 0.002 67.8)",
      "sidebar-foreground": "oklch(0.147 0.004 49.3)",
@@ -53,11 +53,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.547 0.021 43.1)",
-      "chart-1": "oklch(0.865 0.127 207.078)",
-      "chart-2": "oklch(0.715 0.143 215.221)",
-      "chart-3": "oklch(0.609 0.126 221.723)",
-      "chart-4": "oklch(0.52 0.105 223.128)",
-      "chart-5": "oklch(0.45 0.085 224.283)",
+      "chart-1": "oklch(0.868 0.007 39.5)",
+      "chart-2": "oklch(0.547 0.021 43.1)",
+      "chart-3": "oklch(0.438 0.017 39.3)",
+      "chart-4": "oklch(0.367 0.016 35.7)",
+      "chart-5": "oklch(0.268 0.011 36.5)",
      "sidebar": "oklch(0.214 0.009 43.1)",
      "sidebar-foreground": "oklch(0.986 0.002 67.8)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -88,11 +88,11 @@
      "border": "oklch(0.922 0.005 34.3)",
      "input": "oklch(0.922 0.005 34.3)",
      "ring": "oklch(0.714 0.014 41.2)",
-      "chart-1": "oklch(0.865 0.127 207.078)",
-      "chart-2": "oklch(0.715 0.143 215.221)",
-      "chart-3": "oklch(0.609 0.126 221.723)",
-      "chart-4": "oklch(0.52 0.105 223.128)",
-      "chart-5": "oklch(0.45 0.085 224.283)",
+      "chart-1": "oklch(0.868 0.007 39.5)",
+      "chart-2": "oklch(0.547 0.021 43.1)",
+      "chart-3": "oklch(0.438 0.017 39.3)",
+      "chart-4": "oklch(0.367 0.016 35.7)",
+      "chart-5": "oklch(0.268 0.011 36.5)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.986 0.002 67.8)",
      "sidebar-foreground": "oklch(0.147 0.004 49.3)",
@@ -122,11 +122,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.547 0.021 43.1)",
-      "chart-1": "oklch(0.865 0.127 207.078)",
-      "chart-2": "oklch(0.715 0.143 215.221)",
-      "chart-3": "oklch(0.609 0.126 221.723)",
-      "chart-4": "oklch(0.52 0.105 223.128)",
-      "chart-5": "oklch(0.45 0.085 224.283)",
+      "chart-1": "oklch(0.868 0.007 39.5)",
+      "chart-2": "oklch(0.547 0.021 43.1)",
+      "chart-3": "oklch(0.438 0.017 39.3)",
+      "chart-4": "oklch(0.367 0.016 35.7)",
+      "chart-5": "oklch(0.268 0.011 36.5)",
      "sidebar": "oklch(0.214 0.009 43.1)",
      "sidebar-foreground": "oklch(0.986 0.002 67.8)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -157,11 +157,11 @@
      "border": "oklch(0.922 0.005 34.3)",
      "input": "oklch(0.922 0.005 34.3)",
      "ring": "oklch(0.714 0.014 41.2)",
-      "chart-1": "oklch(0.865 0.127 207.078)",
-      "chart-2": "oklch(0.715 0.143 215.221)",
-      "chart-3": "oklch(0.609 0.126 221.723)",
-      "chart-4": "oklch(0.52 0.105 223.128)",
-      "chart-5": "oklch(0.45 0.085 224.283)",
+      "chart-1": "oklch(0.868 0.007 39.5)",
+      "chart-2": "oklch(0.547 0.021 43.1)",
+      "chart-3": "oklch(0.438 0.017 39.3)",
+      "chart-4": "oklch(0.367 0.016 35.7)",
+      "chart-5": "oklch(0.268 0.011 36.5)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.986 0.002 67.8)",
      "sidebar-foreground": "oklch(0.147 0.004 49.3)",
@@ -191,11 +191,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.547 0.021 43.1)",
-      "chart-1": "oklch(0.865 0.127 207.078)",
-      "chart-2": "oklch(0.715 0.143 215.221)",
-      "chart-3": "oklch(0.609 0.126 221.723)",
-      "chart-4": "oklch(0.52 0.105 223.128)",
-      "chart-5": "oklch(0.45 0.085 224.283)",
+      "chart-1": "oklch(0.868 0.007 39.5)",
+      "chart-2": "oklch(0.547 0.021 43.1)",
+      "chart-3": "oklch(0.438 0.017 39.3)",
+      "chart-4": "oklch(0.367 0.016 35.7)",
+      "chart-5": "oklch(0.268 0.011 36.5)",
      "sidebar": "oklch(0.214 0.009 43.1)",
      "sidebar-foreground": "oklch(0.986 0.002 67.8)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -207,5 +207,5 @@
    }
  },
  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.147 0.004 49.3);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.147 0.004 49.3);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.147 0.004 49.3);\n    --primary: oklch(0.214 0.009 43.1);\n    --primary-foreground: oklch(0.986 0.002 67.8);\n    --secondary: oklch(0.96 0.002 17.2);\n    --secondary-foreground: oklch(0.214 0.009 43.1);\n    --muted: oklch(0.96 0.002 17.2);\n    --muted-foreground: oklch(0.547 0.021 43.1);\n    --accent: oklch(0.96 0.002 17.2);\n    --accent-foreground: oklch(0.214 0.009 43.1);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.922 0.005 34.3);\n    --input: oklch(0.922 0.005 34.3);\n    --ring: oklch(0.714 0.014 41.2);\n    --chart-1: oklch(0.865 0.127 207.078);\n    --chart-2: oklch(0.715 0.143 215.221);\n    --chart-3: oklch(0.609 0.126 221.723);\n    --chart-4: oklch(0.52 0.105 223.128);\n    --chart-5: oklch(0.45 0.085 224.283);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.147 0.004 49.3);\n    --foreground: oklch(0.986 0.002 67.8);\n    --card: oklch(0.214 0.009 43.1);\n    --card-foreground: oklch(0.986 0.002 67.8);\n    --popover: oklch(0.214 0.009 43.1);\n    --popover-foreground: oklch(0.986 0.002 67.8);\n    --primary: oklch(0.922 0.005 34.3);\n    --primary-foreground: oklch(0.214 0.009 43.1);\n    --secondary: oklch(0.268 0.011 36.5);\n    --secondary-foreground: oklch(0.986 0.002 67.8);\n    --muted: oklch(0.268 0.011 36.5);\n    --muted-foreground: oklch(0.714 0.014 41.2);\n    --accent: oklch(0.268 0.011 36.5);\n    --accent-foreground: oklch(0.986 0.002 67.8);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.547 0.021 43.1);\n    --chart-1: oklch(0.865 0.127 207.078);\n    --chart-2: oklch(0.715 0.143 215.221);\n    --chart-3: oklch(0.609 0.126 221.723);\n    --chart-4: oklch(0.52 0.105 223.128);\n    --chart-5: oklch(0.45 0.085 224.283);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.147 0.004 49.3);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.147 0.004 49.3);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.147 0.004 49.3);\n    --primary: oklch(0.214 0.009 43.1);\n    --primary-foreground: oklch(0.986 0.002 67.8);\n    --secondary: oklch(0.96 0.002 17.2);\n    --secondary-foreground: oklch(0.214 0.009 43.1);\n    --muted: oklch(0.96 0.002 17.2);\n    --muted-foreground: oklch(0.547 0.021 43.1);\n    --accent: oklch(0.96 0.002 17.2);\n    --accent-foreground: oklch(0.214 0.009 43.1);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.922 0.005 34.3);\n    --input: oklch(0.922 0.005 34.3);\n    --ring: oklch(0.714 0.014 41.2);\n    --chart-1: oklch(0.868 0.007 39.5);\n    --chart-2: oklch(0.547 0.021 43.1);\n    --chart-3: oklch(0.438 0.017 39.3);\n    --chart-4: oklch(0.367 0.016 35.7);\n    --chart-5: oklch(0.268 0.011 36.5);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.147 0.004 49.3);\n    --foreground: oklch(0.986 0.002 67.8);\n    --card: oklch(0.214 0.009 43.1);\n    --card-foreground: oklch(0.986 0.002 67.8);\n    --popover: oklch(0.214 0.009 43.1);\n    --popover-foreground: oklch(0.986 0.002 67.8);\n    --primary: oklch(0.922 0.005 34.3);\n    --primary-foreground: oklch(0.214 0.009 43.1);\n    --secondary: oklch(0.268 0.011 36.5);\n    --secondary-foreground: oklch(0.986 0.002 67.8);\n    --muted: oklch(0.268 0.011 36.5);\n    --muted-foreground: oklch(0.714 0.014 41.2);\n    --accent: oklch(0.268 0.011 36.5);\n    --accent-foreground: oklch(0.986 0.002 67.8);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.547 0.021 43.1);\n    --chart-1: oklch(0.868 0.007 39.5);\n    --chart-2: oklch(0.547 0.021 43.1);\n    --chart-3: oklch(0.438 0.017 39.3);\n    --chart-4: oklch(0.367 0.016 35.7);\n    --chart-5: oklch(0.268 0.011 36.5);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
--- a/apps/v4/public/r/colors/zinc.json
+++ b/apps/v4/public/r/colors/zinc.json
@@ -19,11 +19,11 @@
      "border": "oklch(0.92 0.004 286.32)",
      "input": "oklch(0.92 0.004 286.32)",
      "ring": "oklch(0.705 0.015 286.067)",
-      "chart-1": "oklch(0.879 0.169 91.605)",
-      "chart-2": "oklch(0.769 0.188 70.08)",
-      "chart-3": "oklch(0.666 0.179 58.318)",
-      "chart-4": "oklch(0.555 0.163 48.998)",
-      "chart-5": "oklch(0.473 0.137 46.201)",
+      "chart-1": "oklch(0.871 0.006 286.286)",
+      "chart-2": "oklch(0.552 0.016 285.938)",
+      "chart-3": "oklch(0.442 0.017 285.786)",
+      "chart-4": "oklch(0.37 0.013 285.805)",
+      "chart-5": "oklch(0.274 0.006 286.033)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.985 0 0)",
      "sidebar-foreground": "oklch(0.141 0.005 285.823)",
@@ -53,11 +53,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.552 0.016 285.938)",
-      "chart-1": "oklch(0.879 0.169 91.605)",
-      "chart-2": "oklch(0.769 0.188 70.08)",
-      "chart-3": "oklch(0.666 0.179 58.318)",
-      "chart-4": "oklch(0.555 0.163 48.998)",
-      "chart-5": "oklch(0.473 0.137 46.201)",
+      "chart-1": "oklch(0.871 0.006 286.286)",
+      "chart-2": "oklch(0.552 0.016 285.938)",
+      "chart-3": "oklch(0.442 0.017 285.786)",
+      "chart-4": "oklch(0.37 0.013 285.805)",
+      "chart-5": "oklch(0.274 0.006 286.033)",
      "sidebar": "oklch(0.21 0.006 285.885)",
      "sidebar-foreground": "oklch(0.985 0 0)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -88,11 +88,11 @@
      "border": "oklch(0.92 0.004 286.32)",
      "input": "oklch(0.92 0.004 286.32)",
      "ring": "oklch(0.705 0.015 286.067)",
-      "chart-1": "oklch(0.879 0.169 91.605)",
-      "chart-2": "oklch(0.769 0.188 70.08)",
-      "chart-3": "oklch(0.666 0.179 58.318)",
-      "chart-4": "oklch(0.555 0.163 48.998)",
-      "chart-5": "oklch(0.473 0.137 46.201)",
+      "chart-1": "oklch(0.871 0.006 286.286)",
+      "chart-2": "oklch(0.552 0.016 285.938)",
+      "chart-3": "oklch(0.442 0.017 285.786)",
+      "chart-4": "oklch(0.37 0.013 285.805)",
+      "chart-5": "oklch(0.274 0.006 286.033)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.985 0 0)",
      "sidebar-foreground": "oklch(0.141 0.005 285.823)",
@@ -122,11 +122,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.552 0.016 285.938)",
-      "chart-1": "oklch(0.879 0.169 91.605)",
-      "chart-2": "oklch(0.769 0.188 70.08)",
-      "chart-3": "oklch(0.666 0.179 58.318)",
-      "chart-4": "oklch(0.555 0.163 48.998)",
-      "chart-5": "oklch(0.473 0.137 46.201)",
+      "chart-1": "oklch(0.871 0.006 286.286)",
+      "chart-2": "oklch(0.552 0.016 285.938)",
+      "chart-3": "oklch(0.442 0.017 285.786)",
+      "chart-4": "oklch(0.37 0.013 285.805)",
+      "chart-5": "oklch(0.274 0.006 286.033)",
      "sidebar": "oklch(0.21 0.006 285.885)",
      "sidebar-foreground": "oklch(0.985 0 0)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -157,11 +157,11 @@
      "border": "oklch(0.92 0.004 286.32)",
      "input": "oklch(0.92 0.004 286.32)",
      "ring": "oklch(0.705 0.015 286.067)",
-      "chart-1": "oklch(0.879 0.169 91.605)",
-      "chart-2": "oklch(0.769 0.188 70.08)",
-      "chart-3": "oklch(0.666 0.179 58.318)",
-      "chart-4": "oklch(0.555 0.163 48.998)",
-      "chart-5": "oklch(0.473 0.137 46.201)",
+      "chart-1": "oklch(0.871 0.006 286.286)",
+      "chart-2": "oklch(0.552 0.016 285.938)",
+      "chart-3": "oklch(0.442 0.017 285.786)",
+      "chart-4": "oklch(0.37 0.013 285.805)",
+      "chart-5": "oklch(0.274 0.006 286.033)",
      "radius": "0.625rem",
      "sidebar": "oklch(0.985 0 0)",
      "sidebar-foreground": "oklch(0.141 0.005 285.823)",
@@ -191,11 +191,11 @@
      "border": "oklch(1 0 0 / 10%)",
      "input": "oklch(1 0 0 / 15%)",
      "ring": "oklch(0.552 0.016 285.938)",
-      "chart-1": "oklch(0.879 0.169 91.605)",
-      "chart-2": "oklch(0.769 0.188 70.08)",
-      "chart-3": "oklch(0.666 0.179 58.318)",
-      "chart-4": "oklch(0.555 0.163 48.998)",
-      "chart-5": "oklch(0.473 0.137 46.201)",
+      "chart-1": "oklch(0.871 0.006 286.286)",
+      "chart-2": "oklch(0.552 0.016 285.938)",
+      "chart-3": "oklch(0.442 0.017 285.786)",
+      "chart-4": "oklch(0.37 0.013 285.805)",
+      "chart-5": "oklch(0.274 0.006 286.033)",
      "sidebar": "oklch(0.21 0.006 285.885)",
      "sidebar-foreground": "oklch(0.985 0 0)",
      "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -207,5 +207,5 @@
    }
  },
  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.141 0.005 285.823);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.141 0.005 285.823);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.141 0.005 285.823);\n    --primary: oklch(0.21 0.006 285.885);\n    --primary-foreground: oklch(0.985 0 0);\n    --secondary: oklch(0.967 0.001 286.375);\n    --secondary-foreground: oklch(0.21 0.006 285.885);\n    --muted: oklch(0.967 0.001 286.375);\n    --muted-foreground: oklch(0.552 0.016 285.938);\n    --accent: oklch(0.967 0.001 286.375);\n    --accent-foreground: oklch(0.21 0.006 285.885);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.92 0.004 286.32);\n    --input: oklch(0.92 0.004 286.32);\n    --ring: oklch(0.705 0.015 286.067);\n    --chart-1: oklch(0.879 0.169 91.605);\n    --chart-2: oklch(0.769 0.188 70.08);\n    --chart-3: oklch(0.666 0.179 58.318);\n    --chart-4: oklch(0.555 0.163 48.998);\n    --chart-5: oklch(0.473 0.137 46.201);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.141 0.005 285.823);\n    --foreground: oklch(0.985 0 0);\n    --card: oklch(0.21 0.006 285.885);\n    --card-foreground: oklch(0.985 0 0);\n    --popover: oklch(0.21 0.006 285.885);\n    --popover-foreground: oklch(0.985 0 0);\n    --primary: oklch(0.92 0.004 286.32);\n    --primary-foreground: oklch(0.21 0.006 285.885);\n    --secondary: oklch(0.274 0.006 286.033);\n    --secondary-foreground: oklch(0.985 0 0);\n    --muted: oklch(0.274 0.006 286.033);\n    --muted-foreground: oklch(0.705 0.015 286.067);\n    --accent: oklch(0.274 0.006 286.033);\n    --accent-foreground: oklch(0.985 0 0);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.552 0.016 285.938);\n    --chart-1: oklch(0.879 0.169 91.605);\n    --chart-2: oklch(0.769 0.188 70.08);\n    --chart-3: oklch(0.666 0.179 58.318);\n    --chart-4: oklch(0.555 0.163 48.998);\n    --chart-5: oklch(0.473 0.137 46.201);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.141 0.005 285.823);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.141 0.005 285.823);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.141 0.005 285.823);\n    --primary: oklch(0.21 0.006 285.885);\n    --primary-foreground: oklch(0.985 0 0);\n    --secondary: oklch(0.967 0.001 286.375);\n    --secondary-foreground: oklch(0.21 0.006 285.885);\n    --muted: oklch(0.967 0.001 286.375);\n    --muted-foreground: oklch(0.552 0.016 285.938);\n    --accent: oklch(0.967 0.001 286.375);\n    --accent-foreground: oklch(0.21 0.006 285.885);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.92 0.004 286.32);\n    --input: oklch(0.92 0.004 286.32);\n    --ring: oklch(0.705 0.015 286.067);\n    --chart-1: oklch(0.871 0.006 286.286);\n    --chart-2: oklch(0.552 0.016 285.938);\n    --chart-3: oklch(0.442 0.017 285.786);\n    --chart-4: oklch(0.37 0.013 285.805);\n    --chart-5: oklch(0.274 0.006 286.033);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.141 0.005 285.823);\n    --foreground: oklch(0.985 0 0);\n    --card: oklch(0.21 0.006 285.885);\n    --card-foreground: oklch(0.985 0 0);\n    --popover: oklch(0.21 0.006 285.885);\n    --popover-foreground: oklch(0.985 0 0);\n    --primary: oklch(0.92 0.004 286.32);\n    --primary-foreground: oklch(0.21 0.006 285.885);\n    --secondary: oklch(0.274 0.006 286.033);\n    --secondary-foreground: oklch(0.985 0 0);\n    --muted: oklch(0.274 0.006 286.033);\n    --muted-foreground: oklch(0.705 0.015 286.067);\n    --accent: oklch(0.274 0.006 286.033);\n    --accent-foreground: oklch(0.985 0 0);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.552 0.016 285.938);\n    --chart-1: oklch(0.871 0.006 286.286);\n    --chart-2: oklch(0.552 0.016 285.938);\n    --chart-3: oklch(0.442 0.017 285.786);\n    --chart-4: oklch(0.37 0.013 285.805);\n    --chart-5: oklch(0.274 0.006 286.033);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
--- a/apps/v4/public/r/config.json
+++ b/apps/v4/public/r/config.json
@@ -8,8 +8,10 @@
      "style": "vega",
      "baseColor": "neutral",
      "theme": "neutral",
+      "chartColor": "neutral",
      "iconLibrary": "lucide",
      "font": "inter",
+      "fontHeading": "inherit",
      "item": "Item",
      "rtl": false,
      "menuAccent": "subtle",
@@ -24,8 +26,10 @@
      "style": "nova",
      "baseColor": "neutral",
      "theme": "neutral",
+      "chartColor": "neutral",
      "iconLibrary": "lucide",
      "font": "geist",
+      "fontHeading": "inherit",
      "item": "Item",
      "rtl": false,
      "menuAccent": "subtle",
@@ -40,8 +44,10 @@
      "style": "maia",
      "baseColor": "neutral",
      "theme": "neutral",
+      "chartColor": "neutral",
      "iconLibrary": "hugeicons",
      "font": "figtree",
+      "fontHeading": "inherit",
      "item": "Item",
      "rtl": false,
      "menuAccent": "subtle",
@@ -56,8 +62,10 @@
      "style": "lyra",
      "baseColor": "neutral",
      "theme": "neutral",
+      "chartColor": "neutral",
      "iconLibrary": "phosphor",
      "font": "jetbrains-mono",
+      "fontHeading": "inherit",
      "item": "Item",
      "rtl": false,
      "menuAccent": "subtle",
@@ -72,8 +80,10 @@
      "style": "vega",
      "baseColor": "neutral",
      "theme": "neutral",
+      "chartColor": "neutral",
      "iconLibrary": "lucide",
      "font": "inter",
+      "fontHeading": "inherit",
      "item": "Item",
      "rtl": false,
      "menuAccent": "subtle",
@@ -88,8 +98,10 @@
      "style": "nova",
      "baseColor": "neutral",
      "theme": "neutral",
+      "chartColor": "neutral",
      "iconLibrary": "lucide",
      "font": "geist",
+      "fontHeading": "inherit",
      "item": "Item",
      "rtl": false,
      "menuAccent": "subtle",
@@ -104,8 +116,10 @@
      "style": "maia",
      "baseColor": "neutral",
      "theme": "neutral",
+      "chartColor": "neutral",
      "iconLibrary": "hugeicons",
      "font": "figtree",
+      "fontHeading": "inherit",
      "item": "Item",
      "rtl": false,
      "menuAccent": "subtle",
@@ -120,8 +134,10 @@
      "style": "lyra",
      "baseColor": "neutral",
      "theme": "neutral",
+      "chartColor": "neutral",
      "iconLibrary": "phosphor",
      "font": "jetbrains-mono",
+      "fontHeading": "inherit",
      "item": "Item",
      "rtl": false,
      "menuAccent": "subtle",
@@ -136,8 +152,10 @@
      "style": "mira",
      "baseColor": "neutral",
      "theme": "neutral",
+      "chartColor": "neutral",
      "iconLibrary": "hugeicons",
      "font": "inter",
+      "fontHeading": "inherit",
      "item": "Item",
      "rtl": false,
      "menuAccent": "subtle",
@@ -152,8 +170,10 @@
      "style": "mira",
      "baseColor": "neutral",
      "theme": "neutral",
+      "chartColor": "neutral",
      "iconLibrary": "hugeicons",
      "font": "inter",
+      "fontHeading": "inherit",
      "item": "Item",
      "rtl": false,
      "menuAccent": "subtle",
--- a/apps/v4/public/r/styles/base-lyra/alert-dialog.json
+++ b/apps/v4/public/r/styles/base-lyra/alert-dialog.json
--- a/apps/v4/public/r/styles/base-lyra/alert.json
+++ b/apps/v4/public/r/styles/base-lyra/alert.json
@@ -4,7 +4,7 @@
  "files": [
    {
      "path": "registry/base-lyra/ui/alert.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-xs/relaxed text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\n        \"absolute top-[calc(--spacing(1.25))] right-[calc(--spacing(1.25))]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"cn-font-heading font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-xs/relaxed text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\n        \"absolute top-[calc(--spacing(1.25))] right-[calc(--spacing(1.25))]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
      "type": "registry:ui"
    }
  ],
--- a/apps/v4/public/r/styles/base-lyra/card.json
+++ b/apps/v4/public/r/styles/base-lyra/card.json
@@ -4,7 +4,7 @@
  "files": [
    {
      "path": "registry/base-lyra/ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-4 overflow-hidden rounded-none bg-card py-4 text-xs/relaxed text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-none px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-sm font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-none border-t p-4 group-data-[size=sm]/card:p-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-4 overflow-hidden rounded-none bg-card py-4 text-xs/relaxed text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-none px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"cn-font-heading text-sm font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-none border-t p-4 group-data-[size=sm]/card:p-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
      "type": "registry:ui"
    }
  ],
--- a/apps/v4/public/r/styles/base-lyra/demo.json
+++ b/apps/v4/public/r/styles/base-lyra/demo.json
--- a/apps/v4/public/r/styles/base-lyra/dialog.json
+++ b/apps/v4/public/r/styles/base-lyra/dialog.json
@@ -7,7 +7,7 @@
  "files": [
    {
      "path": "registry/base-lyra/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none bg-background p-4 text-xs/relaxed ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-xs/relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none bg-background p-4 text-xs/relaxed ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"cn-font-heading text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-xs/relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
      "type": "registry:ui"
    }
  ],
--- a/apps/v4/public/r/styles/base-lyra/drawer.json
+++ b/apps/v4/public/r/styles/base-lyra/drawer.json
@@ -7,7 +7,7 @@
  "files": [
    {
      "path": "registry/base-lyra/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-background text-xs/relaxed data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-background text-xs/relaxed data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-sm font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
      "type": "registry:ui"
    }
  ],
--- a/apps/v4/public/r/styles/base-lyra/empty.json
+++ b/apps/v4/public/r/styles/base-lyra/empty.json
@@ -4,7 +4,7 @@
  "files": [
    {
      "path": "registry/base-lyra/ui/empty.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-none border-dashed p-6 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-8 shrink-0 items-center justify-center rounded-none bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-xs text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-none border-dashed p-6 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-8 shrink-0 items-center justify-center rounded-none bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"cn-font-heading text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-xs text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
      "type": "registry:ui"
    }
  ],
--- a/apps/v4/public/r/styles/base-lyra/font-heading-dm-sans.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-dm-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-dm-sans",
+  "title": "DM Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'DM Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "DM_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/dm-sans"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-figtree.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-figtree.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-figtree",
+  "title": "Figtree (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Figtree Variable', sans-serif",
+    "provider": "google",
+    "import": "Figtree",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/figtree"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-geist-mono.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-geist-mono.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-geist-mono",
+  "title": "Geist Mono (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Geist Mono Variable', monospace",
+    "provider": "google",
+    "import": "Geist_Mono",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/geist-mono"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-geist.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-geist.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-geist",
+  "title": "Geist (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Geist Variable', sans-serif",
+    "provider": "google",
+    "import": "Geist",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/geist"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-ibm-plex-sans.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-ibm-plex-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-ibm-plex-sans",
+  "title": "IBM Plex Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'IBM Plex Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "IBM_Plex_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/ibm-plex-sans"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-instrument-sans.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-instrument-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-instrument-sans",
+  "title": "Instrument Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Instrument Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Instrument_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/instrument-sans"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-inter.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-inter.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-inter",
+  "title": "Inter (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Inter Variable', sans-serif",
+    "provider": "google",
+    "import": "Inter",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/inter"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-jetbrains-mono.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-jetbrains-mono.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-jetbrains-mono",
+  "title": "JetBrains Mono (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'JetBrains Mono Variable', monospace",
+    "provider": "google",
+    "import": "JetBrains_Mono",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/jetbrains-mono"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-lora.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-lora.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-lora",
+  "title": "Lora (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Lora Variable', serif",
+    "provider": "google",
+    "import": "Lora",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/lora"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-manrope.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-manrope.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-manrope",
+  "title": "Manrope (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Manrope Variable', sans-serif",
+    "provider": "google",
+    "import": "Manrope",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/manrope"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-merriweather.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-merriweather.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-merriweather",
+  "title": "Merriweather (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Merriweather Variable', serif",
+    "provider": "google",
+    "import": "Merriweather",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/merriweather"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-montserrat.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-montserrat.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-montserrat",
+  "title": "Montserrat (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Montserrat Variable', sans-serif",
+    "provider": "google",
+    "import": "Montserrat",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/montserrat"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-noto-sans.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-noto-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-noto-sans",
+  "title": "Noto Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Noto_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/noto-sans"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-noto-serif.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-noto-serif.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-noto-serif",
+  "title": "Noto Serif (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Serif Variable', serif",
+    "provider": "google",
+    "import": "Noto_Serif",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/noto-serif"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-nunito-sans.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-nunito-sans.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-nunito-sans",
+  "title": "Nunito Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Nunito Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Nunito_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/nunito-sans"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-outfit.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-outfit.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-outfit",
+  "title": "Outfit (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Outfit Variable', sans-serif",
+    "provider": "google",
+    "import": "Outfit",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/outfit"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-oxanium.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-oxanium.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-oxanium",
+  "title": "Oxanium (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Oxanium Variable', sans-serif",
+    "provider": "google",
+    "import": "Oxanium",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/oxanium"
+  }
+}
--- a/apps/v4/public/r/styles/base-lyra/font-heading-playfair-display.json
+++ b/apps/v4/public/r/styles/base-lyra/font-heading-playfair-display.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-playfair-display",
+  "title": "Playfair Display (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/playfair-display"
+  }
+}
--- a/Show More
+++ b/Show More