docs(website): add marketing design language summary for v2026-06-20

website/docs/references/FAMILIAROS_WEBSITE_DESIGN_LANGUAGE_2026-06-20.md

@@ -0,0 +1,24 @@
+# FamiliarOS Website Design Language (2026-06-20)
+
+- Branding assets
+  - Emblem: `/branding/familiaros_icon.png` (transparent background, no square frame).
+  - Wordmark: `/branding/familiaros_logo.png`.
+  - Header layout on all public pages: emblem left, wordmark centered in header track, nav/actions right.
+  - Header shell height: `h-[10rem]` / `md:h-[10.5rem]` / `lg:h-[11rem]`.
+
+- Silver accent system for public marketing surfaces
+  - Use the silver tokens for shared effects and surfaces:
+    - `--brand-silver`
+    - `--brand-silver-soft`
+    - `--brand-silver-ink`
+  - Apply silver treatment to `public-card`, `public-card-raised`, `pricing-glow-border`, and MetalFX frames.
+  - Pricing controls/faces use silver (`billing tabs`, `toggle`, `plan badge`, `Most Popular` ribbon, `feature check`/icons, FAQ icons, CTA sparkles).
+  - Subscription frame background glows and borders must remain silver.
+
+- Typography
+  - Technical/modern stack remains in global tokens:
+    - `--font-ui: Sora`
+    - `--font-display: Orbitron` (with Sora fallback)
+
+- Light/dark mode
+  - Keep `data-color-mode`/`html.light` style overrides for public cards/surfaces aligned with the silver frame language.