ZenTara UI Colour System Overview

ZenTara UI organizes its color system into two essential layers: the foundational color system and the contextual product color system.

The foundational color system establishes the core color palettes — including the primary, neutral, and data visualization colors — that reflect ZenTara’s design philosophy and brand identity. The contextual product color system builds upon this foundation by defining product-specific tones and color applications tailored to the unique needs and functionalities of each product experience.

Color Model

Our design team uses the HSB (Hue, Saturation, Brightness) color model, which provides intuitive control over color adjustments and fosters clear communication among designers and developers. This model helps maintain consistency and clarity across the entire design process.

Foundational Color System

ZenTara’s foundational colors draw inspiration from natural harmony and technological precision, blending vibrant and muted tones to balance aesthetics, usability, and accessibility. The palette includes a thoughtfully crafted set of primary colors and an extensive neutral palette that supports readability and visual comfort across interfaces.

Base Color Palettes

The base palette consists of a comprehensive range of colors designed to address diverse UI needs — from buttons and alerts to backgrounds and typography. ZenTara offers a rich collection of color variants, derived systematically to provide flexibility without sacrificing cohesion.

Our proprietary palette generation tools allow designers to easily expand the palette by defining primary hues, with the system automatically producing harmonious derivatives to maintain design consistency.

Brand Colour

The brand color is one of the most intuitive visual elements, embodying product characteristics and communicating ideas clearly. When selecting the brand color within the basic palette, we recommend choosing a shade from the lighter end, typically around the sixth variant of the color depth scale, to ensure balanced visibility and vibrancy.

ZenTara’s brand color is inspired by a vibrant blue with the Hex value #007AFF. This color is used across key action points, operation statuses, important highlights, and graphic elements to reinforce brand recognition and user focus.

Functional Colour

Functional colors convey clear messages and statuses such as success, error, warning, reminders, and links. Selecting functional colors must align with users’ basic color understanding to maintain intuitive interactions.

We emphasize consistency across the product ecosystem by limiting customization of functional colors, ensuring users have a predictable and seamless cognitive experience.

Neutral Color Palette

Neutral colors primarily serve large portions of text interfaces, backgrounds, borders, and dividing lines. The neutral palette is thoughtfully designed to accommodate both light and dark themes while adhering to WCAG 2.0 accessibility standards.

Transparency plays a key role in ZenTara’s neutral colors, allowing flexible layering and smooth visual hierarchy throughout the UI.