Theme

@ui-kit.ai uses a design token based theming system to provide a consistent look and feel across components. The theme is customizable, allowing you to adjust colors, typography, and other design elements to match your brand or personal preferences.

The the is implement in Tailwind using custom CSS variables. This enables powerful extra functionality, like the intent API.

Intent API

The intent API allows using color to communicate semantic meaning in the UI. All colors may be overridden using the intent API, though it is recommended to use this feature sparingly to preserve meaning.

Background color

The available background colors are an intentionally limited set of colors focusing on the following use cases:

• Backgrounds: Page backgrounds, and raised elements.
• Tints: Used primarily for communicating selection state within menus & lists.
• Accent: Used for emphasis, primarily on buttons and other interactive elements.

Text

The available text colors are also quite limited:

• Accent: Engineered to have a suitable contrast ratio against the accent background color.
• Light: Suitable for placeholders in form fields.
• Mid: Used for secondary text, such as descriptions and labels.
• Dark: Used for primary text, such as headings and body text.

Border

The available border colors are also quite limited:

• Light: Used for subtle borders, such as in form fields.
• Mid: Used for primary borders, such as in cards and panels.
• Dark: Used for strong borders, such as in modals and dialogs.