@camox/cli 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camox/cli",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "bin": {
     "camox": "./dist/index.mjs"
   },
@@ -26,7 +26,7 @@
     "@types/node": "^24.12.2",
     "@typescript/native-preview": "7.0.0-dev.20260412.1",
     "vite-plus": "latest",
-    "@camox/api-contract": "0.16.0"
+    "@camox/api-contract": "0.17.0"
   },
   "nx": {
     "tags": [

package/templates/default/components.json

@@ -6,7 +6,7 @@
   "tailwind": {
     "config": "",
     "css": "src/styles.css",
-    "baseColor": "gray",
+    "baseColor": "zinc",
     "cssVariables": true,
     "prefix": ""
   },
@@ -18,5 +18,8 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
+  "rtl": false,
+  "menuColor": "default",
+  "menuAccent": "subtle",
   "registries": {}
 }

package/templates/default/package.json

@@ -13,6 +13,8 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.4.0",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/noto-serif": "^5.2.9",
     "@tailwindcss/vite": "^4.2.2",
     "@tanstack/react-query": "^5.99.0",
     "@tanstack/react-router": "^1.168.18",
@@ -26,7 +28,7 @@
     "nitro": "3.0.260311-beta",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "shadcn": "^4.3.1",
+    "shadcn": "^4.6.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.0.6"
   },

package/templates/default/src/camox/blocks/faq.tsx

@@ -37,7 +37,7 @@ const faq = createBlock({
 
 function FaqComponent() {
   return (
-    <section className="py-24">
+    <section className="py-12 sm:py-16 md:py-20">
       <div className="mx-auto max-w-2xl px-4">
         <Accordion>
           <faq.Repeater name="items">

package/templates/default/src/camox/blocks/footer.tsx

@@ -11,11 +11,11 @@ const footer = createBlock({
     links: Type.RepeatableItem({
       content: {
         link: Type.Link({
-          default: { text: "Link", href: "#", newTab: false },
+          default: { text: "Footer link", href: "#", newTab: false },
           title: "Link",
         }),
       },
-      minItems: 1,
+      minItems: 2,
       maxItems: 12,
       title: "Links",
       toMarkdown: (c) => [c.link],
@@ -27,14 +27,17 @@ const footer = createBlock({
 
 function FooterComponent() {
   return (
-    <footer className="dark bg-background py-12">
+    <footer className="dark bg-background border-border border-t py-4">
       <div className="container mx-auto px-4">
-        <div className="flex flex-col items-center gap-6 sm:flex-row sm:justify-between">
-          <footer.Field name="title">
-            {(props) => <div {...props} className="text-foreground text-lg font-bold" />}
-          </footer.Field>
+        <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:gap-x-6 sm:gap-y-2">
+          <div className="flex items-center gap-2">
+            <footer.Field name="title">
+              {(props) => <div {...props} className="text-foreground text-sm font-bold" />}
+            </footer.Field>
+            <div className="text-muted-foreground text-sm">&copy; {new Date().getFullYear()}</div>
+          </div>
 
-          <div className="flex flex-wrap items-center gap-4">
+          <div className="flex flex-col items-start gap-4 sm:ml-auto sm:flex-row sm:flex-wrap sm:items-center sm:justify-end">
             <footer.Repeater name="links">
               {(linkItem) => (
                 <linkItem.Link name="link">
@@ -49,10 +52,6 @@ function FooterComponent() {
             </footer.Repeater>
           </div>
         </div>
-
-        <div className="text-muted-foreground mt-8 text-center text-sm">
-          &copy; {new Date().getFullYear()} All rights reserved.
-        </div>
       </div>
     </footer>
   );

package/templates/default/src/camox/blocks/hero.tsx

@@ -2,6 +2,7 @@ import { Link } from "@tanstack/react-router";
 import { Type, createBlock } from "camox/createBlock";
 
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 const hero = createBlock({
   id: "hero",
@@ -10,42 +11,78 @@ const hero = createBlock({
     "Use this block as the main landing section at the top of a page. It should capture attention immediately with a clear value proposition.",
   content: {
     title: Type.String({
-      default: "Welcome to {{projectName}}",
+      default: "Let's get going on {{projectName}}",
       title: "Title",
     }),
     description: Type.String({
-      default: "Build something amazing with Camox.",
+      default: "Press ⌘+Enter to access Camox Studio and edit content.",
       maxLength: 280,
       title: "Description",
     }),
     cta: Type.Link({
-      default: { text: "Get Started", href: "/", newTab: false },
+      default: { text: "Get started", href: "/", newTab: false },
       title: "CTA",
     }),
+    illustration: Type.Image({
+      title: "Illustration",
+    }),
+  },
+  settings: {
+    withIllustration: Type.Boolean({
+      default: true,
+      title: "With illustration",
+    }),
+    theme: Type.Enum({
+      default: "dark",
+      options: { light: "Light", dark: "Dark" },
+      title: "Theme",
+    }),
   },
   component: HeroComponent,
-  toMarkdown: (c) => [`# ${c.title}`, c.description, c.cta],
+  toMarkdown: (c, s) => [`# ${c.title}`, c.description, s.withIllustration(c.illustration), c.cta],
 });
 
 function HeroComponent() {
+  const withIllustration = hero.useSetting("withIllustration");
+  const theme = hero.useSetting("theme");
+
   return (
-    <section className="flex flex-col items-center justify-center py-32">
-      <div className="container mx-auto px-4">
-        <div className="mx-auto max-w-3xl text-center">
-          <hero.Field name="title">
-            {(props) => (
-              <h1
-                {...props}
-                className="text-foreground mb-6 text-5xl font-bold tracking-tight sm:text-6xl"
-              />
-            )}
-          </hero.Field>
-          <hero.Field name="description">
-            {(props) => <p {...props} className="text-muted-foreground mb-10 text-xl" />}
-          </hero.Field>
-          <hero.Link name="cta">
-            {(props) => <Button size="lg" nativeButton={false} render={<Link {...props} />} />}
-          </hero.Link>
+    <section
+      className={cn(
+        theme === "dark" ? "dark" : "light",
+        "bg-background py-16 sm:py-24 md:py-28",
+        !withIllustration && "flex flex-col items-center justify-center",
+      )}
+    >
+      <div className="container mx-auto">
+        <div
+          className={cn(
+            withIllustration
+              ? "grid items-center gap-12 lg:grid-cols-[1fr_auto]"
+              : "mx-auto max-w-3xl text-center",
+          )}
+        >
+          <div className={cn(withIllustration && "text-left")}>
+            <hero.Field name="title">
+              {(props) => (
+                <h1
+                  {...props}
+                  className="text-foreground mb-6 text-4xl font-bold tracking-tight sm:text-6xl"
+                />
+              )}
+            </hero.Field>
+            <hero.Field name="description">
+              {(props) => <p {...props} className="text-muted-foreground mb-10 text-xl" />}
+            </hero.Field>
+            <hero.Link name="cta">
+              {(props) => <Button size="lg" nativeButton={false} render={<Link {...props} />} />}
+            </hero.Link>
+          </div>
+          {withIllustration && (
+            <hero.Image name="illustration">
+              {(props) => <img {...props} className="h-auto w-full max-w-md rounded-lg" />}
+            </hero.Image>
+          )}
         </div>
       </div>
     </section>

package/templates/default/src/camox/blocks/navbar.tsx

@@ -1,5 +1,6 @@
 import { Link } from "@tanstack/react-router";
 import { Type, createBlock } from "camox/createBlock";
+import type { ReactElement } from "react";
 
 import { Button } from "@/components/ui/button";
 
@@ -31,44 +32,78 @@ const navbar = createBlock({
       toMarkdown: (c) => [c.link],
     }),
     cta: Type.Link({
-      default: { text: "Get Started", href: "#", newTab: false },
-      title: "CTA",
+      default: { text: "Get started", href: "#", newTab: false },
+      title: "Call to action",
+    }),
+  },
+  settings: {
+    sticky: Type.Boolean({
+      default: true,
+      title: "Sticky",
     }),
   },
   component: NavbarComponent,
   toMarkdown: (c) => [c.title, c.links, c.cta],
 });
 
-function NavbarComponent() {
-  return (
-    <nav className="dark bg-background border-border border-b">
-      <div className="container mx-auto px-4">
-        <div className="flex h-16 items-center justify-between">
-          <navbar.Link name="title">
-            {(props) => <Link {...props} className="text-foreground text-xl font-bold" />}
-          </navbar.Link>
+function NavbarComponent(): ReactElement {
+  const sticky = navbar.useSetting("sticky");
+
+  const innerContent = (
+    <div className="container mx-auto px-4">
+      <div className="flex h-16 items-center justify-between">
+        <navbar.Link name="title">
+          {(props) => <Link {...props} className="text-foreground text-lg font-bold" />}
+        </navbar.Link>
 
-          <div className="flex items-center gap-6">
-            <navbar.Repeater name="links">
-              {(linkItem) => (
-                <linkItem.Link name="link">
-                  {(props) => (
-                    <Link
-                      {...props}
-                      className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-                    />
-                  )}
-                </linkItem.Link>
-              )}
-            </navbar.Repeater>
+        <div className="flex items-center gap-6">
+          <navbar.Repeater name="links">
+            {(linkItem) => (
+              <linkItem.Link name="link">
+                {(props) => (
+                  <Link
+                    {...props}
+                    className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+                  />
+                )}
+              </linkItem.Link>
+            )}
+          </navbar.Repeater>
 
-            <navbar.Link name="cta">
-              {(props) => <Button size="sm" nativeButton={false} render={<Link {...props} />} />}
-            </navbar.Link>
-          </div>
+          <navbar.Link name="cta">
+            {(props) => (
+              <Button
+                size="sm"
+                variant="outline"
+                className="text-foreground"
+                nativeButton={false}
+                render={<Link {...props} />}
+              />
+            )}
+          </navbar.Link>
         </div>
       </div>
-    </nav>
+    </div>
+  );
+
+  if (!sticky) {
+    return <nav className="dark bg-background border-border border-b">{innerContent}</nav>;
+  }
+
+  return (
+    <>
+      <div aria-hidden className="dark bg-background h-16 border-b border-transparent" />
+      <navbar.Detached>
+        {(props) => (
+          <nav
+            {...props}
+            className="dark bg-background border-border fixed top-0 right-0 left-0 z-50 border-b"
+          >
+            {innerContent}
+          </nav>
+        )}
+      </navbar.Detached>
+    </>
   );
 }
 

package/templates/default/src/camox/blocks/statistics.tsx

@@ -44,51 +44,51 @@ const statistics = createBlock({
 
 function StatisticsComponent() {
   return (
-    <section className="dark bg-background py-24">
-      <div className="container mx-auto px-4">
-        <div className="mx-auto max-w-6xl">
-          <div className="mb-16">
-            <statistics.Field name="title">
-              {(props) => (
-                <div
-                  {...props}
-                  className="text-primary mb-4 text-sm font-semibold tracking-wider uppercase"
-                />
-              )}
-            </statistics.Field>
-            <statistics.Field name="subtitle">
-              {(props) => (
-                <h2 {...props} className="text-foreground mb-6 text-4xl font-bold sm:text-5xl" />
-              )}
-            </statistics.Field>
-            <statistics.Field name="description">
-              {(props) => (
-                <p {...props} className="text-muted-foreground max-w-3xl text-lg leading-relaxed" />
-              )}
-            </statistics.Field>
-          </div>
-
-          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
-            <statistics.Repeater name="statistics">
-              {(stat) => (
-                <div className="flex gap-3">
-                  <div className="w-0.5 bg-linear-to-b from-teal-400 to-blue-500" />
-                  <div className="flex flex-col">
-                    <stat.Field name="number">
-                      {(props) => (
-                        <div {...props} className="text-foreground mb-2 text-4xl font-bold" />
-                      )}
-                    </stat.Field>
-                    <stat.Field name="label">
-                      {(props) => (
-                        <p {...props} className="text-muted-foreground text-sm leading-relaxed" />
-                      )}
-                    </stat.Field>
-                  </div>
+    <section className="dark bg-background py-12 sm:py-16 md:py-20">
+      <div className="container mx-auto">
+        <div className="mb-16">
+          <statistics.Field name="title">
+            {(props) => (
+              <div
+                {...props}
+                className="text-accent-foreground mb-4 text-sm font-semibold tracking-wider uppercase"
+              />
+            )}
+          </statistics.Field>
+          <statistics.Field name="subtitle">
+            {(props) => (
+              <h2 {...props} className="text-foreground mb-6 text-3xl font-bold sm:text-5xl" />
+            )}
+          </statistics.Field>
+          <statistics.Field name="description">
+            {(props) => (
+              <p {...props} className="text-muted-foreground max-w-3xl text-lg leading-relaxed" />
+            )}
+          </statistics.Field>
+        </div>
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
+          <statistics.Repeater name="statistics">
+            {(stat) => (
+              <div className="flex gap-3">
+                <div className="from-chart-1 to-chart-2 w-0.5 bg-linear-to-b" />
+                <div className="flex flex-col">
+                  <stat.Field name="number">
+                    {(props) => (
+                      <div
+                        {...props}
+                        className="text-foreground mb-2 text-3xl font-bold sm:text-4xl"
+                      />
+                    )}
+                  </stat.Field>
+                  <stat.Field name="label">
+                    {(props) => (
+                      <p {...props} className="text-muted-foreground text-sm leading-relaxed" />
+                    )}
+                  </stat.Field>
                 </div>
-              )}
-            </statistics.Repeater>
-          </div>
+              </div>
+            )}
+          </statistics.Repeater>
         </div>
       </div>
     </section>

package/templates/default/src/camox/blocks/testimonial.tsx

@@ -11,9 +11,9 @@ const testimonial = createBlock({
         "This platform has transformed how we build and manage our website. The developer experience is exceptional.",
       title: "Quote",
     }),
-    author: Type.String({ default: "Sarah Chen", title: "Author" }),
+    author: Type.String({ default: "Kai Doe", title: "Author" }),
     title: Type.String({ default: "Senior Developer", title: "Title" }),
-    company: Type.String({ default: "TechCorp", title: "Company" }),
+    company: Type.String({ default: "E Corp", title: "Company" }),
   },
   component: TestimonialComponent,
   toMarkdown: (c) => [`> ${c.quote}`, `— ${c.author}, ${c.title}, ${c.company}`],
@@ -21,14 +21,14 @@ const testimonial = createBlock({
 
 function TestimonialComponent() {
   return (
-    <section className="bg-background py-24">
+    <section className="bg-background py-12 sm:py-16 md:py-24">
       <div className="container mx-auto px-4">
         <div className="mx-auto max-w-4xl text-center">
           <testimonial.Field name="quote">
             {(props) => (
               <blockquote
                 {...props}
-                className="text-foreground mb-8 text-2xl leading-relaxed font-medium sm:text-3xl"
+                className="text-foreground mb-8 text-xl leading-relaxed font-medium sm:text-3xl"
               >
                 "{props.children}"
               </blockquote>

package/templates/default/src/camox/blocks/youtube-video.tsx

@@ -0,0 +1,158 @@
+import { Type, createBlock } from "camox/createBlock";
+
+import { cn } from "@/lib/utils";
+
+const youtubeVideo = createBlock({
+  id: "youtube-video",
+  title: "YouTube Video",
+  description:
+    "Embeds a YouTube video. Use this block to display a single YouTube video on a page. Don't try to guess the URL, use a web search tool to find a specific video URL instead.",
+  content: {
+    url: Type.Embed({
+      pattern:
+        "https:\\/\\/(www\\.)?(youtube\\.com\\/(watch\\?v=|embed\\/|shorts\\/)|youtu\\.be\\/).+",
+      default: "https://www.youtube.com/watch?v=-W_nFlIAWFM",
+      title: "YouTube URL",
+    }),
+  },
+  settings: {
+    fullWidth: Type.Boolean({
+      default: false,
+      title: "Full Width",
+    }),
+    theme: Type.Enum({
+      options: {
+        light: "Light",
+        dark: "Dark",
+      },
+      default: "light",
+      title: "Theme",
+    }),
+    autoplay: Type.Boolean({
+      default: false,
+      title: "Autoplay",
+    }),
+    mute: Type.Boolean({
+      default: false,
+      title: "Mute",
+    }),
+    controls: Type.Boolean({
+      default: true,
+      title: "Controls",
+    }),
+    showCaptions: Type.Boolean({
+      default: false,
+      title: "Show Captions",
+    }),
+    rel: Type.Boolean({
+      default: false,
+      title: "Related Videos",
+    }),
+    fullscreen: Type.Boolean({
+      default: true,
+      title: "Fullscreen",
+    }),
+  },
+  component: YouTubeVideoComponent,
+  toMarkdown: (c) => [c.url],
+});
+
+function extractVideoId(url: string): string | null {
+  const shortMatch = url.match(/youtu\.be\/([^?&]+)/);
+  if (shortMatch) return shortMatch[1];
+
+  const shortsMatch = url.match(/youtube\.com\/shorts\/([^?&]+)/);
+  if (shortsMatch) return shortsMatch[1];
+
+  const watchMatch = url.match(/[?&]v=([^&]+)/);
+  if (watchMatch) return watchMatch[1];
+
+  const embedMatch = url.match(/youtube\.com\/embed\/([^?&]+)/);
+  if (embedMatch) return embedMatch[1];
+
+  return null;
+}
+
+interface YouTubeParams {
+  autoplay: boolean;
+  mute: boolean;
+  controls: boolean;
+  showCaptions: boolean;
+  rel: boolean;
+  fullscreen: boolean;
+}
+
+function getYouTubeEmbedUrl(url: string, params: YouTubeParams): string {
+  const videoId = extractVideoId(url);
+  if (!videoId) return url;
+
+  const searchParams = new URLSearchParams();
+
+  if (params.autoplay) searchParams.set("autoplay", "1");
+  if (params.mute) searchParams.set("mute", "1");
+  if (!params.controls) searchParams.set("controls", "0");
+  if (params.showCaptions) searchParams.set("cc_load_policy", "1");
+  if (!params.rel) searchParams.set("rel", "0");
+  if (!params.fullscreen) searchParams.set("fs", "0");
+  searchParams.set("disablekb", "1");
+
+  const query = searchParams.toString();
+  return `https://www.youtube.com/embed/${videoId}${query ? `?${query}` : ""}`;
+}
+
+function YouTubeVideoComponent() {
+  const fullWidth = youtubeVideo.useSetting("fullWidth");
+  const theme = youtubeVideo.useSetting("theme");
+  const autoplay = youtubeVideo.useSetting("autoplay");
+  const mute = youtubeVideo.useSetting("mute");
+  const controls = youtubeVideo.useSetting("controls");
+  const showCaptions = youtubeVideo.useSetting("showCaptions");
+  const rel = youtubeVideo.useSetting("rel");
+  const fullscreen = youtubeVideo.useSetting("fullscreen");
+
+  const params: YouTubeParams = {
+    autoplay,
+    mute,
+    controls,
+    showCaptions,
+    rel,
+    fullscreen,
+  };
+
+  return (
+    <section className={cn(theme === "dark" ? "dark" : "light")}>
+      <div className={cn("bg-background", !fullWidth && "py-12")}>
+        <div className={cn(!fullWidth && "container mx-auto px-4")}>
+          <youtubeVideo.Embed name="url">
+            {(_props, { url }) => (
+              <div
+                className={cn(
+                  "relative w-full",
+                  !fullWidth && "overflow-hidden rounded-lg shadow-lg",
+                )}
+                style={{ paddingBottom: "56.25%" }}
+              >
+                <iframe
+                  src={getYouTubeEmbedUrl(url, params)}
+                  title="YouTube video"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowFullScreen={fullscreen}
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "100%",
+                    border: 0,
+                  }}
+                />
+              </div>
+            )}
+          </youtubeVideo.Embed>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export { youtubeVideo as block };

package/templates/default/src/camox/layouts/default.tsx

@@ -1,9 +1,11 @@
 import { createLayout } from "camox/createLayout";
 
+import { block as faqBlock } from "../blocks/faq";
 import { block as footerBlock } from "../blocks/footer";
 import { block as heroBlock } from "../blocks/hero";
 import { block as navbarBlock } from "../blocks/navbar";
 import { block as statisticsBlock } from "../blocks/statistics";
+import { block as testimonialBlock } from "../blocks/testimonial";
 
 const defaultLayout = createLayout({
   id: "default",
@@ -12,7 +14,7 @@ const defaultLayout = createLayout({
   blocks: {
     before: [navbarBlock],
     after: [footerBlock],
-    initial: [heroBlock, statisticsBlock],
+    initial: [heroBlock, testimonialBlock, statisticsBlock, faqBlock],
   },
   component: DefaultLayout,
   buildMetaTitle: ({ pageMetaTitle, projectName }) => `${pageMetaTitle} | ${projectName}`,

package/templates/default/src/lib/utils.ts

@@ -1,7 +1,6 @@
-import type { ClassValue } from "clsx";
-import { clsx } from "clsx";
+import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-export function cn(...inputs: Array<ClassValue>) {
+export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }

package/templates/default/src/styles.css

@@ -1,87 +1,86 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
+@import "@fontsource-variable/inter";
+@import "@fontsource-variable/noto-serif";
 
 @custom-variant dark (&:is(.dark *));
 
 body {
   @apply m-0;
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
-    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.13 0.028 261.692);
+  --background: oklch(0.99 0.01 260);
+  --foreground: oklch(0 0 0);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.13 0.028 261.692);
+  --card-foreground: oklch(0 0 0);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.13 0.028 261.692);
-  --primary: oklch(0.21 0.034 264.665);
-  --primary-foreground: oklch(0.985 0.002 247.839);
-  --secondary: oklch(0.967 0.003 264.542);
-  --secondary-foreground: oklch(0.21 0.034 264.665);
-  --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
-  --accent: oklch(0.967 0.003 264.542);
-  --accent-foreground: oklch(0.21 0.034 264.665);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0.623 0.214 259.815);
+  --primary-foreground: oklch(0.97 0.014 254.604);
+  --secondary: oklch(0.96 0.02 260);
+  --secondary-foreground: oklch(0.22 0.05 260);
+  --muted: oklch(0.96 0.02 260);
+  --muted-foreground: oklch(0.55 0.05 260);
+  --accent: oklch(0.96 0.02 260);
+  --accent-foreground: oklch(0.22 0.05 260);
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.928 0.006 264.531);
-  --input: oklch(0.928 0.006 264.531);
-  --ring: oklch(0.707 0.022 261.325);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.4rem;
-  --sidebar: oklch(0.985 0.002 247.839);
-  --sidebar-foreground: oklch(0.13 0.028 261.692);
-  --sidebar-primary: oklch(0.21 0.034 264.665);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.967 0.003 264.542);
-  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
-  --sidebar-border: oklch(0.928 0.006 264.531);
-  --sidebar-ring: oklch(0.707 0.022 261.325);
+  --border: oklch(0.92 0.02 260);
+  --input: oklch(0.92 0.02 260);
+  --ring: oklch(0.7 0.05 260);
+  --chart-1: oklch(0.871 0.02 260);
+  --chart-2: oklch(0.62 0.19 260);
+  --chart-3: oklch(0.5 0.12 260);
+  --chart-4: oklch(0.4 0.08 260);
+  --chart-5: oklch(0.3 0.05 260);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.99 0.01 260);
+  --sidebar-foreground: oklch(0 0 0);
+  --sidebar-primary: oklch(0.62 0.19 260);
+  --sidebar-primary-foreground: oklch(0.984 0.019 200.873);
+  --sidebar-accent: oklch(0.96 0.02 260);
+  --sidebar-accent-foreground: oklch(0.22 0.05 260);
+  --sidebar-border: oklch(0.92 0.02 260);
+  --sidebar-ring: oklch(0.7 0.05 260);
 }
 
 .dark {
-  --background: oklch(0.13 0.028 261.692);
-  --foreground: oklch(0.985 0.002 247.839);
-  --card: oklch(0.21 0.034 264.665);
-  --card-foreground: oklch(0.985 0.002 247.839);
-  --popover: oklch(0.21 0.034 264.665);
-  --popover-foreground: oklch(0.985 0.002 247.839);
-  --primary: oklch(0.928 0.006 264.531);
-  --primary-foreground: oklch(0.21 0.034 264.665);
-  --secondary: oklch(0.278 0.033 256.848);
-  --secondary-foreground: oklch(0.985 0.002 247.839);
-  --muted: oklch(0.278 0.033 256.848);
-  --muted-foreground: oklch(0.707 0.022 261.325);
-  --accent: oklch(0.278 0.033 256.848);
-  --accent-foreground: oklch(0.985 0.002 247.839);
+  --background: oklch(0.17 0.05 260);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.22 0.05 260);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.22 0.05 260);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.623 0.214 259.815);
+  --primary-foreground: oklch(0.97 0.014 254.604);
+  --secondary: oklch(0.3 0.05 260);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.3 0.05 260);
+  --muted-foreground: oklch(0.72 0.03 260);
+  --accent: oklch(0.3 0.05 260);
+  --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --destructive-foreground: oklch(0.637 0.237 25.331);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.034 264.665);
-  --sidebar-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.278 0.033 256.848);
-  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+  --ring: oklch(0.55 0.05 260);
+  --chart-1: oklch(0.871 0.02 260);
+  --chart-2: oklch(0.62 0.19 260);
+  --chart-3: oklch(0.5 0.12 260);
+  --chart-4: oklch(0.4 0.08 260);
+  --chart-5: oklch(0.3 0.05 260);
+  --sidebar: oklch(0.22 0.05 260);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.62 0.19 260);
+  --sidebar-primary-foreground: oklch(0.984 0.019 200.873);
+  --sidebar-accent: oklch(0.3 0.05 260);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
+  --sidebar-ring: oklch(0.55 0.05 260);
 }
 
 @theme inline {
@@ -121,6 +120,11 @@ body {
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --font-sans: "Inter Variable", sans-serif;
+  --font-heading: "Inter Variable", sans-serif;
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
 }
 
 @layer base {
@@ -133,4 +137,26 @@ body {
   a:focus-visible {
     @apply border-ring ring-ring/50 rounded-md ring-3 outline-none;
   }
+  html {
+    @apply font-sans;
+    font-size: 14px;
+    @media (width >= theme(--breakpoint-sm)) {
+      font-size: 15px;
+    }
+    @media (width >= theme(--breakpoint-md)) {
+      font-size: 16px;
+    }
+  }
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 0.5rem;
+  max-width: 80rem;
+  @media (width >= theme(--breakpoint-sm)) {
+    padding-inline: 1rem;
+  }
+  @media (width >= theme(--breakpoint-md)) {
+    padding-inline: 2rem;
+  }
 }