Siliko Design System
This design system defines the visual and functional foundation for the Siliko digital experience. It has been created to ensure consistency across all interfaces, improve development efficiency, and maintain a cohesive brand expression across Shopify.
Siliko is a premium brand, and the interface reflects that through restraint, precision, and a focus on materiality. Every token, component, and layout decision has been considered in context — not just visually, but in how it behaves across different screens, states, and content types.
How to use this system
Each section of this documentation represents a different layer of the interface system.
You’ll find foundational elements such as colors and gradients, followed by typography, components, and page sections. These are designed to be used together — not in isolation — to build consistent, scalable interfaces.
The navigation in the main menu allows you to move between system categories, while each page includes an “On this page” index for quick access to specific sections.
Structure overview
- Colors – Core brand palette and semantic usage
- Gradients & Transparencies – Background treatments and layered visual effects
- Typography – Type scale, hierarchy, and usage rules
- Components – Reusable UI elements for interface consistency
- Sections – Page-level layout patterns and composition guidelines
Design principles
Siliko’s interface system is guided by a few core principles:
Restraint over abundance
Every element must earn its place. Visual noise is reduced in favor of clarity and intention.
Material depth
Surfaces, gradients, and textures are used to create a sense of physical presence, echoing the tactile nature of the product.
Consistency at scale
Components are designed to behave predictably across contexts, ensuring the system remains stable as it grows.
Clarity of hierarchy
Typography, spacing, and layout are used to guide attention, not compete for it.
Implementation notes
This system is designed to be implemented directly within a Shopify theme environment. All tokens and components are structured to support scalable development workflows and can be mapped to CSS variables, Liquid templates, and reusable theme sections.
Developers should treat this documentation as the source of truth for visual and UI decisions.