feat: make demo concepts permission-first

PLAN.md

@@ -33,7 +33,9 @@ Ideascape is in **Exploration mode**. Published entries are concept previews, no
 - [x] Expand the catalog with bold, measurable infrastructure concepts and explicit operating boundaries
 - [x] Refine broad launch previews into bounded tests with decision-grade evidence
 - [x] Replace generic previews with issue-driven Colorado Springs civic campaigns
+- [x] Give every demo a threat scenario, control boundary, and proof requirement consistent with the security claim policy
 - [x] Add persistent light and dark themes
+- [x] Restrict the rendered palette to black, white, neutral grays, and bright orange
 
 ## Phase 3 — Validation evidence and campaign design
 

README.md

@@ -18,6 +18,7 @@ Ideascape is an exploration-mode concept-validation platform for learning which
 
 - Public, unauthenticated idea discovery at `/ideas` and detail pages at `/ideas/:slug`
 - Twenty-one deterministic demo concepts, seeded through versioned Supabase migrations
+- A concept-specific security case on every demo: threat scenario, control boundary, and proof required before expansion
 - Three issue-driven Colorado Springs campaigns covering plate-reader surveillance, dangerous crossings, and inaccessible transit stops
 - URL-persistent text search and category filtering, including a direct permission-first technology view at `/ideas?category=technology`
 - Same-category recommendations on detail pages with accessible full-card links back into the catalog
@@ -32,7 +33,8 @@ Ideascape is an exploration-mode concept-validation platform for learning which
 - Email/password, Google, and GitHub OAuth-capable authentication with safe post-auth return paths
 - Public member profiles plus owner-only profile updates
 - Private creator drafts and editing at `/ideas/new` and `/ideas/:id/edit`
-- Persistent, system-aware light and dark themes using the warm orange visual system
+- Persistent, system-aware light and dark themes restricted to black, white,
+  neutral grays, and `#ff5a1f` bright orange
 - Route-level code splitting for non-home pages
 - Supabase row-level security and pgTAP coverage for profiles, ideas, media, categories, and interest signals
 
@@ -64,7 +66,7 @@ Fresh databases contain these published concept previews:
 20. [Model Commons Lab](https://ideascape-gamma.vercel.app/ideas/model-commons-lab)
 21. [Flock Off Colorado Springs](https://ideascape-gamma.vercel.app/ideas/glass-box-sensor-network)
 
-Each concept uses a stable UUID and slug, polished multi-paragraph copy, and a locally hosted SVG illustration so local resets and production verification remain reproducible. The earliest five broad previews now define bounded first tests, required permissions, privacy limits, measurable continuation evidence, and explicit stop conditions instead of assuming that backing or an operating program already exists. Those five concepts and Project Time Capsule also ask one focused, private-answer validation question so practical demand, permissions, and pilot capability can be evaluated as aggregate evidence rather than public member activity. Three previously generic previews are now sharp Colorado Springs campaigns: challenge the plate-reader dragnet through public records and lawful organizing, force a dangerous Academy Boulevard crossing into the engineering record, and turn Mountain Metro's own accessibility findings into five concrete stop fixes. Technology-forward previews remain permission-first: device and home-lab work stays inside written scope, compute jobs follow transparent acceptable-use controls, mesh nodes use legal spectrum and opt-in relays, repair documentation has lawful provenance, software archives preserve license provenance, heat recovery fails back to the original cooling path, and local-model comparisons use approved task packs.
+Each concept uses a stable UUID and slug, polished multi-paragraph copy, and a locally hosted SVG illustration so local resets and production verification remain reproducible. Every demo now uses the landing page's security-claim discipline: it names a concrete threat scenario, an authorization, privacy, safety, provenance, or fail-safe control boundary, and measurable proof required before the concept earns a larger test. The earliest five broad previews define bounded first tests, required permissions, privacy limits, measurable continuation evidence, and explicit stop conditions instead of assuming that backing or an operating program already exists. Those five concepts and Project Time Capsule also ask one focused, private-answer validation question so practical demand, permissions, and pilot capability can be evaluated as aggregate evidence rather than public member activity. Three previously generic previews are now sharp Colorado Springs campaigns: challenge the plate-reader dragnet through public records and lawful organizing, force a dangerous Academy Boulevard crossing into the engineering record, and turn Mountain Metro's own accessibility findings into five concrete stop fixes.
 
 ## Stack
 

docs/PROJECT_STATUS.md

@@ -19,7 +19,7 @@ Ideascape is in **Exploration mode**. The twenty-one published entries are conce
 
 ## Current focus
 
-1. Learn which concepts produce practical participation intent, not only passive curiosity.
+1. Learn which concepts produce practical participation intent, not only passive curiosity, while testing each one inside a published security case.
 2. Use focused private-answer questions across six bounded concepts to test practical demand, permissions, and pilot capability through aggregate evidence.
 3. Use the Project Time Capsule readiness dashboard to compare aggregate evidence with the published continue, revise, and archive thresholds.
 4. Use the private operations dashboard to watch aggregate membership, concepts, validation, pilot intake, and published-concept activity without opening respondent-level records.
@@ -28,13 +28,15 @@ Ideascape is in **Exploration mode**. The twenty-one published entries are conce
 ## Delivered
 
 - React/TypeScript/Vite application foundation, CI, and route-level code splitting
-- Responsive orange visual system with persistent system-aware light and dark themes
+- Responsive light/dark visual system restricted to black, white, neutral grays,
+  and `#ff5a1f` bright orange
 - Supabase authentication with email, Google, and GitHub-capable OAuth flows
 - Safe internal return paths across email authentication, OAuth, and callback failures
 - Public profiles with owner-only updates
 - Idea, category, media, lifecycle, and private interest-signal schema
 - Private draft creation and editing
 - Public idea discovery and detail routes with twenty-one deterministic demo concepts, including thirteen permission-first or technology-forward previews
+- Catalog badges and detail-page security cases connecting all twenty-one demos to a concrete threat scenario, control boundary, and proof requirement
 - Three localized Colorado Springs campaigns with explicit demands, public-record evidence, permitted field tests, and anti-tampering boundaries
 - Five early previews refined into bounded, permissioned tests with measurable continue, revise, and stop evidence
 - Shareable, URL-persistent discovery search and category filters with useful zero-result recovery

index.html

@@ -7,7 +7,7 @@
       name="description"
       content="Explore IdeaScape concept previews and signal which ideas you would like to see happen. No payment or commitment."
     />
-    <meta name="theme-color" content="#fff8ef" />
+    <meta name="theme-color" content="#ffffff" />
     <script>
       (() => {
         let savedTheme = null;
@@ -28,7 +28,7 @@
         document.documentElement.style.colorScheme = isDark ? "dark" : "light";
         document
           .querySelector('meta[name="theme-color"]')
-          ?.setAttribute("content", isDark ? "#211815" : "#fff8ef");
+          ?.setAttribute("content", isDark ? "#050505" : "#ffffff");
       })();
     </script>
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />

src/App.test.tsx

@@ -200,6 +200,9 @@ describe("App", () => {
 			name: /security before custody/i,
 		});
 		expect(securityModel).toHaveTextContent(/no custody is live/i);
+		expect(securityModel).toHaveTextContent(
+			/every seeded concept.*threat scenario.*control boundary.*proof required/i,
+		);
 		expect(
 			within(securityModel).getByRole("heading", {
 				name: /a milestone is claimed too early/i,

src/App.tsx

@@ -265,11 +265,11 @@ function HomePage() {
 							<figure className="relative overflow-hidden border border-foreground/20 bg-card p-2">
 								<div className="mb-2 flex items-center justify-between border-b border-border px-1 pb-2 font-mono text-[0.625rem] uppercase tracking-[0.12em] text-muted-foreground">
 									<span>Field sample / 021</span>
-									<span className="text-signal">Permission checked</span>
+									<span className="text-foreground">Permission checked</span>
 								</div>
 								<img
 									alt="Owner-controlled devices, an open padlock, and a terminal share an isolated repair bench"
-									className="aspect-[4/3] w-full object-cover"
+									className="editorial-image aspect-[4/3] w-full object-cover"
 									src="/images/ideas/device-liberation-lab.svg"
 								/>
 								<figcaption className="absolute bottom-4 left-4 right-4 flex items-center justify-between border border-border bg-card px-4 py-3 text-sm">
@@ -282,7 +282,7 @@ function HomePage() {
 							<div className="absolute -bottom-5 -left-5 hidden w-[44%] border border-border bg-card p-1.5 sm:block">
 								<img
 									alt="A read-only recovery station transfers files from damaged storage into an encrypted folder"
-									className="aspect-video w-full object-cover"
+									className="editorial-image aspect-video w-full object-cover"
 									src="/images/ideas/file-rescue-cooperative.svg"
 								/>
 							</div>
@@ -352,10 +352,10 @@ function HomePage() {
 					</section>
 
 					<section aria-labelledby="planned-funding-heading" className="pb-20">
-						<div className="relative overflow-hidden border border-primary/45 bg-[oklch(0.18_0.04_252)] text-[oklch(0.96_0.012_248)] dark:bg-[oklch(0.11_0.035_252)]">
+						<div className="relative overflow-hidden border border-neutral-500 bg-black text-white">
 							<div className="relative grid gap-8 border-b border-white/10 p-7 sm:p-10 lg:grid-cols-[1.15fr_0.85fr] lg:p-12">
 								<div>
-									<div className="inline-flex items-center gap-2 border-l-2 border-l-[oklch(0.82_0.15_60)] pl-3 font-mono text-[0.6875rem] font-medium uppercase tracking-[0.14em] text-[oklch(0.82_0.15_60)]">
+									<div className="inline-flex items-center gap-2 border-l-2 border-l-signal pl-3 font-mono text-[0.6875rem] font-medium uppercase tracking-[0.14em] text-signal">
 										<Sparkles className="size-4" aria-hidden="true" />
 										Planned, not live
 									</div>
@@ -365,17 +365,17 @@ function HomePage() {
 									>
 										Planned smart-contract funding
 									</h2>
-									<p className="mt-5 max-w-3xl text-lg leading-8 text-[oklch(0.84_0.018_70)]">
+									<p className="mt-5 max-w-3xl text-lg leading-8 text-neutral-300">
 										If a concept earns a campaign phase, the goal is to move
 										from social proof to explicit, inspectable funding terms. No
 										funds are accepted today.
 									</p>
 								</div>
 								<aside className="border border-white/15 bg-white/5 p-6">
-									<p className="text-xs font-bold uppercase tracking-[0.18em] text-[oklch(0.82_0.15_60)]">
+									<p className="text-xs font-bold uppercase tracking-[0.18em] text-signal">
 										Design status
 									</p>
-									<p className="mt-3 text-base leading-7 text-[oklch(0.9_0.012_72)]">
+									<p className="mt-3 text-base leading-7 text-neutral-200">
 										Chain, asset, and governance design have not been selected.
 										Any funding system would require security, legal, and pilot
 										review before launch.
@@ -391,15 +391,15 @@ function HomePage() {
 											key={title}
 										>
 											<div className="flex items-center justify-between">
-												<span className="grid size-10 place-items-center rounded-xl border border-white/10 bg-white/7 text-[oklch(0.82_0.15_60)]">
+												<span className="grid size-10 place-items-center rounded-xl border border-white/10 bg-white/7 text-signal">
 													<Icon className="size-5" aria-hidden="true" />
 												</span>
-												<span className="font-mono text-xs text-white/40">
+												<span className="font-mono text-xs text-neutral-400">
 													{number}
 												</span>
 											</div>
 											<h3 className="mt-7 text-lg font-semibold">{title}</h3>
-											<p className="mt-3 text-sm leading-7 text-[oklch(0.78_0.015_70)]">
+											<p className="mt-3 text-sm leading-7 text-neutral-300">
 												{description}
 											</p>
 										</article>
@@ -409,17 +409,17 @@ function HomePage() {
 
 							<div className="relative grid gap-8 p-7 sm:p-10 lg:grid-cols-[0.85fr_1.15fr] lg:p-12">
 								<div>
-									<p className="text-xs font-bold uppercase tracking-[0.18em] text-[oklch(0.82_0.15_60)]">
+									<p className="text-xs font-bold uppercase tracking-[0.18em] text-signal">
 										What the contract can—and cannot—do
 									</p>
-									<p className="mt-4 text-lg leading-8 text-[oklch(0.9_0.012_72)]">
+									<p className="mt-4 text-lg leading-8 text-neutral-200">
 										Smart contracts can make agreed rules and fund movements
 										easier to inspect. They do not replace identity, moderation,
 										real-world milestone review, dispute handling, or legal
 										responsibility.
 									</p>
 								</div>
-								<ul className="grid gap-3 text-sm leading-6 text-[oklch(0.84_0.018_70)] sm:grid-cols-2">
+								<ul className="grid gap-3 text-sm leading-6 text-neutral-300 sm:grid-cols-2">
 									{[
 										"Independent security review before any contract can hold funds",
 										"Published source, addresses, release rules, and upgrade controls",
@@ -433,7 +433,7 @@ function HomePage() {
 											key={guardrail}
 										>
 											<ShieldCheck
-												className="mt-0.5 size-4 shrink-0 text-[oklch(0.82_0.15_60)]"
+												className="mt-0.5 size-4 shrink-0 text-signal"
 												aria-hidden="true"
 											/>
 											<span>{guardrail}</span>
@@ -459,9 +459,12 @@ function HomePage() {
 										Security before custody
 									</h2>
 									<p className="mt-5 max-w-3xl text-lg leading-8 text-muted-foreground">
-										No custody is live. These examples show the failure paths a
-										real funding design must handle before a contract, wallet
-										connection, or fiat rail can reach production.
+										No custody is live. Every seeded concept applies the same
+										claim policy by naming a threat scenario, control boundary,
+										and proof required before expansion. The examples below show
+										the failure paths a real funding design must handle before a
+										contract, wallet connection, or fiat rail can reach
+										production.
 									</p>
 								</div>
 								<div className="max-w-sm border border-primary/25 bg-primary/6 p-5 text-sm leading-6 text-muted-foreground">

src/components/ui/button.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-	"group/button inline-flex min-h-11 shrink-0 items-center justify-center rounded-sm border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[background-color,color,border-color,transform] outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/55 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	"group/button inline-flex min-h-11 shrink-0 items-center justify-center rounded-sm border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[background-color,color,border-color,transform] outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 	{
 		variants: {
 			variant: {

src/features/auth/auth-callback-page.tsx

@@ -58,7 +58,7 @@ export function AuthCallbackPage() {
 				<div className={backdropClassName} />
 				<section className={cardClassName}>
 					<CheckCircle2
-						className="mx-auto size-8 text-emerald-600"
+						className="mx-auto size-8 text-signal"
 						aria-hidden="true"
 					/>
 					<h1 className="mt-6 text-3xl font-semibold tracking-tight">

src/features/auth/auth-page.tsx

@@ -157,7 +157,7 @@ export function AuthPage({ mode }: AuthPageProps) {
 									Email
 								</label>
 								<input
-									className="h-10 w-full rounded-lg border bg-background px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
+									className="h-10 w-full rounded-lg border bg-background px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring"
 									id="email"
 									name="email"
 									type="email"
@@ -170,7 +170,7 @@ export function AuthPage({ mode }: AuthPageProps) {
 									Password
 								</label>
 								<input
-									className="h-10 w-full rounded-lg border bg-background px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
+									className="h-10 w-full rounded-lg border bg-background px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring"
 									id="password"
 									name="password"
 									type="password"