How the Refari brand is applied to a marketing or landing page. The brand fundamentals (logo, colour, type) live on the main Refari page; this is the layer on top: the hero-and-nav pattern, component library, motion, and the accessibility + SEO baseline a page must pass before it ships.
Don't confuse the brand with the page. The brand fundamentals are universal. On top of them sit page-type design systems, and a marketing page is deliberately louder and more animated than a policy or document page. This page defines the marketing one.
The colours are the brand's; what's specific to marketing pages is where each one is allowed. Accents change by background.
Structure the page as alternating light bands (Mist / White) with one or two dark moments (the hero, a premium card, a stat strip). Teal and all the "magic" (glows, sparkles) live in the dark moments; the light bands stay calm and blue-accented.
Every Refari marketing page opens the same way: a near-opaque deep-navy sticky nav with a 2px teal underline (white logo, teal CTA), flowing straight into the navy→blue gradient hero with a teal eyebrow and a shimmering accent phrase.
Nav must be near-opaque (not translucent) so the hero doesn't bleed through as a grey haze. The underline is the brand's teal→cyan→blue or solid teal.
All included in the starter CSS, all seen live on the reference page.
Marketing pages are allowed to feel alive — but tastefully, and only in the dark moments. Every effect below must be disabled under prefers-reduced-motion (the starter does this for you).
Because our pages often sell the very things below, they must practise them. This is the ship gate.
Don't rebuild the rules from prose — start from the tokens. The starter CSS carries the palette, type scale, hero/nav, buttons, cards, marquee and all the motion (with reduced-motion handled).
The reference page (aivisibility.refari.co) is the canonical worked example of every rule on this page — copy patterns from its source.
