docs(settings): note that only brutalist theme applies font picks

fezcode · fezcode · commit 184f5e616f30 · 2026-04-22T23:15:18.000+03:00
- Add info callout above font pickers on all three settings pages

- Styled per theme (bone margin note / bronze left rail / emerald mono strip)

- Explains luxe + terracotta hold set typography for identity integrity
diff --git a/src/pages/brutalist-views/BrutalistSettingsPage.jsx b/src/pages/brutalist-views/BrutalistSettingsPage.jsx
@@ -394,6 +394,15 @@ const SettingsPage = () => {
             icon={<LayoutIcon />}
             delay={0.07}
           >
+            <div className="mb-6 px-4 py-3 border border-emerald-500/20 bg-emerald-500/5 font-mono text-[11px] leading-relaxed text-emerald-300/80 rounded-sm">
+              <span className="font-black uppercase tracking-widest text-emerald-400 mr-2">
+                {'// note'}
+              </span>
+              Only the <span className="text-white">Brutalist</span> theme respects these
+              font picks. Luxe and Terracotta hold their set typography (Playfair/Outfit
+              and Fraunces/IBM Plex Mono) so their identity stays intact. Your selection
+              here persists and reapplies whenever Brutalist is active.
+            </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
               <div className="p-6 border border-white/5 bg-white/[0.01]space-y-6">
                 <div>
diff --git a/src/pages/luxe-views/LuxeSettingsPage.jsx b/src/pages/luxe-views/LuxeSettingsPage.jsx
@@ -345,6 +345,12 @@ const LuxeSettingsPage = () => {
             icon={<LayoutIcon />}
             delay={0.2}
           >
+            <div className="mb-8 px-5 py-4 border-l-2 border-[#8D4004] bg-[#FAFAF8] font-outfit text-[13px] leading-relaxed text-[#1A1A1A]/70 italic">
+              Only the <span className="not-italic font-semibold text-[#1A1A1A]">Brutalist</span>{' '}
+              theme applies these font choices. Luxe keeps Playfair Display and Outfit
+              as its set faces; Terracotta holds Fraunces with IBM Plex Mono. Your
+              selection here is still saved for whenever you return to Brutalist.
+            </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
               <div className="space-y-6">
                 <h3 className="font-outfit text-[10px] uppercase tracking-[0.3em] text-black/30">
diff --git a/src/pages/terracotta-views/TerracottaSettingsPage.jsx b/src/pages/terracotta-views/TerracottaSettingsPage.jsx
@@ -404,6 +404,15 @@ const TerracottaSettingsPage = () => {
             title={<>How the <ChapterEm>ink lies.</ChapterEm></>}
             blurb="Font choices for long-form reading."
           />
+          <div className="mt-4 mb-2 px-4 py-3 border border-[#1A161320] bg-[#E8DECE]/60 font-ibm-plex-mono text-[10px] tracking-[0.22em] uppercase text-[#2E2620]/80 flex items-start gap-3">
+            <span className="text-[#C96442]">†</span>
+            <span className="normal-case tracking-normal font-fraunces italic text-[13px] text-[#1A1613] leading-snug">
+              Note — only the <strong>Brutalist</strong> theme responds to these
+              font picks. Luxe and Terracotta keep their set typography (Playfair /
+              Outfit and Fraunces / IBM Plex Mono respectively) so the identity
+              holds. The selection here still saves for when you switch themes.
+            </span>
+          </div>
           <ol className="border-t border-[#1A161320]">
             <SettingRow
               number={5}
