first commit

2026-09-20 21:47:15 +02:00
commit 6880123197
40 changed files with 8455 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,9 @@
+dist/
+.astro/
+node_modules/
+pnpm-lock.yaml
+public/
+*.woff
+*.woff2
+
+src/content/
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1,42 @@
+{
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 96,
+  "semi": false,
+  "plugins": [
+    "prettier-plugin-astro",
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-packagejson"
+  ],
+  "overrides": [
+    { "files": "*.astro", "options": { "parser": "astro" } },
+    {
+      "files": ["*.json", "*.jsonc", "*.md", "*.yaml", "*.yml"],
+      "options": { "printWidth": 80 }
+    },
+    {
+      "files": [".zed/settings.json", "tsconfig.json"],
+      "options": { "parser": "jsonc" }
+    },
+    { "files": ["*.css"], "options": { "singleQuote": false } }
+  ],
+  "importOrder": [
+    "<BUILTIN_MODULES>",
+    "",
+    "^(react|react-dom)(/.*)?$",
+    "^astro(/.*)?$",
+    "",
+    "^(@keystatic/.*)(/.*)?$",
+    "",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^@/(?!.*\\.css$).*$",
+    "",
+    "^[.]{1,2}/(?!.*\\.css$).*$",
+    "",
+    "^.+\\.css$"
+  ],
+  "importOrderParserPlugins": ["typescript", "jsx"],
+  "importOrderTypeScriptVersion": "5.7.0"
+}
--- a/.zed/settings.json
+++ b/.zed/settings.json
@@ -0,0 +1,78 @@
+{
+  "tab_size": 2,
+  "hard_tabs": false,
+  "lsp": {
+    "stylelint-lsp": {
+      "settings": {
+        "stylelint": {
+          "packageManager": "pnpm",
+          "validate": ["css", "postcss", "astro"],
+        },
+      },
+    },
+    "vscode-css-language-server": {
+      "settings": {
+        "css": {
+          "lint": {
+            "propertyIgnoredDueToDisplay": "ignore",
+          },
+        },
+      },
+    },
+  },
+  "languages": {
+    "Astro": {
+      "format_on_save": "on",
+      "formatter": [{ "code_action": "source.fixAll.stylelint" }, "prettier"],
+      "prettier": { "allowed": true },
+      "code_actions_on_format": { "source.fixAll.eslint": true },
+    },
+    "CSS": {
+      "format_on_save": "on",
+      "formatter": [{ "code_action": "source.fixAll.stylelint" }, "prettier"],
+      "prettier": { "allowed": true },
+    },
+    "TypeScript": {
+      "format_on_save": "on",
+      "formatter": "prettier",
+      "prettier": { "allowed": true },
+      "code_actions_on_format": { "source.fixAll.eslint": true },
+    },
+    "TSX": {
+      "format_on_save": "on",
+      "formatter": "prettier",
+      "prettier": { "allowed": true },
+      "code_actions_on_format": { "source.fixAll.eslint": true },
+    },
+    "JavaScript": {
+      "format_on_save": "on",
+      "formatter": "prettier",
+      "prettier": { "allowed": true },
+      "code_actions_on_format": { "source.fixAll.eslint": true },
+    },
+    "JSON": {
+      "format_on_save": "on",
+      "formatter": "prettier",
+      "prettier": { "allowed": true },
+    },
+    "JSONC": {
+      "format_on_save": "on",
+      "formatter": "prettier",
+      "prettier": { "allowed": true },
+    },
+    "Markdown": {
+      "format_on_save": "on",
+      "formatter": "prettier",
+      "prettier": { "allowed": true },
+    },
+    "YAML": {
+      "format_on_save": "on",
+      "formatter": "prettier",
+      "prettier": { "allowed": true },
+    },
+  },
+
+  "file_types": {
+    "JSONC": ["tsconfig.json", ".zed/settings.json"],
+  },
+}
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Thinkmill Labs Pty Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -0,0 +1,23 @@
+# dave-dmg
+
+Astro + Keystatic. Bootstrapping.
+
+## Prerequisites
+
+- Node `^20.19.0 || >=22.12.0`
+- pnpm 10 (`corepack enable`)
+
+## Commands
+
+| Command        | Action                                     |
+| -------------- | ------------------------------------------ |
+| `pnpm install` | Install dependencies                       |
+| `pnpm dev`     | Dev server at `localhost:4321`             |
+| `pnpm build`   | Production build to `./dist/`              |
+| `pnpm preview` | Preview the build locally                  |
+| `pnpm lint`    | ESLint + Stylelint (zero-warning gate)     |
+| `pnpm format`  | Stylelint `--fix`, then Prettier `--write` |
+| `pnpm check`   | `astro check` + lint                       |
+
+- Site: [localhost:4321](http://localhost:4321)
+- Keystatic admin: [localhost:4321/keystatic](http://localhost:4321/keystatic)
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -0,0 +1,68 @@
+import { defineConfig, fontProviders } from 'astro/config'
+
+import keystatic from '@keystatic/astro'
+
+import markdoc from '@astrojs/markdoc'
+import node from '@astrojs/node'
+import react from '@astrojs/react'
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://dave-dmg.de',
+  integrations: [react(), markdoc(), keystatic()],
+
+  adapter: node({
+    mode: 'standalone',
+  }),
+  fonts: [
+    {
+      provider: fontProviders.google(),
+      name: 'Geist',
+      cssVariable: '--font-geist',
+    },
+    {
+      provider: fontProviders.google(),
+      name: 'Geist Mono',
+      cssVariable: '--font-geist-mono',
+    },
+    {
+      provider: fontProviders.google(),
+      name: 'Blaka',
+      cssVariable: '--font-blaka',
+      weights: [400],
+    },
+    {
+      provider: fontProviders.local(),
+      name: 'Julia Mono',
+      cssVariable: '--font-julia-mono',
+      options: {
+        variants: [
+          {
+            src: ['./src/assets/fonts/JuliaMono/JuliaMono-Regular.woff2'],
+            weight: 400,
+            style: 'normal',
+          },
+          {
+            src: ['./src/assets/fonts/JuliaMono/JuliaMono-Bold.woff2'],
+            weight: 700,
+            style: 'normal',
+          },
+        ],
+      },
+    },
+    {
+      provider: fontProviders.local(),
+      name: 'Unigrim Dee',
+      cssVariable: '--font-unigrim',
+      options: {
+        variants: [
+          {
+            src: ['./src/assets/fonts/UnigrimDee-Regular.woff2'],
+            weight: 400,
+            style: 'normal',
+          },
+        ],
+      },
+    },
+  ],
+})
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -0,0 +1,55 @@
+import js from '@eslint/js'
+import prettier from 'eslint-config-prettier/flat'
+import astro from 'eslint-plugin-astro'
+import reactHooks from 'eslint-plugin-react-hooks'
+import unusedImports from 'eslint-plugin-unused-imports'
+import tseslint from 'typescript-eslint'
+
+export default [
+  { ignores: ['dist/', '.astro/', 'node_modules/', 'src/content/'] },
+
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...astro.configs.recommended,
+
+  {
+    name: 'dave-dmg/unused',
+    files: ['**/*.{js,mjs,cjs,ts,tsx,astro}'],
+    plugins: { 'unused-imports': unusedImports },
+    rules: {
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      'unused-imports/no-unused-imports': 'warn',
+      'unused-imports/no-unused-vars': [
+        'warn',
+        {
+          vars: 'all',
+          args: 'after-used',
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^(_|ignore)',
+        },
+      ],
+    },
+  },
+
+  {
+    name: 'dave-dmg/typescript',
+    files: ['**/*.{ts,tsx,astro}'],
+    rules: {
+      '@typescript-eslint/ban-ts-comment': 'warn',
+      '@typescript-eslint/no-empty-object-type': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+    },
+  },
+
+  {
+    name: 'dave-dmg/react-islands',
+    files: ['**/*.tsx'],
+    plugins: { 'react-hooks': reactHooks },
+    rules: reactHooks.configs.recommended.rules,
+  },
+
+  prettier,
+]
--- a/keystatic.config.ts
+++ b/keystatic.config.ts
@@ -0,0 +1,8 @@
+import { config } from '@keystatic/core'
+
+export default config({
+  storage: {
+    kind: 'local',
+  },
+  collections: {},
+})
--- a/package.json
+++ b/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "dave-dmg",
+  "version": "0.0.1",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "astro build",
+    "check": "astro check && pnpm lint",
+    "dev": "astro dev",
+    "format": "stylelint --fix \"src/**/*.{css,astro}\" && prettier --write .",
+    "lint": "eslint . --max-warnings=0 && stylelint \"src/**/*.{css,astro}\" --max-warnings=0",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "@astrojs/markdoc": "^2.0.1",
+    "@astrojs/node": "^11.0.0",
+    "@astrojs/react": "^6.0.0",
+    "@keystatic/astro": "^6.0.0",
+    "@keystatic/core": "^0.6.7",
+    "astro": "^7.0.4",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.10",
+    "@csstools/postcss-global-data": "^4.0.0",
+    "@eslint/js": "^10.0.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "eslint": "^10.11.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-astro": "^3.2.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-unused-imports": "^4.4.1",
+    "postcss": "^8.5.28",
+    "postcss-custom-media": "^12.0.1",
+    "postcss-mixins": "^12.1.2",
+    "prettier": "^3.9.8",
+    "prettier-plugin-astro": "^1.0.1",
+    "prettier-plugin-packagejson": "^3.0.2",
+    "stylelint": "^17.15.0",
+    "stylelint-config-clean-order": "^10.0.0",
+    "stylelint-config-html": "^2.0.0",
+    "stylelint-config-standard": "^40.0.0",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.70.0"
+  },
+  "packageManager": "pnpm@10.15.0",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "typescript": "~6.0.3"
+    }
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -0,0 +1,11 @@
+export default {
+  plugins: {
+    'postcss-mixins': {
+      mixinsDir: './src/styles/mixins',
+    },
+    '@csstools/postcss-global-data': {
+      files: ['./src/styles/base/custom-media.css'],
+    },
+    'postcss-custom-media': {},
+  },
+}
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>
--- a/src/assets/fonts/JuliaMono/JuliaMono-Black.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-Black.woff2
--- a/src/assets/fonts/JuliaMono/JuliaMono-BlackItalic.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-BlackItalic.woff2
--- a/src/assets/fonts/JuliaMono/JuliaMono-Bold.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-Bold.woff2
--- a/src/assets/fonts/JuliaMono/JuliaMono-BoldItalic.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-BoldItalic.woff2
--- a/src/assets/fonts/JuliaMono/JuliaMono-BoldLatin.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-BoldLatin.woff2
--- a/src/assets/fonts/JuliaMono/JuliaMono-ExtraBold.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-ExtraBold.woff2
--- a/src/assets/fonts/JuliaMono/JuliaMono-ExtraBoldItalic.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-ExtraBoldItalic.woff2
--- a/src/assets/fonts/JuliaMono/JuliaMono-Light.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-Light.woff2
--- a/src/assets/fonts/JuliaMono/JuliaMono-LightItalic.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-LightItalic.woff2
--- a/src/assets/fonts/JuliaMono/JuliaMono-Medium.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-Medium.woff2
--- a/src/assets/fonts/JuliaMono/JuliaMono-MediumItalic.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-MediumItalic.woff2
--- a/src/assets/fonts/JuliaMono/JuliaMono-Regular.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-Regular.woff2
--- a/src/assets/fonts/JuliaMono/JuliaMono-RegularItalic.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-RegularItalic.woff2
--- a/src/assets/fonts/JuliaMono/JuliaMono-RegularLatin.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-RegularLatin.woff2
--- a/src/assets/fonts/JuliaMono/JuliaMono-SemiBold.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-SemiBold.woff2
--- a/src/assets/fonts/JuliaMono/JuliaMono-SemiBoldItalic.woff2
+++ b/src/assets/fonts/JuliaMono/JuliaMono-SemiBoldItalic.woff2
--- a/src/assets/fonts/UnigrimDee-Regular.woff2
+++ b/src/assets/fonts/UnigrimDee-Regular.woff2
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -0,0 +1 @@
+export const collections = {}
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -0,0 +1,33 @@
+---
+import { Font } from 'astro:assets'
+
+import '@/styles/global.css'
+
+interface Props {
+  title: string
+  description?: string
+}
+
+const { title, description } = Astro.props
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="generator" content={Astro.generator} />
+
+    <title>{title}</title>
+    {description && <meta name="description" content={description} />}
+
+    <Font cssVariable="--font-geist" preload />
+    <Font cssVariable="--font-geist-mono" preload />
+    <Font cssVariable="--font-blaka" preload />
+    <Font cssVariable="--font-julia-mono" preload />
+    <Font cssVariable="--font-unigrim" />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -0,0 +1,8 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro'
+---
+
+<BaseLayout title="Genesis — Crucible" description="World generation, cosmology first.">
+  <h1>I AM TEST</h1>
+  <p>ARE YOU TEST?</p>
+</BaseLayout>
--- a/src/styles/base/colors.css
+++ b/src/styles/base/colors.css
@@ -0,0 +1,112 @@
+:root {
+  /* === PALETTE === */
+
+  /* == Ink == */
+  --color-palette-black-ink: oklch(21.9% 0.006 286deg);
+  --color-palette-charcoal: oklch(26.6% 0.008 240deg);
+  --color-palette-slate: oklch(33.7% 0.019 267deg);
+  --color-palette-graphite: oklch(40% 0.005 89deg);
+
+  /* == Stock == */
+  --color-palette-ash: oklch(51% 0.008 85deg);
+  --color-palette-stone: oklch(64% 0.01 84deg);
+  --color-palette-sand: oklch(74% 0.01 83deg);
+  --color-palette-bone: oklch(83% 0.01 82deg);
+  --color-palette-parchment: oklch(89% 0.009 82deg);
+  --color-palette-stock: oklch(94.5% 0.008 83deg);
+  --color-palette-cream: oklch(97% 0.006 84deg);
+  --color-palette-paper: oklch(98.8% 0.005 85deg);
+
+  /* == Accents == */
+  --color-palette-lava: oklch(63.6% 0.193 17.075deg);
+  --color-palette-lime-green: oklch(74.6% 0.18 129.939deg);
+  --color-palette-bright-canary: oklch(89% 0.157 97.726deg);
+  --color-palette-cerise: oklch(60.7% 0.23 18.554deg);
+  --color-palette-persimmon: oklch(68.6% 0.179 40.01deg);
+  --color-palette-royal-blue: oklch(46.1% 0.07 245.64deg);
+  --color-palette-fuchsia: oklch(49.6% 0.181 351.176deg);
+
+  /* === SEMANTICS === */
+
+  /* == Roles == */
+  --color-primary: var(--color-palette-lava);
+  --color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h);
+  --color-secondary: var(--color-palette-lime-green);
+  --color-secondary-emphasis: oklch(from var(--color-secondary) calc(l - 0.15) c h);
+  --color-tertiary: var(--color-palette-bright-canary);
+  --color-tertiary-emphasis: oklch(from var(--color-tertiary) calc(l - 0.15) c h);
+
+  /* == Text == */
+  --color-text-primary: var(--color-palette-black-ink);
+  --color-text-secondary: var(--color-palette-charcoal);
+  --color-text-tertiary: var(--color-palette-slate);
+  --color-text-quarternary: var(--color-palette-graphite);
+  --color-text-quiet: var(--color-palette-ash);
+  --color-text-disabled: var(--color-palette-stone);
+  --color-text-inverse: var(--color-palette-paper);
+
+  /* == Surfaces == */
+  --color-surface-base: var(--color-palette-stock);
+  --color-surface-elevated-1: var(--color-palette-paper);
+  --color-surface-elevated-2: var(--color-palette-cream);
+  --color-surface-elevated-3: var(--color-palette-parchment);
+  --color-surface-inverse: var(--color-palette-black-ink);
+  --color-surface-selected: var(--color-palette-paper);
+  --color-surface-hover: var(--color-palette-cream);
+
+  /* == Borders == */
+  --color-border-hairline: var(--color-palette-parchment);
+  --color-border-subtle: var(--color-palette-bone);
+  --color-border-normal: var(--color-palette-sand);
+  --color-border-strong: var(--color-palette-black-ink);
+
+  /* == States == */
+  --color-state-error: var(--color-palette-cerise);
+  --color-state-warning: var(--color-palette-persimmon);
+  --color-state-success: var(--color-palette-lime-green);
+  --color-state-info: var(--color-palette-royal-blue);
+
+  /* == Links == */
+  --color-text-link: var(--color-primary);
+  --color-text-link-hover: var(--color-primary-emphasis);
+  --color-text-link-visited: var(--color-palette-fuchsia);
+
+  /* == Focus == */
+  --color-focus-ring: var(--color-primary);
+
+  /* == Apparatus == */
+  --color-unfilled-block: var(--color-palette-sand);
+  --color-unfilled-line: var(--color-palette-bone);
+  --color-plate: var(--color-palette-stone);
+  --color-rule: var(--color-palette-bone);
+  --color-rule-strong: var(--color-palette-black-ink);
+
+  /* == Dice & Receipts == */
+  --color-dice-surface: var(--color-surface-inverse);
+  --color-dice-text: var(--color-text-inverse);
+  --color-receipt: var(--color-text-quiet);
+
+  /* == Scale Tier == */
+  --color-tier-active-surface: var(--color-palette-paper);
+  --color-tier-active-text: var(--color-text-primary);
+  --color-tier-idle-surface: var(--color-palette-cream);
+  --color-tier-idle-text: var(--color-text-quiet);
+  --color-tier-locked-text: var(--color-text-disabled);
+  --color-tier-marker: var(--color-primary);
+
+  /* == Overlays == */
+  --color-overlay-light: oklch(21.9% 0.006 285.911deg / 8%);
+  --color-overlay-medium: oklch(21.9% 0.006 285.911deg / 30%);
+  --color-overlay-heavy: oklch(21.9% 0.006 285.911deg / 60%);
+
+  /* == Shadow == */
+  --shadow-card: var(--size-1) var(--size-1) 0 var(--color-palette-black-ink);
+  --shadow-raised: var(--size-2) var(--size-2) 0 var(--color-palette-black-ink);
+  --shadow-derived: var(--size-1) var(--size-1) 0 var(--color-tertiary);
+  --shadow-pressed: 0 0 0 var(--color-palette-black-ink);
+
+  /* == Utility == */
+  --color-highlight: var(--color-tertiary);
+  --color-skeleton-base: var(--color-surface-elevated-2);
+  --color-skeleton-shimmer: var(--color-surface-elevated-1);
+}
--- a/src/styles/base/custom-media.css
+++ b/src/styles/base/custom-media.css
@@ -0,0 +1,5 @@
+@custom-media --bp-mobile (width < 48rem);
+@custom-media --bp-tablet (width >= 48rem) and (width < 80rem);
+@custom-media --bp-tablet-up (width >= 48rem);
+@custom-media --bp-tablet-down (width < 80rem);
+@custom-media --bp-desktop (width >= 80rem);
--- a/src/styles/base/foundation.css
+++ b/src/styles/base/foundation.css
@@ -0,0 +1,383 @@
+@layer reset {
+  /*
+Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/preflight)
+*/
+
+  /*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+  */
+
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box; /* 1 */
+    border-style: solid; /* 2 */
+    border-width: 0; /* 2 */
+  }
+
+  /*
+  1. Use a consistent sensible line-height in all browsers.
+  2. Prevent adjustments of font size after orientation changes in iOS.
+  3. Use a more readable tab size.
+  4. Use the system's `sans` font-family by default.
+  */
+
+  html {
+    font-family:
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Noto Sans",
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji";
+    line-height: 1.5;
+    text-size-adjust: 100%; /* 2 */
+    tab-size: 4; /* 3 */
+  }
+
+  /*
+  1. Remove the margin in all browsers.
+  2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+  */
+
+  body {
+    margin: 0; /* 1 */
+    line-height: inherit; /* 2 */
+  }
+
+  /*
+  1. Add the correct height in Firefox.
+  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+  3. Ensure horizontal rules are visible by default.
+  */
+
+  hr {
+    height: 0; /* 1 */
+    border-top-width: 1px; /* 3 */
+    color: inherit; /* 2 */
+  }
+
+  /*
+  Add the correct text decoration in Chrome, Edge, and Safari.
+  */
+
+  abbr:where([title]) {
+    text-decoration: underline dotted;
+  }
+
+  /*
+  Remove the default font size and weight for headings.
+  */
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  /*
+  Reset links to optimize for opt-in styling instead of opt-out.
+  */
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  /*
+  Add the correct font weight in Edge and Safari.
+  */
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /*
+  1. Use the system's `mono` font family by default.
+  2. Correct the odd `em` font sizing in all browsers.
+  */
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+      monospace;
+    font-size: 1em;
+  }
+
+  /*
+  Add the correct font size in all browsers.
+  */
+
+  small {
+    font-size: 80%;
+  }
+
+  /*
+  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+  */
+
+  sub,
+  sup {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /*
+  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+  3. Remove gaps between table borders by default.
+  */
+
+  table {
+    border-collapse: collapse; /* 3 */
+    border-color: inherit; /* 2 */
+    text-indent: 0; /* 1 */
+  }
+
+  /*
+  1. Change the font styles in all browsers.
+  2. Remove the margin in Firefox and Safari.
+  3. Remove default padding in all browsers.
+  */
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    margin: 0; /* 2 */
+    padding: 0; /* 3 */
+
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    font-weight: inherit; /* 1 */
+    line-height: inherit; /* 1 */
+    color: inherit; /* 1 */
+  }
+
+  /*
+  Remove the inheritance of text transform in Edge and Firefox.
+  */
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  /*
+  1. Correct the inability to style clickable types in iOS and Safari.
+  2. Remove default button styles.
+  */
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    appearance: auto; /* 1 */
+    background-color: transparent; /* 2 */
+    background-image: none; /* 2 */
+  }
+
+  /*
+  Use the modern Firefox focus style for all focusable elements.
+  */
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  /*
+  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+  */
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  /*
+  Add the correct vertical alignment in Chrome and Firefox.
+  */
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /*
+  Correct the cursor style of increment and decrement buttons in Safari.
+  */
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /*
+  1. Correct the odd appearance in Chrome and Safari.
+  2. Correct the outline style in Safari.
+  */
+
+  [type="search"] {
+    appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  /*
+  Remove the inner padding in Chrome and Safari on macOS.
+  */
+
+  ::-webkit-search-decoration {
+    appearance: none;
+  }
+
+  /*
+  1. Correct the inability to style clickable types in iOS and Safari.
+  2. Change font properties to `inherit` in Safari.
+  */
+
+  ::-webkit-file-upload-button {
+    font: inherit; /* 2 */
+    appearance: auto; /* 1 */
+  }
+
+  /*
+  Add the correct display in Chrome and Safari.
+  */
+
+  summary {
+    display: list-item;
+  }
+
+  /*
+  Removes the default spacing and border for appropriate elements.
+  */
+
+  blockquote,
+  dl,
+  dd,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  hr,
+  figure,
+  p,
+  pre {
+    margin: 0;
+  }
+
+  fieldset {
+    margin: 0;
+    padding: 0;
+  }
+
+  legend {
+    padding: 0;
+  }
+
+  ol,
+  ul,
+  menu {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /*
+  Prevent resizing textareas horizontally by default.
+  */
+
+  textarea {
+    resize: vertical;
+  }
+
+  /*
+  1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+  */
+
+  input::placeholder,
+  textarea::placeholder {
+    opacity: 1; /* 1 */
+  }
+
+  /*
+  Set the default cursor for buttons.
+  */
+
+  button,
+  [role="button"] {
+    cursor: pointer;
+  }
+
+  /*
+  Make sure disabled buttons don't get the pointer cursor.
+  */
+
+  :disabled {
+    cursor: default;
+  }
+
+  /*
+  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+     This can trigger a poorly considered lint error in some tools but is included by design.
+  */
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block; /* 1 */
+    vertical-align: middle; /* 2 */
+  }
+
+  /*
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+  */
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  /*
+  Make elements with the HTML hidden attribute stay hidden by default.
+  */
+
+  [hidden] {
+    display: none;
+  }
+}
--- a/src/styles/base/primitives.css
+++ b/src/styles/base/primitives.css
@@ -0,0 +1,200 @@
+.ui {
+  /* == Font sizes == */
+  --type--3: 0.625rem; /* 10px */
+  --type--2: 0.6875rem; /* 11px */
+  --type--1: 0.75rem; /* 12px */
+  --type-0: 0.875rem; /* 14px — base */
+  --type-1: 1rem; /* 16px */
+  --type-2: 1.125rem; /* 18px */
+  --type-3: 1.25rem; /* 20px */
+  --type-4: 1.375rem; /* 22px */
+  --type-5: 1.5625rem; /* 25px */
+  --type-6: 1.75rem; /* 28px */
+  --type-7: 1.9375rem; /* 31px */
+  --type-8: 2.1875rem; /* 35px */
+  --type-9: 2.5rem; /* 40px */
+  --type-10: 2.75rem; /* 44px */
+
+  /* == Line heights == */
+  --leading--3: 1.6;
+  --leading--2: 1.4545;
+  --leading--1: 1.6667;
+  --leading-0: 1.4286;
+  --leading-1: 1.5;
+  --leading-2: 1.3333;
+  --leading-3: 1.4;
+  --leading-4: 1.2727;
+  --leading-5: 1.28;
+  --leading-6: 1.2857;
+  --leading-7: 1.1613;
+  --leading-8: 1.1429;
+  --leading-9: 1.2;
+  --leading-10: 1.1818;
+
+  /* == Letter spacing == */
+  --tracking--3: 0.012em;
+  --tracking--2: 0.0082em;
+  --tracking--1: 0.005em;
+  --tracking-0: 0em;
+  --tracking-1: -0.0037em;
+  --tracking-2: -0.0067em;
+  --tracking-3: -0.009em;
+  --tracking-4: -0.0109em;
+  --tracking-5: -0.0132em;
+  --tracking-6: -0.015em;
+  --tracking-7: -0.0165em;
+  --tracking-8: -0.018em;
+  --tracking-9: -0.0195em;
+  --tracking-10: -0.0205em;
+
+  /* == Prose leading == */
+  --leading-prose: 1.7;
+  --leading-prose-tight: 1.6;
+
+  /* == Chrome tracking == */
+  --tracking-label: 0.14em; /* step labels, buttons */
+  --tracking-tag: 0.12em; /* tags */
+  --tracking-eyebrow: 0.16em; /* section eyebrows, zone labels */
+  --tracking-plate: 0.08em; /* plate numbers */
+  --tracking-display: 0.01em; /* Blaka h1 */
+}
+
+.content {
+  /* == Font sizes == */
+  --type--3: 0.625em;
+  --type--2: 0.6875em;
+  --type--1: 0.8125em;
+  --type-0: 1em; /* 16px — base */
+  --type-1: 1.1875em;
+  --type-2: 1.4375em;
+  --type-3: 1.6875em;
+  --type-4: 2em;
+  --type-5: 2.375em;
+  --type-6: 2.8125em;
+  --type-7: 3.375em;
+  --type-8: 4em;
+  --type-9: 4.75em;
+  --type-10: 5.6875em;
+
+  /* == Line heights == */
+  --leading--3: 2;
+  --leading--2: 1.8182;
+  --leading--1: 1.5385;
+  --leading-0: 1.5;
+  --leading-1: 1.4737;
+  --leading-2: 1.3912;
+  --leading-3: 1.3333;
+  --leading-4: 1.25;
+  --leading-5: 1.2632;
+  --leading-6: 1.1556;
+  --leading-7: 1.1852;
+  --leading-8: 1.125;
+  --leading-9: 1.1053;
+  --leading-10: 1.0989;
+
+  /* == Letter spacing == */
+  --tracking--3: 0.018em;
+  --tracking--2: 0.0136em;
+  --tracking--1: 0.0069em;
+  --tracking-0: 0em;
+  --tracking-1: -0.0047em;
+  --tracking-2: -0.0091em;
+  --tracking-3: -0.0122em;
+  --tracking-4: -0.015em;
+  --tracking-5: -0.0174em;
+  --tracking-6: -0.0193em;
+  --tracking-7: -0.0211em;
+  --tracking-8: -0.0225em;
+  --tracking-9: -0.0237em;
+  --tracking-10: -0.0247em;
+  --leading-prose: 1.6;
+}
+
+:root {
+  /* === FONT FAMILIES == */
+  --font-display: var(--font-blaka), serif;
+  --font-header: var(--font-geist), sans-serif;
+  --font-body: var(--font-julia-mono), monospace;
+  --font-mono: var(--font-geist-mono), monospace;
+  --font-symbols: var(--font-unigrim), monospace;
+  --font-weight-display: 400;
+  --font-weight-body: 400;
+  --font-weight-emphasis: 700;
+  --font-weight-label: 600;
+  --font-weight-heading: 800;
+
+  /* === SIZE === */
+  --size-0: 0;
+  --size-px: 0.0625rem; /* 1px */
+  --size-1: 0.125rem; /* 2px */
+  --size-2: 0.25rem; /* 4px */
+  --size-3: 0.375rem; /* 6px */
+  --size-4: 0.5rem; /* 8px */
+  --size-5: 0.625rem; /* 10px */
+  --size-6: 0.75rem; /* 12px */
+  --size-7: 0.875rem; /* 14px */
+  --size-8: 1rem; /* 16px */
+  --size-9: 1.25rem; /* 20px */
+  --size-10: 1.5rem; /* 24px */
+  --size-11: 2rem;
+  --size-12: 2.5rem;
+  --size-13: 3rem;
+  --size-14: 4rem;
+  --size-15: 5rem;
+  --size-16: 6rem;
+
+  /* === SPACING === */
+  --space-0: 0;
+  --space-px: 0.0625em;
+  --space-1: 0.125em;
+  --space-2: 0.25em;
+  --space-3: 0.375em;
+  --space-4: 0.5em;
+  --space-5: 0.625em;
+  --space-6: 0.75em;
+  --space-7: 0.875em;
+  --space-8: 1em;
+  --space-9: 1.25em;
+  --space-10: 1.5em;
+  --space-11: 2em;
+  --space-12: 2.5em;
+  --space-13: 3em;
+  --space-14: 4em;
+  --space-15: 5em;
+  --space-16: 6em;
+
+  /* === BORDER === */
+  --border-hairline: var(--size-px); /* 1px — inside a card */
+  --border-card: var(--size-1); /* 2px — the card edge */
+  --border-shell: var(--size-3); /* 6px?? no: see below */
+  --border-boundary: 0.1875rem; /* 3px — section / shell boundary */
+  --border-marker: var(--size-1); /* 2px — the tier row active marker */
+  --radius: 0; /* always. */
+
+  /* === FIXED SLOTS === */
+  --slot-sigil: var(--size-7); /* 14px — Unigrim Dee. RESERVED, empty. */
+  --slot-plate: 2.25rem; /* plate number column */
+  --slot-modifier: 1.125rem; /* the +2 / −1 column in contributions */
+  --slot-marker: var(--size-5); /* footnote marker column */
+  --slot-roll-range: 1.5rem; /* the 4–5 column in a table row */
+
+  /* ═══ MOTION ═══ */
+  --motion-fast: 150ms; /* state change: hover, focus, press */
+  --motion-normal: 300ms; /* reveals: chooser open, tier switch */
+  --motion-slow: 500ms;
+  --motion-instant: 0ms; /* roll results. Use this deliberately. */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  /* ═══ LAYOUT ═══ */
+  --layout-max-width: 74rem; /* the tool shell */
+  --layout-content-width: minmax(0, 78ch); /* article measure */
+  --layout-margin-width: minmax(10ch, 1fr);
+  --layout-step-columns: 2;
+  --layout-gutter: var(--size-6); /* between step cards */
+  --layout-section-gap: var(--size-9); /* header to grid */
+  --layout-page-margin: var(--size-10);
+  --layout-tier-height: 2.25rem;
+  --layout-header-height: 3.125rem;
+  --layout-card-min-height: 6.5rem; /* stops grid reflow on resolve */
+}
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -0,0 +1,15 @@
+@layer reset, base, components, utilities;
+
+@import url("base/custom-media.css");
+@import url("base/foundation.css");
+@import url("base/colors.css");
+@import url("base/primitives.css");
+
+@layer base {
+  body {
+    font-family: var(--font-body);
+    font-variant-ligatures: discretionary-ligatures;
+    color: var(--color-text-primary);
+    background-color: var(--color-surface-base);
+  }
+}
--- a/stylelint.config.mjs
+++ b/stylelint.config.mjs
@@ -0,0 +1,27 @@
+const stylelintConfig = {
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-html/astro',
+    'stylelint-config-clean-order',
+  ],
+  overrides: [
+    {
+      files: ['src/styles/mixins/**/*.css'],
+      rules: { 'nesting-selector-no-missing-scoping-root': null },
+    },
+  ],
+  rules: {
+    'declaration-empty-line-before': null,
+    'declaration-block-no-redundant-longhand-properties': null,
+    'no-descending-specificity': null,
+    'selector-class-pattern': null,
+    'custom-property-pattern': null,
+    'at-rule-no-unknown': [true, { ignoreAtRules: ['custom-media', 'define-mixin', 'mixin'] }],
+    'at-rule-prelude-no-invalid': [true, { ignoreAtRules: ['define-mixin', 'mixin'] }],
+    'function-no-unknown': [true, { ignoreFunctions: ['/^\\$[a-zA-Z][\\w-]*$/'] }],
+    'value-keyword-case': ['lower', { ignoreKeywords: ['/^\\$[a-zA-Z][\\w-]*$/'] }],
+  },
+  ignoreFiles: ['dist/**', '.astro/**', 'node_modules/**', 'public/**'],
+}
+
+export default stylelintConfig
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+    },
+  },
+}