# Knowii Brand Style (Permanent) The design language of the DeveloPassion / Knowii web properties. Reference implementations: `store-website` (canonical) and `kb-stats/build.js` (stats.notes.dsebastien.net). Colors live in [[Knowii Brand Colors]]. ## Typography - **Font**: Noto Sans everywhere (fallbacks: Inter, Segoe UI, system-ui). JetBrains Mono only for code/timestamps. - **Headlines**: `font-extrabold`, large (text-4xl → text-6xl). One key word per headline gets the **gradient magenta treatment**: `linear-gradient(90deg, #ff1493, #e5007d, #a855f7)` with `background-clip: text` + soft pink glow (`drop-shadow(0 0 18px rgba(255,20,147,0.35))`). - **Body/muted**: white at 60–64% opacity on slate. ## Components - **Hero**: gradient wash `bg-gradient-to-br from-secondary/10 via-purple-500/10 to-background` over the slate base, plus small floating magenta particle dots (subtle float animation). - **Pill badge (eyebrow)**: `rounded-full`, `bg-secondary/10`, `border-secondary/30`, `px-4 py-1 text-sm font-semibold`. - **Hero stats**: bare (no boxes); big `text-4xl font-bold` numbers in playful brand colors (magenta `#ff1493`, green `#4ade80`, yellow `#fbbf24`, white), muted small labels below. Count-up animation on scroll. - **Cards**: `rounded-xl`, surface `#3f4957`, border `rgba(255,255,255,0.1)`, hover = slight lift + shadow (no colored border). - **Buttons**: primary = solid magenta `#e5007d`, `rounded-lg`, `font-bold`, soft magenta shadow. Secondary = solid subtle slate `rgba(255,255,255,0.1)`, white bold text, `rounded-lg`. Never outlined-pink secondaries. - **Tag chips**: slate pills `rgba(255,255,255,0.08)`, `rounded-lg`, `font-medium`, white text (counts muted). - **Section headings**: `font-extrabold` + short magenta underline bar (`w-12 h-1 rounded-full bg-secondary`). No decorative `#` prefixes. - **FAB**: pink circular back-to-top button, fixed bottom-right, appears after scrolling. - **Data panels**: charts and bar groups sit in darker "wells" (`#2b323c`, `rounded-xl`) inside cards so marks pass contrast. ## Motion - Reveal-on-scroll (fade + translateY), count-up numbers, gentle particle float. All gated behind `prefers-reduced-motion`. ## Voice on-page - Confident, human, first-person-adjacent ("Learning in public", "and growing daily"). CTAs are direct: "Get the Obsidian Starter Kit", "Join the Knowii Community". ## References ## Related - [[Knowii Brand Colors]] - [[Brand Assets]] - [[DeveloPassion]]