@deckspec/theme-noir-display 0.1.0

package/patterns/three-pillars/index.tsx

@@ -0,0 +1,112 @@
+import { z } from "zod";
+
+const pillarSchema = z.object({
+  title: z.string().min(1).describe("Pillar title"),
+  description: z.string().min(1).describe("Pillar description"),
+  value: z.string().optional().describe("Optional large display value"),
+});
+
+export const schema = z.object({
+  label: z.string().min(1).max(30).optional().describe("Accent eyebrow"),
+  heading: z.string().min(1).max(60).describe("Section heading"),
+  pillars: z.array(pillarSchema).min(2).max(3).describe("Pillars (2-3)"),
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function ThreePillars({ label, heading, pillars }: Props) {
+  return (
+    <div className="slide-stack" style={{ justifyContent: "center", gap: 48 }}>
+      {/* Header */}
+      <div style={{ textAlign: "center" }}>
+        {label && (
+          <span
+            style={{
+              fontSize: 17,
+              fontWeight: 600,
+              letterSpacing: "-0.022em",
+              color: "var(--color-primary)",
+              display: "block",
+              marginBottom: 8,
+            }}
+          >
+            {label}
+          </span>
+        )}
+        <h2
+          style={{
+            fontSize: 48,
+            fontWeight: 600,
+            lineHeight: 1.08,
+            letterSpacing: "-0.003em",
+          }}
+        >
+          {heading}
+        </h2>
+      </div>
+
+      {/* Pillars as white cards on gray canvas */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${pillars.length}, 1fr)`,
+          gap: 20,
+        }}
+      >
+        {pillars.map((p, i) => (
+          <div
+            key={i}
+            style={{
+              backgroundColor: "#ffffff",
+              borderRadius: 18,
+              padding: "36px 32px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 12,
+              boxShadow: "4px 4px 12px rgba(0,0,0,0.06)",
+            }}
+          >
+            {p.value && (
+              <span
+                style={{
+                  fontSize: 40,
+                  fontWeight: 600,
+                  fontFamily: "var(--font-heading)",
+                  lineHeight: 1,
+                  letterSpacing: "-0.009em",
+                  color: "var(--color-primary)",
+                }}
+              >
+                {p.value}
+              </span>
+            )}
+            <span
+              style={{
+                fontSize: 21,
+                fontWeight: 600,
+                fontFamily: "var(--font-heading)",
+                letterSpacing: "0.011em",
+                color: "var(--color-foreground)",
+                lineHeight: 1.24,
+              }}
+            >
+              {p.title}
+            </span>
+            <span
+              style={{
+                fontSize: 17,
+                fontWeight: 400,
+                fontFamily: "var(--font-body)",
+                letterSpacing: "-0.022em",
+                color: "var(--color-muted-foreground)",
+                lineHeight: 1.47,
+              }}
+            >
+              {p.description}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/patterns/title-center/index.tsx

@@ -0,0 +1,46 @@
+import { z } from "zod";
+
+export const schema = z.object({
+  title: z.string().min(1).max(40).describe("Display headline — large, dramatic"),
+  subtitle: z.string().min(1).max(80).describe("Muted subtitle beneath headline"),
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function TitleCenter({ title, subtitle }: Props) {
+  return (
+    <div
+      className="slide"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "#ffffff",
+      }}
+    >
+      <div className="stack-center" style={{ gap: 16, maxWidth: 900, marginBottom: 32 }}>
+        <h1
+          style={{
+            fontSize: 72,
+            fontWeight: 600,
+            lineHeight: 1.05,
+            letterSpacing: "-0.015em",
+          }}
+        >
+          {title}
+        </h1>
+        <p
+          style={{
+            fontSize: 24,
+            fontWeight: 400,
+            lineHeight: 1.17,
+            letterSpacing: "0.009em",
+            color: "var(--color-muted-foreground)",
+          }}
+        >
+          {subtitle}
+        </p>
+      </div>
+    </div>
+  );
+}

package/tokens.json

@@ -0,0 +1,30 @@
+{
+  "name": "noir-display",
+  "displayName": "Pristine Display",
+  "description": "Apple.com inspired light theme — canvas gray background, display typography, dramatic whitespace, and cinematic clarity.",
+  "colors": {
+    "background": "#f5f5f7",
+    "foreground": "#1d1d1f",
+    "primary": "#0071e3",
+    "muted": "#e8e8ed",
+    "muted-foreground": "#6e6e73",
+    "border": "rgba(0,0,0,0.08)",
+    "accent": "#0066cc",
+    "card-background": "#ffffff"
+  },
+  "fonts": {
+    "heading": "'SF Pro JP', 'SF Pro Display', 'Hiragino Sans', 'Helvetica Neue', 'Noto Sans JP', sans-serif",
+    "body": "'SF Pro JP', 'SF Pro Text', 'Hiragino Sans', 'Helvetica Neue', 'Noto Sans JP', sans-serif"
+  },
+  "spacing": {
+    "slide-padding": "60px",
+    "slide-padding-x": "80px",
+    "slide-gap": "32px"
+  },
+  "borderRadius": "12px",
+  "slide": {
+    "width": 1200,
+    "height": 675,
+    "aspectRatio": "16/9"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": ".",
+    "composite": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "patterns/",
+    "components/"
+  ]
+}