OVERVIEW
ITALINK
intro
overview
figma
process
results
Italink is a hypothetical booking site for a travel service with service in and out of 3 or 4 cities. The focus of this project was primarily to create a cohesive design system. The project allowed me to explore Figma's Variables feature, as well as develop an extensive design system that allowed me to gain a deeper understanding of how design systems work and how to structurally create them.
WHAT IS ITALINK?
intro
overview
process
results
intro
overview
process
results
intro
overview
process
results
intro
overview
process
results
PROCESS
PROCESS
PROCESS
PROCESS
PROCESS
PROCESS
PROCESS
PROCESS
FINAL
FINAL
FINAL
FINAL
FINAL
FINAL
FINAL
FINAL
FINAL
FINAL
FINAL
FINAL
FINAL
INITIAL DESIGN
This project was divided into 4 sprints where we were to make as much progress as possible within a 2 week period, ending with a critique at the end. My early design pulled on a collage style showing the history and culture of Italy. The early iterations are shown here.
FINAL DESIGN
This final approach and prototype can be seen here. The collage style did not seem to be working, so I decided to shift the approach to pull homage to Italy's history through full images instead.
DESIGN TOKENS
Vivo includes design tokens for brand colors, typography, border radius, grids, and more—forming the foundation of the design system to support consistent branding, efficient design workflows, and smoother developer handoff.
DESIGN SYSTEM
OVERVIEW
The design system for Italink, Vivo, was made to understand the deep layers that are stored within a design system. The full system can be clicked through in the Figma file below.
TYPE AND COLOR
The Italink site used styles and variables to maintain design consistency, with styles managing typography and variables controlling color states and interactions.
ABOUT
PROJECTS
CONTACT
KAYLA KRURNOWSKI
ASSET LIBRARY
Assets
Selected Radio Button
Radio Button Disabled
-
1
+
open figma file
READ THE FULL ACCESSIBILITY GUIDE HERE
THE KEY TO ANY SUCCESSFUL DESIGN
CONTRAST
Certain colors from the color palette should never be combined in accordance to W3C’s WAI.
TYPE TREATMENT
The Italink site used styles and variables to maintain design consistency, with styles managing typography and variables controlling color states and interactions.
ACCESSIBILITY
FINAL DESIGN
ABOUT
PROJECTS
CONTACT
KAYLA KRURNOWSKI