Eka UI Kit
Eka UI Kit is our thoughtfully crafted design system built to help teams design and ship faster — without compromising on consistency or quality.
​
Created with scalability in mind, Eka brings together a complete set of foundational styles, reusable components, and structured patterns that streamline workflows across products. Every element is built with precision, clarity, and real-world usability at its core.
Foundation
This design system is built on a scalable, token-driven architecture that separates foundational values from contextual component logic. By structuring Primitives and Semantic Tokens independently, it ensures flexibility, consistency, and long-term maintainability. Every component is powered by variables, enabling effortless rebranding, theming, and system-wide updates. Designed to scale with products, not just screens.
Consistency at scale
Unified design language across platforms
Faster execution
Ready-to-use components that reduce repetitive work
Scalable structure
Token-driven
system built for growth
Collaboration-ready
Clear documentation for designers and developers
Colour System
Our design system provides a wide variety of hues and shades divided into four unique color palettes: the Neutral, Brand, Accent, and Feedback colors.
Each palette is designed with a specific purpose and performs unique functions.
Typography
Eka’s product uses Montserrat & Lato fonts. The combination helps establish a clear visual hierarchy, guiding the reader's eye through the content.
Elevation
Elevation in a design system defines the visual depth of UI elements using shadows and layering to communicate hierarchy, interactivity, and focus. It ensures ensures visual consistency across components while reinforcing importance and interaction states without relying solely on color or size.
Iconography
Icons are visual symbols used to represent actions, statuses, or concepts quickly and intuitively within the interface. They enhance usability by reducing cognitive load and supporting text with clear visual cues.
Components
The Components library is the core of Eka UI Kit - a robust collection of thoughtfully structured, fully responsive, and reusable UI elements designed for real-world product needs.
​
Each component is built using a scalable architecture with clear variants, states, and properties, allowing teams to customize effortlessly while maintaining design consistency.
Variant-driven
Multiple sizes, states, and styles built into one flexible structure
Token-powered
Connected to semantic variables for effortless theming
Auto layout enabled
Built for responsiveness and adaptability
Developer-friendly
Structured naming and predictable behavior
Accordian
Accordions allows users to effortlessly expand and collapse sections of content, keeping the interface clutter-free and user focus sharp.
Alert
Alert displays a prominent message relevant to either the entire page or a specific area within the page.
Avatar
An avatar provides a thumb-nail sized image or icon that makes the user experience more personal and helps create a sense of identity.
Badge
Badges are small, versatile visual elements that provide contextual information or status updates directly on user interfaces.
Buttons
Buttons are fundamental interactive elements within user interfaces. They act as clear calls to action, triggering specific actions or transitions within your application.
Calendar
Calendar is a date-selection component that allows users to choose a specific date or date range in a structured and intuitive format.
Dropdown
Dropdown is a select control that reveals a list of options when triggered, allowing users to choose a single value from a collapsed menu.
Text Field
A text field is a user interface element that lets users input, edit, and view text. It's a core component in forms, dialogs, and various interfaces across apps and websites.
Select Controls
Select Controls are interactive input components that allow users to choose one or multiple options from a predefined list.
Tab
A tab is a clickable element that allows users to switch between different views or sections of content within a single container.