Globals

Akinon UI's design system provides CSS custom properties (CSS variables) for all colors and design tokens. These variables made available globally while remaining simple to use.

Design System Globals

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.

Best Practices

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

Next Steps

• 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