new conf design — colors

src/app/colors.css

@@ -0,0 +1,41 @@
+:root {
+  --color-pri-lighter: 319 100% 90%;
+  --color-pri-light: 319 100% 90%;
+  --color-pri-base: 319 100% 44%;
+  --color-pri-dark: 319 100% 30%;
+  --color-pri-darker: 319 100% 20%;
+
+  --color-sec-lighter: 79 80% 90%;
+  --color-sec-light: 79 82% 80%;
+  --color-sec-base: 79 90% 65%;
+  --color-sec-dark: 79 98% 37%;
+  --color-sec-darker: 79 98% 23%;
+
+  --color-neu-0: 0 0% 100%;
+  --color-neu-50: 75 57% 97%;
+  --color-neu-100: 75 15% 95%;
+  --color-neu-200: 77 14% 90%;
+  --color-neu-300: 76 14% 85%;
+  --color-neu-400: 77 14% 80%;
+  --color-neu-500: 74 14% 70%;
+  --color-neu-600: 76 15% 60%;
+  --color-neu-700: 76 15% 40%;
+  --color-neu-800: 77 14% 20%;
+  --color-neu-900: 75 15% 5%;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-neu-900: 0 0% 100%;
+    --color-neu-800: 75 57% 97%;
+    --color-neu-700: 75 15% 95%;
+    --color-neu-600: 77 14% 90%;
+    --color-neu-500: 76 14% 85%;
+    --color-neu-400: 77 14% 80%;
+    --color-neu-300: 74 14% 70%;
+    --color-neu-200: 76 15% 60%;
+    --color-neu-100: 76 15% 40%;
+    --color-neu-50: 77 14% 20%;
+    --color-neu-0: 75 15% 5%;
+  }
+}

src/app/conf/2025/layout.tsx

@@ -5,6 +5,7 @@ import { Footer } from "../_components/footer"
 import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
 import { NewFontsStyleTag } from "../../fonts"
+import "../../colors.css"
 
 export const metadata = {
   description:

tailwind.config.ts

@@ -1,6 +1,6 @@
+import { fontFamily } from "tailwindcss/defaultTheme"
 import type { Config } from "tailwindcss"
 import typography from "@tailwindcss/typography"
-import { fontFamily } from "tailwindcss/defaultTheme"
 
 const config: Config = {
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "./theme.config.tsx"],
@@ -24,6 +24,34 @@ const config: Config = {
         primary: "#e10098",
         "conf-black": "#0e031c",
         black: "#1b1b1b",
+
+        // #region new design system colors
+        "pri-lighter": "hsl(var(--color-pri-lighter) / <alpha-value>)",
+        "pri-light": "hsl(var(--color-pri-light) / <alpha-value>)",
+        "pri-base": "hsl(var(--color-pri-base) / <alpha-value>)",
+        "pri-dark": "hsl(var(--color-pri-dark) / <alpha-value>)",
+        "pri-darker": "hsl(var(--color-pri-darker) / <alpha-value>)",
+
+        "sec-lighter": "hsl(var(--color-sec-lighter) / <alpha-value>)",
+        "sec-light": "hsl(var(--color-sec-light) / <alpha-value>)",
+        "sec-base": "hsl(var(--color-sec-base) / <alpha-value>)",
+        "sec-dark": "hsl(var(--color-sec-dark) / <alpha-value>)",
+        "sec-darker": "hsl(var(--color-sec-darker) / <alpha-value>)",
+
+        // We're using 3-letter color names to avoid conflicting
+        // with the old `neutral` color.
+        "neu-0": "hsl(var(--color-neu-0) / <alpha-value>)",
+        "neu-50": "hsl(var(--color-neu-50) / <alpha-value>)",
+        "neu-100": "hsl(var(--color-neu-100) / <alpha-value>)",
+        "neu-200": "hsl(var(--color-neu-200) / <alpha-value>)",
+        "neu-300": "hsl(var(--color-neu-300) / <alpha-value>)",
+        "neu-400": "hsl(var(--color-neu-400) / <alpha-value>)",
+        "neu-500": "hsl(var(--color-neu-500) / <alpha-value>)",
+        "neu-600": "hsl(var(--color-neu-600) / <alpha-value>)",
+        "neu-700": "hsl(var(--color-neu-700) / <alpha-value>)",
+        "neu-800": "hsl(var(--color-neu-800) / <alpha-value>)",
+        "neu-900": "hsl(var(--color-neu-900) / <alpha-value>)",
+        // #endregion new design system colors
       },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",