From tokens to Figma
One token file sets the colors, type, spacing and motion.The same tokens became Figma variables and text styles, and later the site’s styles.
WEB · 2026 · PORTFOLIO
Ruy Gois portfolio
My own portfolio, designed and built from scratch.A visual identity became a design system, every page was drawn in Figma, and then built as a fast static site.
- CLIENT
- Personal project
- ROLE
- Designer and front-end developer
- YEAR
- 2026
- DELIVERABLES
- Design system, Figma screens, website
DESIGN SYSTEM
FIGMA
Every page drawn first
Home, case pages, the Lab and the 404 were designed for desktop and mobile in Figma, and approved before any code.
WEBSITE
Built to be fast
A static site with native scroll, its own fonts and images sized for every screen.It reads well on a phone first.
DETAILS
Small things that move
The header picks its color from whatever passes behind it.The menu slides the page away.Strips that scroll sideways get arrows, so nobody misses them.