> For the complete documentation index, see [llms.txt](https://docs.akinon.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.akinon.com/akinon-ui/ui-kit/design-system/globals.md).

# Globals

### <mark style="color:red;">Design System Globals</mark>

This guide covers the global design system values available in Akinon UI through CSS variables. These variables provide access to colors and core design tokens that you can use throughout your application to maintain design consistency.

#### CSS Variables Overview

Akinon UI provides two types of CSS variables:

1. **Color Variables**: `--color-{family}-{shade}` format for all color values
2. **Token Variables**: `--akinon-{name}` format for core design values like colors, typography, and spacing

All these variables are automatically injected into your application when you use the Akinon UI App Shell.&#x20;

### <mark style="color:red;">Best Practices</mark>

1. **Always use CSS variables** instead of hardcoded color values to ensure consistency
2. **Prefer token variables** for standard use cases (backgrounds, text, borders) as they're semantically meaningful
3. **Use color variables** when you need specific shades or state variations
4. **Use semantic color families** (green for success, red for error, etc.) to maintain meaning
5. **Test in dark mode** as the default theme uses dark ebonyClay backgrounds
6. **Don't modify theme variables** - use them as provided to maintain design consistency across Akinon UI
7. **Use `calc()` for font sizes** when using `--akinon-font-size`: `calc(var(--token-font-size) * 1px)` to ensure proper pixel values

### <mark style="color:red;">Next Steps</mark>

* Learn about Font & Typography to understand text styling
* Explore Iconography for using icons in your application
* Review Utility Classes for quick styling without custom CSS


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.akinon.com/akinon-ui/ui-kit/design-system/globals.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.