Kyan.com

Built on Next.js with the Pages Router and TypeScript in strict mode, the site is structured around a token-driven design system: fluid clamp() typography, a 16-step spacing scale, semantic colour tokens and a data-theme attribute that cascades nine themes — including a bespoke palette for each case study. Content is split deliberately: Sanity (with GROQ) handles editorial content like blog posts and job listings, while static JSON drives the design-critical pages so the CMS surface stays small and editor-friendly. Around 68 single-responsibility components share a co-located file structure (component, styles, tests, stories) and lean on Radix UI for accessible primitives. A custom animation system pairs an IntersectionObserver hook with a SCSS mixin to deliver staggered scroll-triggered transitions — all gated behind prefers-reduced-motion. The whole thing is mobile-first via named breakpoints, gated by a just-run quality pipeline (typecheck, lint, tests, file-size budget) that runs locally and in CI.