# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.