Theme

Zeta is meticulously crafted to align closely with our Figma designs. This means that the implementation of Zeta should reflect the visual and functional elements as precisely as they are represented in the design files. To achieve this high level of fidelity, all theme values within Zeta must correspond exactly to the tokens specified in the Figma designs. Tokens serve as standardized units or variables that represent key design attributes, ensuring consistency across the platform.

Currently, our design system incorporates tokens for several essential aspects:

• Color Tokens: These represent the color palette used throughout the design. Each color token corresponds to a specific color value, ensuring that all components use consistent colors as dictated by the design.

• Spacing Tokens: These define the space between elements. By using spacing tokens, we maintain uniformity in the layout, ensuring that margins, paddings, and gaps are consistent and aligned with the design specifications.

• Radius Tokens: These determine the curvature of elements, such as buttons and cards. By standardizing the corner radius values through tokens, we achieve a cohesive look and feel that matches the design precisely.

By adhering to these tokens, we ensure that Zeta not only looks like our Figma designs but also provides a seamless and consistent user experience.

Primitives

Primitive tokens are the foundational elements of design systems, representing basic, indivisible units like colors, typography, spacing, and sizing. These tokens define and manage the core attributes necessary for consistency and coherence across a design system. While essential for establishing a unified design language, they should not be used directly in end products. Instead, primitive tokens serve as the building blocks for semantic tokens, which are context-driven and convey specific design purposes. This approach allows designers and developers to collaboratively create and maintain a cohesive design language, streamlining the design and development process and ensuring efficient propagation of updates throughout the system.

In our codebase, we maintain two sets of primitive tokens: one for light mode and one for dark mode. These sets contain color swatches that are inversely configured to suit their respective themes. By toggling this page between light and dark modes, you can observe the reversal of these colors. It is important to note that these primitive values should never be used directly in the final implementation. When applied correctly, the design system should seamlessly generate both light and dark themes automatically, ensuring a consistent user experience across different viewing modes.

Example Primitive Swatch

Blue

A sample of our blue primitive color swatch, showcasing a gradient of values from 10 to 100.

Semantics

Semantic tokens are crucial elements in a design system, representing contextually meaningful values that convey the specific purpose or role of a design element, such as “surface-default”. Unlike primitive tokens, which define raw values like colors or sizes, semantic tokens provide clarity and context, ensuring consistent application across the product. By abstracting design decisions into semantic tokens, designers and developers can work together to create a more intuitive and adaptable design language. This approach not only enhances maintainability by allowing changes to propagate efficiently throughout the system but also ensures that the design remains coherent and scalable, accommodating evolving needs with ease.

In our design system, semantic tokens act as mappings to primitive tokens, ensuring that each semantic value automatically adopts the appropriate light or dark mode attributes. This approach allows for seamless theme transitions and maintains design consistency. Additionally, we have two sets of semantic tokens tailored for normal and high contrast modes, providing accessibility options that can be toggled just as easily as the light and dark mode primitives. This setup ensures that our design is not only visually coherent but also adaptable to various user preferences and needs, enhancing both usability and accessibility.

Example Semantic Colors

Main

A collection of our main semantic tokens, illustrating their application across various design elements for consistent visual identity.