Add six calm Jewish/Israel/Chabad gallery style directions.

Jerusalem Stone, Chabad Blue, Kotel Quiet, Olive Grove, Shabbat Linen, and Tel Aviv Bauhaus — modern and restrained, with page mockups.

viewer-frontend/app/styles/StylesPickerClient.tsx

@@ -21,7 +21,7 @@ export default function StylesPickerClient() {
       setPicked(saved);
       setExpandedIds(new Set([saved]));
     } else {
-      // Open the three NEW styles so the exciting options are visible immediately
+      // Open NEW styles (Chabad / Israel set) by default
       setExpandedIds(
         new Set(STYLES.filter((s) => s.isNew).map((s) => s.id))
       );
@@ -74,15 +74,16 @@ export default function StylesPickerClient() {
       <main id="main-content" className="mx-auto max-w-7xl px-4 py-8">
         <div className="max-w-3xl">
           <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground mb-2">
-            Design lab · 12 directions
+            Design lab · {STYLES.length} directions
           </p>
           <h1 className="text-3xl sm:text-4xl font-semibold tracking-tight">
             See each style on every page
           </h1>
           <p className="mt-3 text-muted-foreground leading-relaxed">
             Not just swatches — each direction shows Home, Photo, Search, Identify, Upload, and
-            Login. Expand a style, scroll the mockups, then tap <strong>Pick this style</strong>.
-            Three new high-energy options are marked <span className="text-foreground font-medium">NEW</span>.
+            Login. The six marked <span className="text-foreground font-medium">NEW</span> lean
+            Jewish / Israel / Chabad: modern, calm, not flashy. Expand a style, then{' '}
+            <strong>Pick this style</strong>.
           </p>
         </div>
 
@@ -225,7 +226,7 @@ export default function StylesPickerClient() {
             </li>
           </ul>
           <p className="mt-3 text-sm text-muted-foreground">
-            Tell us the winning style number (01–12) and we&apos;ll implement that direction next.
+            Tell us the winning style number and we&apos;ll implement that direction next.
           </p>
         </section>
       </main>

viewer-frontend/app/styles/page.tsx

@@ -4,18 +4,52 @@ import StylesPickerClient from './StylesPickerClient';
 export const metadata: Metadata = {
   title: 'JRCC gallery — style picker',
   description:
-    'Compare 12 redesign directions with page mockups for Home, Photo, Search, Identify, Upload, and Login.',
+    'Compare redesign directions with page mockups for Home, Photo, Search, Identify, Upload, and Login — including calm Jewish / Israel / Chabad options.',
 };
 
+const FONT_HREF =
+  'https://fonts.googleapis.com/css2?' +
+  [
+    'family=Alegreya:wght@600;700',
+    'family=Archivo:wght@600;700',
+    'family=Assistant:wght@400;600',
+    'family=Atkinson+Hyperlegible:wght@400;700',
+    'family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700',
+    'family=Chakra+Petch:wght@400;600;700',
+    'family=Cormorant:wght@600;700',
+    'family=Cormorant+Garamond:wght@600',
+    'family=David+Libre:wght@500;700',
+    'family=DM+Sans:wght@400;600',
+    'family=Figtree:wght@400;600',
+    'family=Frank+Ruhl+Libre:wght@600;700',
+    'family=Fraunces:opsz,wght@9..144,600',
+    'family=Heebo:wght@500;700',
+    'family=IBM+Plex+Sans:wght@400;600',
+    'family=Instrument+Serif',
+    'family=Karla:wght@400;600',
+    'family=Libre+Baskerville:wght@700',
+    'family=Libre+Franklin:wght@400;600',
+    'family=Literata:opsz,wght@7..72,400;7..72,600',
+    'family=Manrope:wght@600;700',
+    'family=Newsreader:opsz,wght@6..72,600',
+    'family=Nunito+Sans:wght@400;700',
+    'family=Outfit:wght@400;600',
+    'family=Press+Start+2P',
+    'family=Public+Sans:wght@400;600',
+    'family=Rubik:wght@500;700',
+    'family=Sora:wght@600',
+    'family=Source+Sans+3:wght@400;600',
+    'family=Space+Grotesk:wght@500;700',
+    'family=Syne:wght@700',
+    'display=swap',
+  ].join('&');
+
 export default function StylesPage() {
   return (
     <>
       {/* Preview fonts for style mockups only */}
       {/* eslint-disable-next-line @next/next/no-page-custom-font */}
-      <link
-        rel="stylesheet"
-        href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700&family=Chakra+Petch:wght@400;600;700&family=Cormorant+Garamond:wght@600&family=DM+Sans:wght@400;600&family=Figtree:wght@400;600&family=Fraunces:opsz,wght@9..144,600&family=IBM+Plex+Sans:wght@400;600&family=Instrument+Serif&family=Karla:wght@400;600&family=Libre+Baskerville:wght@700&family=Literata:opsz,wght@7..72,400;7..72,600&family=Manrope:wght@600;700&family=Newsreader:opsz,wght@6..72,600&family=Nunito+Sans:wght@400;700&family=Outfit:wght@400;600&family=Press+Start+2P&family=Public+Sans:wght@400;600&family=Rubik:wght@500;700&family=Sora:wght@600&family=Source+Sans+3:wght@400;600&family=Space+Grotesk:wght@500;700&family=Syne:wght@700&display=swap"
-      />
+      <link rel="stylesheet" href={FONT_HREF} />
       <StylesPickerClient />
     </>
   );

viewer-frontend/app/styles/styleOptions.ts

@@ -10,7 +10,13 @@ export type StyleId =
   | 'cluster-lab'
   | 'matchmaker-arcade'
   | 'parade-mosaic'
-  | 'orbit-kin';
+  | 'orbit-kin'
+  | 'jerusalem-stone'
+  | 'chabad-blue'
+  | 'kotel-quiet'
+  | 'olive-grove'
+  | 'shabbat-linen'
+  | 'tel-aviv-bauhaus';
 
 export type StyleTokens = {
   bg: string;
@@ -295,7 +301,6 @@ export const STYLES: StyleOption[] = [
     whyComeBack: 'Combo multipliers, boss “mystery faces,” and weekly JRCC leaderboards.',
     fonts: 'Display: Press Start 2P · Body: Chakra Petch',
     mood: 'Cabinet glow, chunky CTAs, score pops on every ID',
-    isNew: true,
     tokens: {
       bg: '#1A0533',
       surface: '#2D0B55',
@@ -322,7 +327,6 @@ export const STYLES: StyleOption[] = [
     whyComeBack: 'After Purim/picnic uploads, the wall animates as faces get named.',
     fonts: 'Display: Bricolage Grotesque · Body: Atkinson Hyperlegible',
     mood: 'Festival stripes, diagonal banners, mosaic tiles that unlock',
-    isNew: true,
     tokens: {
       bg: '#FFF7ED',
       surface: '#FFEDD5',
@@ -349,7 +353,6 @@ export const STYLES: StyleOption[] = [
     whyComeBack: 'Tap a person → orbit their relatives & event clusters across decades.',
     fonts: 'Display: Instrument Serif · Body: Geist',
     mood: 'Ink-sky map, copper trails, quiet wow for multi-gen families',
-    isNew: true,
     tokens: {
       bg: '#071018',
       surface: '#0E1A24',
@@ -369,4 +372,166 @@ export const STYLES: StyleOption[] = [
       vibe: 'cinematic',
     },
   },
+  {
+    id: 'jerusalem-stone',
+    name: 'Jerusalem Stone',
+    tagline: 'Limestone light, quiet dignity',
+    whyComeBack: 'Browse like walking a sunlit street — warm stone, soft shadows, faces first.',
+    fonts: 'Display: Frank Ruhl Libre · Body: Assistant',
+    mood: 'אבן ירושלמית — modern, calm, not flashy',
+    isNew: true,
+    tokens: {
+      bg: '#EDE6DC',
+      surface: '#F7F3EC',
+      text: '#3D3429',
+      muted: '#8A7E6E',
+      accent: '#6B5A45',
+      accentText: '#F7F3EC',
+      border: 'rgba(61,52,41,0.14)',
+      chip: '#D9D0C2',
+      photoA: '#C9BBA8',
+      photoB: '#A89880',
+      photoC: '#7A6A55',
+      radius: '8px',
+      display: '"Frank Ruhl Libre", Georgia, serif',
+      body: '"Assistant", system-ui, sans-serif',
+      density: 'airy',
+      vibe: 'editorial',
+    },
+  },
+  {
+    id: 'chabad-blue',
+    name: 'Chabad Blue',
+    tagline: 'Navy, white, one quiet gold',
+    whyComeBack: 'Clean outreach energy — find people, tag faces, invite family without noise.',
+    fonts: 'Display: Heebo · Body: Rubik',
+    mood: 'Classic Chabad palette, modern spacing, restrained gold accent',
+    isNew: true,
+    tokens: {
+      bg: '#F5F7FB',
+      surface: '#FFFFFF',
+      text: '#0B1F4B',
+      muted: '#5B6B8C',
+      accent: '#0038A8',
+      accentText: '#FFFFFF',
+      border: 'rgba(11,31,75,0.12)',
+      chip: '#E8EEF8',
+      photoA: '#D6E0F2',
+      photoB: '#8FA3C9',
+      photoC: '#C4A35A',
+      radius: '10px',
+      display: '"Heebo", system-ui, sans-serif',
+      body: '"Rubik", system-ui, sans-serif',
+      density: 'cozy',
+      vibe: 'editorial',
+    },
+  },
+  {
+    id: 'kotel-quiet',
+    name: 'Kotel Quiet',
+    tagline: 'Stone layers, soft reverence',
+    whyComeBack: 'Slow looking — notes beside photos, names offered gently, no scoreboard.',
+    fonts: 'Display: David Libre · Body: Heebo',
+    mood: 'Weathered limestone + deep charcoal; prayerful, not theatrical',
+    isNew: true,
+    tokens: {
+      bg: '#F0EBE3',
+      surface: '#E7E0D5',
+      text: '#2C2A26',
+      muted: '#6E675C',
+      accent: '#4A453C',
+      accentText: '#F0EBE3',
+      border: 'rgba(44,42,38,0.16)',
+      chip: '#D4CDC2',
+      photoA: '#B8AFA1',
+      photoB: '#8E8578',
+      photoC: '#5C564C',
+      radius: '2px',
+      display: '"David Libre", Georgia, serif',
+      body: '"Heebo", system-ui, sans-serif',
+      density: 'airy',
+      vibe: 'editorial',
+    },
+  },
+  {
+    id: 'olive-grove',
+    name: 'Olive Grove',
+    tagline: 'Israel landscape, soft green',
+    whyComeBack: 'Seasonal calm — same people across years under an olive-toned UI.',
+    fonts: 'Display: Alegreya · Body: Source Sans 3',
+    mood: 'Galilee olive + warm sand; rooted, contemporary',
+    isNew: true,
+    tokens: {
+      bg: '#F2F0E8',
+      surface: '#FFFFFF',
+      text: '#2F3A2E',
+      muted: '#6F7A6A',
+      accent: '#5B6B3A',
+      accentText: '#F2F0E8',
+      border: 'rgba(47,58,46,0.12)',
+      chip: '#E2E4D6',
+      photoA: '#C5C9B0',
+      photoB: '#8A9368',
+      photoC: '#B08958',
+      radius: '12px',
+      display: '"Alegreya", Georgia, serif',
+      body: '"Source Sans 3", system-ui, sans-serif',
+      density: 'cozy',
+      vibe: 'editorial',
+    },
+  },
+  {
+    id: 'shabbat-linen',
+    name: 'Shabbat Linen',
+    tagline: 'Table calm, candle warmth',
+    whyComeBack: 'Friday evening mood — soft linen UI, gentle prompts to name a face.',
+    fonts: 'Display: Cormorant · Body: Libre Franklin',
+    mood: 'White cloth, one amber note; hospitality over hype',
+    isNew: true,
+    tokens: {
+      bg: '#FAF8F4',
+      surface: '#FFFFFF',
+      text: '#3A342C',
+      muted: '#8C8378',
+      accent: '#B07A3A',
+      accentText: '#FFFAF3',
+      border: 'rgba(58,52,44,0.1)',
+      chip: '#EFE8DC',
+      photoA: '#E4D9C8',
+      photoB: '#C9B59A',
+      photoC: '#B07A3A',
+      radius: '14px',
+      display: '"Cormorant", Georgia, serif',
+      body: '"Libre Franklin", system-ui, sans-serif',
+      density: 'airy',
+      vibe: 'editorial',
+    },
+  },
+  {
+    id: 'tel-aviv-bauhaus',
+    name: 'Tel Aviv Bauhaus',
+    tagline: 'White city, modern lines',
+    whyComeBack: 'Sharp, airy grids — Israel modernism for a fast, clear gallery.',
+    fonts: 'Display: Archivo · Body: IBM Plex Sans',
+    mood: 'Bauhaus white + sky blue + concrete; geometric, not loud',
+    isNew: true,
+    tokens: {
+      bg: '#F8FAFC',
+      surface: '#FFFFFF',
+      text: '#1E293B',
+      muted: '#64748B',
+      accent: '#0284C7',
+      accentText: '#F0F9FF',
+      border: 'rgba(30,41,59,0.1)',
+      chip: '#E2E8F0',
+      photoA: '#CBD5E1',
+      photoB: '#94A3B8',
+      photoC: '#38BDF8',
+      radius: '0px',
+      display: '"Archivo", system-ui, sans-serif',
+      body: '"IBM Plex Sans", system-ui, sans-serif',
+      density: 'dense',
+      vibe: 'editorial',
+    },
+  },
 ];