feat: write template

pallete.typ

@@ -0,0 +1,149 @@
+#let base = (
+  petrol-anthracite: (
+    "50": rgb("#f0f4f7"),
+    "100": rgb("#dfe4e9"),
+    "200": rgb("#acb4bd"),
+    "300": rgb("#828e9a"),
+    "400": rgb("#596978"),
+    "500": rgb("#46596b"),
+    "600": rgb("#2f4356"),
+    "700": rgb("#263645"),
+    "800": rgb("#1c2834"),
+    "900": rgb("#131b22"),
+  ),
+  blue: (
+    "50": rgb("#eff6ff"),
+    "100": rgb("#dbeafe"),
+    "200": rgb("#bfdbfe"),
+    "300": rgb("#93c5fd"),
+    "400": rgb("#60a5fa"),
+    "500": rgb("#3b82f6"),
+    "600": rgb("#2563eb"),
+    "700": rgb("#1d4ed8"),
+    "800": rgb("#1e40af"),
+    "900": rgb("#1e3a8a"),
+  ),
+  green: (
+    "50": rgb("#ecfdf5"),
+    "100": rgb("#d1fae5"),
+    "200": rgb("#a7f3d0"),
+    "300": rgb("#6ee7b7"),
+    "400": rgb("#34d399"),
+    "500": rgb("#10b981"),
+    "600": rgb("#059669"),
+    "700": rgb("#047857"),
+    "800": rgb("#065f46"),
+    "900": rgb("#064e3b"),
+  ),
+  indigo: (
+    "50": rgb("#eef2ff"),
+    "100": rgb("#e0e7ff"),
+    "200": rgb("#c7d2fe"),
+    "300": rgb("#a5b4fc"),
+    "400": rgb("#818cf8"),
+    "500": rgb("#6366f1"),
+    "600": rgb("#4f46e5"),
+    "700": rgb("#4338ca"),
+    "800": rgb("#3730a3"),
+    "900": rgb("#312e81"),
+  ),
+  orange: (
+    "50": rgb("#fff7ed"),
+    "100": rgb("#ffedd5"),
+    "200": rgb("#fed7aa"),
+    "300": rgb("#fdba74"),
+    "400": rgb("#fb923c"),
+    "500": rgb("#f97316"),
+    "600": rgb("#ea580c"),
+    "700": rgb("#c2410c"),
+    "800": rgb("#9a3412"),
+    "900": rgb("#7c2d12"),
+  ),
+  pink: (
+    "50": rgb("#fdf2f8"),
+    "100": rgb("#fce7f3"),
+    "200": rgb("#fbcfe8"),
+    "300": rgb("#f9a8d4"),
+    "400": rgb("#f472b6"),
+    "500": rgb("#ec4899"),
+    "600": rgb("#db2777"),
+    "700": rgb("#be185d"),
+    "800": rgb("#9d174d"),
+    "900": rgb("#831843"),
+  ),
+  purple: (
+    "50": rgb("#f5f3ff"),
+    "100": rgb("#ede9fe"),
+    "200": rgb("#ddd6fe"),
+    "300": rgb("#c4b5fd"),
+    "400": rgb("#a78bfa"),
+    "500": rgb("#8655F6"),
+    "600": rgb("#7c3aed"),
+    "700": rgb("#6d28d9"),
+    "800": rgb("#5b21b6"),
+    "900": rgb("#4c1d95"),
+  ),
+  red: (
+    "50": rgb("#ffedee"),
+    "100": rgb("#fae1e2"),
+    "200": rgb("#ffccce"),
+    "300": rgb("#fa9da1"),
+    "400": rgb("#fc656b"),
+    "500": rgb("#e53940"),
+    "600": rgb("#d8232a"),
+    "700": rgb("#bf1f25"),
+    "800": rgb("#99191e"),
+    "900": rgb("#801519"),
+  ),
+  teal: (
+    "50": rgb("#f2fdfc"),
+    "100": rgb("#cbfbf8"),
+    "200": rgb("#98f6f3"),
+    "300": rgb("#5de8ea"),
+    "400": rgb("#2bced4"),
+    "500": rgb("#14afb8"),
+    "600": rgb("#0d8b96"),
+    "700": rgb("#0f6b75"),
+    "800": rgb("#11575f"),
+    "900": rgb("#13474e"),
+  ),
+  yellow: (
+    "50": rgb("#fffbeb"),
+    "100": rgb("#fef3c7"),
+    "200": rgb("#fde68a"),
+    "300": rgb("#fcd34d"),
+    "400": rgb("#fbbf24"),
+    "500": rgb("#f59e0b"),
+    "600": rgb("#d97706"),
+    "700": rgb("#b45309"),
+    "800": rgb("#92400e"),
+    "900": rgb("#78350f"),
+  ),
+  gray: (
+    "50": rgb("#f9fafb"),
+    "100": rgb("#f3f4f6"),
+    "200": rgb("#e5e7eb"),
+    "300": rgb("#d1d5db"),
+    "400": rgb("#9ca3af"),
+    "500": rgb("#6b7280"),
+    "600": rgb("#4b5563"),
+    "700": rgb("#374151"),
+    "800": rgb("#1f2937"),
+    "900": rgb("#111827"),
+  ),
+)
+
+#let palette = (
+  ..base,
+  // UI Functional Colors
+  primary: base.red,
+  secondary: base.petrol-anthracite,
+  text: base.gray,
+  ui: (
+    text: base.gray.at("800"), // Default text color
+    text-light: base.gray.at("500"), // Default light text
+    link: base.red.at("600"), // color-primary-600
+    bg-dark: base.petrol-anthracite.at("50"), // background-color
+    border: rgb(31, 41, 55), // border-bottom-color
+  ),
+)