From c0455c974673593d968554d38e400f2254330ab5 Mon Sep 17 00:00:00 2001 From: OpenPets Dev Date: Sat, 20 Jun 2026 05:38:54 +0000 Subject: [PATCH] docs(website): add marketing design language summary for v2026-06-20 --- ...AROS_WEBSITE_DESIGN_LANGUAGE_2026-06-20.md | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 website/docs/references/FAMILIAROS_WEBSITE_DESIGN_LANGUAGE_2026-06-20.md diff --git a/website/docs/references/FAMILIAROS_WEBSITE_DESIGN_LANGUAGE_2026-06-20.md b/website/docs/references/FAMILIAROS_WEBSITE_DESIGN_LANGUAGE_2026-06-20.md new file mode 100644 index 00000000..35ecdb3f --- /dev/null +++ b/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.