Sky’s visual language combines the mark, icon font, and Skylight typeface into a shared foundation for VK internal products.
VK Sky
Design system and component library for internal VK data/AI products.
The work connects a product mark, icons, variables, semantic roles, CSS classes, components, and interface typography into one foundation for internal products.
Status
Release
Role
Design Engineer
Domain
Component Library, Design System
Visual language
Mark
The Sky logo combines a technical object with a star silhouette.
The mechanical contour refers to the engineering nature of the library, while the star keeps the image tied to the Sky name.
Icons
Sky icons are designed as a font system.
The weight axis follows the Skylight typeface, and shared metrics keep pictograms aligned with text and controls in interface layouts.
The icon font uses ligatures: a text key maps to a pictogram when ligatures are enabled. This keeps icon insertion close to typography and makes the system easier to use in interface layouts.
Typeface
Skylight is a neo-grotesque for VK's internal products. Its main reference was Adrian Frutiger's Univers, with additional cues from the typography inside SkyLight, VK's business center.
The family spans weights from Light to Black and contains 861 glyphs with Extended Latin and Cyrillic support.
Taller lowercase proportions, restrained terminals, and interface metrics help text align with icons and sit consistently inside controls.
Styling architecture
The styling architecture describes how values move from primitives to themes, semantic roles, CSS classes, and component implementation.
Architecture
Styling is described through a four-layer model: primitive layer, themes, semantic roles, and CSS classes.
The primitive layer stores base values, themes translate them into light and dark contexts, semantic roles give interface meaning to color and spacing, and CSS classes connect the model to components.
Component library
The component library connects the visual system with interface patterns: controls, navigation, overlays, data display, states, props, variants, and theme behavior.
Component library
Sky is a styled component library on top of Radix.
Radix provides behavior and accessibility patterns; Sky adds themes, CSS classes, density, states, visual rules, props, and variants for data-heavy internal interfaces.
A complex component is described as a system of repeatable rules: range selection, focus, disabled values, active cells, hover states, and theme rendering.