Project / 2025
Kynto
A website for an HR and payroll platform, with a dashboard preview and scroll animations.
- My role
- Design & development
- Tools
- React · TypeScript · Next.js · Tailwind CSS · Motion
- Year
- 2025
About the project
Kynto is a marketing website for an HR and payroll platform. The page introduces the product and its features, then shows a dashboard preview.
My work covered the Figma design and the responsive Next.js implementation. I used shared spacing and color values across the page, with scroll transitions and card interactions for the product presentation.
Design decisions
Translating the Figma layout
Figma frames informed the spacing and alignment of the CSS grid and flex layouts. Icons and logos use SVG, while the product previews use raster images.
Motion as the page scrolls
Sections change opacity and position as they enter the viewport. The page keeps normal browser scrolling, so visitors control how quickly they move through it.
Showing the dashboard
Images and CSS compose the dashboard preview. It shows the product interface without loading an embedded application.
Type that follows the layout
The hero uses container-based type sizing. Its text scales with the frame as the layout changes between mobile and desktop.