buttons, theme

package.json

@@ -14,6 +14,7 @@
     "@payloadcms/next": "^3.35.1",
     "@payloadcms/richtext-lexical": "^3.35.1",
     "@tailwindcss/postcss": "^4.1.4",
+    "clsx": "^2.1.1",
     "graphql": "^16.10.0",
     "next": "15.3.1",
     "payload": "^3.35.1",
@@ -22,6 +23,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "sharp": "^0.34.1",
+    "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.1.4"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@tailwindcss/postcss':
         specifier: ^4.1.4
         version: 4.1.4
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       graphql:
         specifier: ^16.10.0
         version: 16.10.0
@@ -44,6 +47,9 @@ importers:
       sharp:
         specifier: ^0.34.1
         version: 0.34.1
+      tailwind-merge:
+        specifier: ^3.2.0
+        version: 3.2.0
       tailwindcss:
         specifier: ^4.1.4
         version: 4.1.4
@@ -3207,6 +3213,9 @@ packages:
   tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
 
+  tailwind-merge@3.2.0:
+    resolution: {integrity: sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==}
+
   tailwindcss@4.1.4:
     resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==}
 
@@ -6908,6 +6917,8 @@ snapshots:
 
   tabbable@6.2.0: {}
 
+  tailwind-merge@3.2.0: {}
+
   tailwindcss@4.1.4: {}
 
   tapable@2.2.1: {}

src/app/(website)/brand/page.tsx

@@ -1,6 +1,18 @@
+import Button from "../components/Button";
+
+const BUTTON_TYPES: Parameters<typeof Button>[0]["type"][] = [
+  "primary",
+  "secondary",
+  "alternate",
+] as const;
+const BUTTON_VARIANTS: Parameters<typeof Button>[0]["variant"][] = [
+  "filled",
+  "outlined",
+];
+
 export default function Page() {
   return (
-    <div className="flex justify-center ">
+    <div className="flex justify-center bg-gray-50 min-h-screen">
       <div className="container px-4 py-8 flex flex-col gap-8">
         <div className="border-b">
           <h1 className="text-4xl mb-4">iNZight Analytics Brand</h1>
@@ -8,10 +20,21 @@ export default function Page() {
 
         <div className="">
           <h2 className="text-2xl mb-2">Colours</h2>
-          <div className="h-32 flex gap-4 bg-gray-300 p-4">
+          <div className="h-32 flex gap-4 bg-black p-4">
-            <div className="w-3/5 bg-black"></div>
+            <div className="w-3/5"></div>
             <div className="w-3/10 bg-white"></div>
-            <div className="w-1/10 bg-red-600"></div>
+            <div className="w-1/10 bg-accent-500"></div>
+          </div>
+          <div className="p-4 space-y-2">
+            {BUTTON_VARIANTS.map((variant) => (
+              <div className="grid grid-cols-5 gap-4">
+                {BUTTON_TYPES.map((type) => (
+                  <Button type={type} variant={variant} className="capitalize">
+                    {type} button
+                  </Button>
+                ))}
+              </div>
+            ))}
           </div>
         </div>
 

src/app/(website)/components/Button/index.tsx

@@ -0,0 +1,41 @@
+import cn from "../../utils/cn";
+
+export default function Button({
+  children,
+  type,
+  variant,
+  className,
+  ...props
+}: {
+  children: React.ReactNode;
+  type: "primary" | "secondary" | "alternate";
+  variant?: "filled" | "outlined";
+  className?: string;
+  // [x: string]:
+}) {
+  const btnVariant = variant ?? "filled";
+  return (
+    <button
+      className={cn(
+        className,
+        "font-bold py-2 px-4 rounded-sm cursor-pointer shadow transition whitespace-nowrap flex justify-center items-center",
+        variant === "filled" ? "" : "border",
+        type === "primary" &&
+          (variant === "filled"
+            ? "bg-accent-800 text-accent-100"
+            : "border-accent-800 text-accent-800 hover:bg-accent-800 hover:text-accent-100"),
+        type === "secondary" &&
+          (variant === "filled"
+            ? "bg-secondary-800 text-secondary-100"
+            : "border-secondary-800 text-secondary-800 hover:bg-secondary-800 hover:text-secondary-100"),
+        type === "alternate" &&
+          (variant === "filled"
+            ? "bg-black text-white"
+            : "border-black text-black hover:bg-black hover:text-white")
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

src/app/(website)/globals.css

@@ -6,4 +6,29 @@
   /* FONT FAMILIES */
   --font-sans: Inter, sans;
   --font-display: var(--font-sans);
+
+  /* COLOURS */
+  --color-accent-50: #fff1f2;
+  --color-accent-100: #ffe1e3;
+  --color-accent-200: #ffc8cc;
+  --color-accent-300: #ffa1a8;
+  --color-accent-400: #fe6b76;
+  --color-accent-500: #f73c49;
+  --color-accent-600: #e52331;
+  --color-accent-700: #c01521;
+  --color-accent-800: #9f151f;
+  --color-accent-900: #841820;
+  --color-accent-950: #48070c;
+
+  --color-secondary-50: #f5f8f5;
+  --color-secondary-100: #e8f0e9;
+  --color-secondary-200: #d2e0d3;
+  --color-secondary-300: #aec7af;
+  --color-secondary-400: #82a684;
+  --color-secondary-500: #5f8862;
+  --color-secondary-600: #4b6e4d;
+  --color-secondary-700: #415d43;
+  --color-secondary-800: #344735;
+  --color-secondary-900: #2c3b2d;
+  --color-secondary-950: #141f16;
 }

src/app/(website)/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export default function cn(...args: ClassValue[]) {
+  return twMerge(clsx(args));
+}