styling-tenzir-ui

# Styling Tenzir UI

This skill provides Tenzir's brand and style guidelines for frontend development.

## Contents

- [Design System Overview](#design-system-overview)
- [Quick Reference](#quick-reference)
- [When to Load References](#when-to-load-references)

## Design System Overview

Tenzir's design system provides consistent styling across all Tenzir products.

When implementing frontend components, always reference the appropriate section:

| Aspect         | Reference                                      | Description                                    |
| -------------- | ---------------------------------------------- | ---------------------------------------------- |
| Typography     | [typography.md](./typography.md)               | Font families, sizes, weights, line heights    |
| Colors         | [colors.md](./colors.md)                       | Brand colors, semantic colors, neutrals        |
| Spacing        | [spacing.md](./spacing.md)                     | Padding and margin scale                       |
| Shadows        | [shadows.md](./shadows.md)                     | Elevation and shadow styles                    |
| Border Radius  | [border-radius.md](./border-radius.md)         | Corner radius tokens (always 5px)              |
| Buttons        | [buttons.md](./buttons.md)                     | All button styles (standard, delete, floating) |
| Dropdown       | [dropdown.md](./dropdown.md)                   | Dropdown trigger with chevron                  |
| Hyperlinks     | [hyperlinks.md](./hyperlinks.md)               | Link styling with underline                    |
| Segmented Ctrl | [segmented-control.md](./segmented-control.md) | Toggle between mutually exclusive options      |
| Input Field    | [input-field.md](./input-field.md)             | Text input with title and states               |
| Search Input   | [search-input.md](./search-input.md)           | Search field with icon and clear               |
| Checkbox       | [checkbox