Phala-Network · Marvin-Cypher · May 6, 2026 · May 1, 2026 · May 1, 2026 · May 1, 2026
diff --git a/.gitattributes b/.gitattributes
@@ -26,3 +26,5 @@
 *.obj filter=lfs diff=lfs merge=lfs -text
 *.fbx filter=lfs diff=lfs merge=lfs -text
 *.blend filter=lfs diff=lfs merge=lfs -text
+*.woff filter=lfs diff=lfs merge=lfs -text
+*.woff2 filter=lfs diff=lfs merge=lfs -text
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,6 @@ next-env.d.ts
 .env
 
 *.local.*
+.gstack/
+.claude/
+/website-nextjs/
diff --git a/bun.lock b/bun.lock
diff --git a/docs/design-system/DESIGN.md b/docs/design-system/DESIGN.md
diff --git a/docs/design-system/theme.css b/docs/design-system/theme.css
@@ -0,0 +1,110 @@
+/*
+ * Phala v3 — Tailwind v4 @theme block.
+ *
+ * Drop into src/app/globals.css after Tailwind import to expose tokens as
+ * utilities (text-primary, bg-phala-blue-500, font-display, etc.).
+ *
+ * This is a flat reference; the production site sources values from
+ * src/app/theme/colors.css via `@theme inline` so the CSS vars are the
+ * single source of truth.
+ */
+
+@theme {
+  /* ─── Base scale ─────────────────────────────────────────────────── */
+  --color-base-50: oklch(0.983 0.0034 145.55);
+  --color-base-100: oklch(0.9691 0.0037 146.57);
+  --color-base-200: oklch(0.9258 0.0048 147.01);
+  --color-base-300: oklch(0.869 0.0054 148);
+  --color-base-400: oklch(0.7067 0.0061 149.29);
+  --color-base-500: oklch(0.5535 0.0066 150.55);
+  --color-base-600: oklch(0.4449 0.0065 151.33);
+  --color-base-700: oklch(0.3731 0.0059 150.75);
+  --color-base-800: oklch(0.2731 0.0051 150.35);
+  --color-base-900: oklch(0.2123 0.0048 151.01);
+  --color-base-950: oklch(0.1386 0.0044 150.49);
+  --color-base-1000: oklch(0.0909 0.0041 150.95);
+
+  /* ─── Primary scale ──────────────────────────────────────────────── */
+  --color-primary-50: oklch(0.9861 0.0309 118.52);
+  --color-primary-100: oklch(0.9676 0.0683 119.72);
+  --color-primary-200: oklch(0.9387 0.1289 121.44);
+  --color-primary-300: oklch(0.8962 0.1971 123.29);
+  --color-primary-400: oklch(0.8421 0.2371 125.02);
+  --color-primary-500: oklch(0.7708 0.2308 126.52);
+  --color-primary-600: oklch(0.6514 0.1967 127.14);
+  --color-primary-700: oklch(0.5343 0.1568 126.91);
+  --color-primary-800: oklch(0.4554 0.1246 126.16);
+  --color-primary-900: oklch(0.4067 0.1017 125.95);
+  --color-primary-950: oklch(0.2752 0.0724 126.79);
+  --color-primary-1000: oklch(0.1899 0.0531 127.24);
+
+  /* ─── Phala Blue ─────────────────────────────────────────────────── */
+  --color-phala-blue-50: #f0f2ff;
+  --color-phala-blue-100: #d5dbf8;
+  --color-phala-blue-200: #bfc8f0;
+  --color-phala-blue-300: #aabbff;
+  --color-phala-blue-400: #8b9fe0;
+  --color-phala-blue-500: #6b80cc;
+  --color-phala-blue-900: #2d3250;
+
+  /* ─── Phala Purple ───────────────────────────────────────────────── */
+  --color-phala-purple-50: #f5f0f8;
+  --color-phala-purple-100: #e7e1eb;
+  --color-phala-purple-200: #d4c0e8;
+  --color-phala-purple-300: #b88fd0;
+  --color-phala-purple-400: #9b6bbf;
+  --color-phala-purple-500: #7e3daf;
+  --color-phala-purple-900: #3d2055;
+
+  /* ─── Phala Orange ───────────────────────────────────────────────── */
+  --color-phala-orange-50: #fff5ec;
+  --color-phala-orange-100: #f8e7d5;
+  --color-phala-orange-200: #f0cca0;
+  --color-phala-orange-300: #f5902c;
+  --color-phala-orange-400: #d87a20;
+  --color-phala-orange-500: #a07830;
+  --color-phala-orange-900: #4a3520;
+
+  /* ─── Typography families ────────────────────────────────────────── */
+  --font-display: "ABCArizonaFlare", Georgia, serif;
+  --font-sans: "ABCDiatype", "Trebuchet MS", Arial, sans-serif;
+  --font-mono: "SuisseIntlMono", "SFMono-Regular", Consolas, monospace;
+
+  /* ─── Type-step utilities (Phala v3 sizing) ──────────────────────── */
+  --text-caption: 11px;
+  --leading-caption: 1.2;
+  --text-eyebrow: 11px;
+  --leading-eyebrow: 1.2;
+  --tracking-eyebrow: 0.08em;
+  --text-body-sm: 13px;
+  --leading-body-sm: 1.5;
+  --text-body: 15px;
+  --leading-body: 1.65;
+  --text-body-lg: 18px;
+  --leading-body-lg: 1.4;
+  --text-ui: 15px;
+  --leading-ui: 1.2;
+  --text-card-title: 24px;
+  --leading-card-title: 1.1;
+  --text-section-title-min: 30px;
+  --text-section-title-pref: 2.8vw;
+  --text-section-title-max: 46px;
+  --leading-section-title: 1.08;
+  --text-hero-claim-mobile: 38px;
+  --text-hero-claim-tablet: 58px;
+  --text-hero-claim-desktop: 68px;
+  --leading-hero-claim: 0.96;
+
+  /* ─── Spacing rhythm ─────────────────────────────────────────────── */
+  --spacing-section-y: 48px;
+  --spacing-section-y-md: 64px;
+  --spacing-section-y-lg: 96px;
+
+  /* ─── Border radii (mostly sharp) ────────────────────────────────── */
+  --radius-sm: 0px;
+  --radius-md: 2px;
+  --radius: 4px;
+  --radius-lg: 4px;
+  --radius-xl: 8px;
+  /* No --radius-full: pill buttons are not part of v3. */
+}
diff --git a/docs/design-system/tokens.json b/docs/design-system/tokens.json
@@ -0,0 +1,174 @@
+{
+  "$schema": "https://schemas.dtcg.org/design-tokens",
+  "$description": "Phala v3 design tokens — extracted from src/app/theme/colors.css and src/app/theme/typography.css.",
+  "color": {
+    "base": {
+      "50": { "$value": "oklch(0.983 0.0034 145.55)", "$type": "color", "$description": "Lightest neutral, marketing section bg tone" },
+      "100": { "$value": "oklch(0.9691 0.0037 146.57)", "$type": "color", "$description": "Muted surface" },
+      "200": { "$value": "oklch(0.9258 0.0048 147.01)", "$type": "color", "$description": "Border default" },
+      "300": { "$value": "oklch(0.869 0.0054 148)", "$type": "color" },
+      "400": { "$value": "oklch(0.7067 0.0061 149.29)", "$type": "color" },
+      "500": { "$value": "oklch(0.5535 0.0066 150.55)", "$type": "color" },
+      "600": { "$value": "oklch(0.4449 0.0065 151.33)", "$type": "color", "$description": "Muted foreground" },
+      "700": { "$value": "oklch(0.3731 0.0059 150.75)", "$type": "color" },
+      "800": { "$value": "oklch(0.2731 0.0051 150.35)", "$type": "color", "$description": "Default foreground (body text)" },
+      "900": { "$value": "oklch(0.2123 0.0048 151.01)", "$type": "color" },
+      "950": { "$value": "oklch(0.1386 0.0044 150.49)", "$type": "color", "$description": "Dark mode background" },
+      "1000": { "$value": "oklch(0.0909 0.0041 150.95)", "$type": "color", "$description": "Pre-black" }
+    },
+    "primary": {
+      "$description": "Phala lime — proof / live / sealed / verified states. Never body text.",
+      "50": { "$value": "oklch(0.9861 0.0309 118.52)", "$type": "color" },
+      "100": { "$value": "oklch(0.9676 0.0683 119.72)", "$type": "color" },
+      "200": { "$value": "oklch(0.9387 0.1289 121.44)", "$type": "color" },
+      "300": { "$value": "oklch(0.8962 0.1971 123.29)", "$type": "color", "$description": "Default primary chip" },
+      "400": { "$value": "oklch(0.8421 0.2371 125.02)", "$type": "color" },
+      "500": { "$value": "oklch(0.7708 0.2308 126.52)", "$type": "color" },
+      "600": { "$value": "oklch(0.6514 0.1967 127.14)", "$type": "color" },
+      "700": { "$value": "oklch(0.5343 0.1568 126.91)", "$type": "color", "$description": "Hover/active text-primary on light theme" },
+      "800": { "$value": "oklch(0.4554 0.1246 126.16)", "$type": "color" },
+      "900": { "$value": "oklch(0.4067 0.1017 125.95)", "$type": "color" },
+      "950": { "$value": "oklch(0.2752 0.0724 126.79)", "$type": "color" },
+      "1000": { "$value": "oklch(0.1899 0.0531 127.24)", "$type": "color" }
+    },
+    "phala-blue": {
+      "$description": "Periwinkle — secondary accent for ASCII anime, code chips, charts.",
+      "50": { "$value": "#f0f2ff", "$type": "color" },
+      "100": { "$value": "#d5dbf8", "$type": "color" },
+      "200": { "$value": "#bfc8f0", "$type": "color" },
+      "300": { "$value": "#aabbff", "$type": "color" },
+      "400": { "$value": "#8b9fe0", "$type": "color" },
+      "500": { "$value": "#6b80cc", "$type": "color", "$description": "Default text accent for v3 secondary surfaces" },
+      "900": { "$value": "#2d3250", "$type": "color" }
+    },
+    "phala-purple": {
+      "$description": "Memory / RTMR / KMS chrome.",
+      "50": { "$value": "#f5f0f8", "$type": "color" },
+      "100": { "$value": "#e7e1eb", "$type": "color" },
+      "200": { "$value": "#d4c0e8", "$type": "color" },
+      "300": { "$value": "#b88fd0", "$type": "color" },
+      "400": { "$value": "#9b6bbf", "$type": "color" },
+      "500": { "$value": "#7e3daf", "$type": "color" },
+      "900": { "$value": "#3d2055", "$type": "color" }
+    },
+    "phala-orange": {
+      "$description": "Receipt / signature / Sign-RPC alert accent.",
+      "50": { "$value": "#fff5ec", "$type": "color" },
+      "100": { "$value": "#f8e7d5", "$type": "color" },
+      "200": { "$value": "#f0cca0", "$type": "color" },
+      "300": { "$value": "#f5902c", "$type": "color" },
+      "400": { "$value": "#d87a20", "$type": "color" },
+      "500": { "$value": "#a07830", "$type": "color" },
+      "900": { "$value": "#4a3520", "$type": "color" }
+    },
+    "semantic-light": {
+      "background": { "$value": "{color.base.50}", "$type": "color" },
+      "foreground": { "$value": "{color.base.800}", "$type": "color" },
+      "card": { "$value": "#ffffff", "$type": "color" },
+      "card-foreground": { "$value": "{color.base.800}", "$type": "color" },
+      "primary": { "$value": "{color.primary.300}", "$type": "color" },
+      "primary-foreground": { "$value": "#000000", "$type": "color" },
+      "muted": { "$value": "{color.base.100}", "$type": "color" },
+      "muted-foreground": { "$value": "{color.base.600}", "$type": "color" },
+      "border": { "$value": "{color.base.200}", "$type": "color" },
+      "ring": { "$value": "{color.primary.300}", "$type": "color" }
+    },
+    "semantic-dark": {
+      "background": { "$value": "{color.base.950}", "$type": "color" },
+      "foreground": { "$value": "{color.base.200}", "$type": "color" },
+      "card": { "$value": "{color.base.900}", "$type": "color" },
+      "muted": { "$value": "{color.base.800}", "$type": "color" },
+      "muted-foreground": { "$value": "{color.base.300}", "$type": "color" },
+      "border": { "$value": "{color.base.800}", "$type": "color" }
+    },
+    "surface": {
+      "$description": "Section background tones used inline across v3 pages.",
+      "marketing": { "$value": "#f7f8f3", "$type": "color", "$description": "Beige section bg (hero-adjacent)" },
+      "marketing-cool": { "$value": "#f0f1ec", "$type": "color", "$description": "Cooler section bg" },
+      "marketing-light": { "$value": "#fbfcf8", "$type": "color", "$description": "Lightest section bg" },
+      "trust-path": { "$value": "#070908", "$type": "color", "$description": "Inverted dark band (Proof path / Sign-RPC sections)" },
+      "trust-card": { "$value": "#101310", "$type": "color", "$description": "Dark card on trust-path bg" }
+    }
+  },
+  "font": {
+    "display": {
+      "$value": "ABCArizonaFlare",
+      "$type": "fontFamily",
+      "$description": "Display headlines — h1, h2, hero claims. Use 400 weight at large sizes; the contrast comes from scale, not heaviness."
+    },
+    "body": {
+      "$value": "ABCDiatype",
+      "$type": "fontFamily",
+      "$description": "Body, UI, navigation, links, h3."
+    },
+    "mono": {
+      "$value": "SuisseIntlMono",
+      "$type": "fontFamily",
+      "$description": "Eyebrows, status pills, code, ASCII anime, terminal mockups."
+    }
+  },
+  "typography": {
+    "caption": { "$value": { "fontFamily": "{font.mono}", "fontSize": "11px", "fontWeight": 400, "lineHeight": 1.2, "letterSpacing": "0.08em", "textTransform": "uppercase" }, "$type": "typography" },
+    "eyebrow": { "$value": { "fontFamily": "{font.mono}", "fontSize": "12px", "fontWeight": 400, "lineHeight": 1.2, "letterSpacing": "0.08em", "textTransform": "uppercase" }, "$type": "typography" },
+    "body-sm": { "$value": { "fontFamily": "{font.body}", "fontSize": "13px", "fontWeight": 400, "lineHeight": 1.5 }, "$type": "typography" },
+    "body": { "$value": { "fontFamily": "{font.body}", "fontSize": "15px", "fontWeight": 400, "lineHeight": 1.65 }, "$type": "typography" },
+    "body-lg": { "$value": { "fontFamily": "{font.body}", "fontSize": "18px", "fontWeight": 400, "lineHeight": 1.4 }, "$type": "typography" },
+    "ui": { "$value": { "fontFamily": "{font.body}", "fontSize": "15px", "fontWeight": 500, "lineHeight": 1.2 }, "$type": "typography" },
+    "card-title": { "$value": { "fontFamily": "{font.display}", "fontSize": "24px", "fontWeight": 400, "lineHeight": 1.1 }, "$type": "typography" },
+    "section-title": { "$value": { "fontFamily": "{font.display}", "fontSize": "clamp(30px,2.8vw,46px)", "fontWeight": 400, "lineHeight": 1.08 }, "$type": "typography" },
+    "hero-claim": { "$value": { "fontFamily": "{font.display}", "fontSize": "68px", "fontWeight": 400, "lineHeight": 0.98, "$description": "Mobile 38px, sm 58px, lg 64-68px" }, "$type": "typography" }
+  },
+  "spacing": {
+    "0": { "$value": "0px", "$type": "dimension" },
+    "px": { "$value": "1px", "$type": "dimension", "$description": "Hairline gutter inside `gap-px bg-border` grids" },
+    "1": { "$value": "4px", "$type": "dimension" },
+    "2": { "$value": "8px", "$type": "dimension" },
+    "3": { "$value": "12px", "$type": "dimension" },
+    "4": { "$value": "16px", "$type": "dimension" },
+    "5": { "$value": "20px", "$type": "dimension" },
+    "6": { "$value": "24px", "$type": "dimension" },
+    "8": { "$value": "32px", "$type": "dimension" },
+    "10": { "$value": "40px", "$type": "dimension" },
+    "12": { "$value": "48px", "$type": "dimension", "$description": "Default section py minimum" },
+    "16": { "$value": "64px", "$type": "dimension", "$description": "Default section py md" },
+    "20": { "$value": "80px", "$type": "dimension" },
+    "24": { "$value": "96px", "$type": "dimension", "$description": "Generous section py" }
+  },
+  "radius": {
+    "none": { "$value": "0", "$type": "dimension", "$description": "Default — sharp corners" },
+    "default": { "$value": "4px", "$type": "dimension", "$description": "Buttons, chips" },
+    "sm": { "$value": "0", "$type": "dimension" },
+    "md": { "$value": "2px", "$type": "dimension" },
+    "lg": { "$value": "4px", "$type": "dimension" },
+    "xl": { "$value": "8px", "$type": "dimension" }
+  },
+  "layout": {
+    "container-max": { "$value": "1280px", "$type": "dimension", "$description": "Default max-width for v3 pages" },
+    "container-max-wide": { "$value": "1440px", "$type": "dimension", "$description": "Wider hero pages" }
+  },
+  "icon": {
+    "$description": "Phala v3 icons use a global stroke restyle: square caps, miter joins, 1.25 stroke. Applied via .lucide CSS rule in globals.css.",
+    "stroke-width": { "$value": "1.25", "$type": "number" },
+    "stroke-linecap": { "$value": "square", "$type": "string" },
+    "stroke-linejoin": { "$value": "miter", "$type": "string" },
+    "size-xs": { "$value": "12px", "$type": "dimension" },
+    "size-sm": { "$value": "16px", "$type": "dimension" },
+    "size-md": { "$value": "20px", "$type": "dimension" },
+    "size-lg": { "$value": "24px", "$type": "dimension", "$description": "Default icon size" },
+    "size-xl": { "$value": "32px", "$type": "dimension" },
+    "size-2xl": { "$value": "48px", "$type": "dimension" }
+  },
+  "$extensions": {
+    "phala.network": {
+      "designSystemVersion": "v3",
+      "extractedFrom": [
+        "src/app/theme/colors.css",
+        "src/app/theme/typography.css",
+        "src/app/globals.css"
+      ],
+      "designLanguage": "schematic / Bauhaus / CLI lineage",
+      "iconLibrary": "lucide-react (restyled)",
+      "customIconPattern": "Composition family: [base] + [Lock corner badge]. Frame family: [base] in sharp registry square."
+    }
+  }
+}