Slite

Slite's visual language feels like warm parchment under natural light — a cream-toned workspace where knowledge feels approachable rather than clinical. The dominant #f9efe4 background reads as aged paper without feeling retro, grounded by #3f434a ink-dark text that gives editorial weight to every line. The signature move is typographic contradiction: a serif-adjacent custom face (Garnett) at 64px for display, crossed out in black with 'goes to die' while 'thrives' renders in a hand-lettered cursive script in vivid blue — disruption-by-contrast rather than polish. Feature cards sit on near-white #fdfdfd against the warm cream ground, tagged with muted category badges in yellows, greens, and pinks that never compete with the overall softness. Pill buttons in near-black (#2d2f34) against cream create the sharpest contrast point on every screen, anchoring calls to action without resorting to saturated color. Use #f9efe4 as the default page background — never white or cold gray; the warmth is the entire atmospheric identity Apply border-radius 42-50px to all primary and secondary CTA buttons — the pill shape is non-negotiable brand geometry Use Garnett weight 700 for display sizes (36-64px) and weight 500 for section headings (24-32px); never use UniversalSans for headings Render category badges with border-radius 50px, padding 4px 12px, and the specific color pairs: Ochre text on Buttercup (#fbf4d8), Mauve text on Blossom (#fae9f4), Sage text on near-white — never swap pairs Keep feature cards at border-radius 12px with the three-layer shadow (rgba(0,0,0,0.01/0.05/0.10)) — this whisper-shadow is the only elevation used Use #2d2f34 filled pill buttons as the single primary CTA per screen; every other action should be outlined or ghost weight Restrict chromatic color (Blueprint #2e77e5) to interactive text links and decorative heading accents only — never for backgrounds or borders in feature UI Don't use pure white (#ffffff) as a page background — it reads cold against Slite's warm typographic palette; use #fdfdfd or #fdf9f4 for card surfaces Don't introduce saturated color backgrounds for section bands — the warm cream is the only background color; category badges carry all color variety Don't use font weights below 400 or above 700, and don't apply Garnett at sizes below 12px where its editorial character is lost Don't add shadows beyond the established three-layer formula — heavier shadows break the lightweight elevation philosophy Don't use rectangular buttons (border-radius under 12px) for primary actions — all CTAs must be pill or near-pill shaped Don't display third-party logos in their brand colors in trust bars — convert all to #3f434a for visual unity Don't place category badges in any color combination outside the established four variants (Security/Customization/Compliance/Control) — ad-hoc badge colors fracture the muted palette