# Kaizen UI Foundations Components

Kaizen UI Foundations is a clean and professional design system for NVIDIA based on NVIDIA Brand.

REQUIRES: @kui/foundations-react@1.16.0 (or foundations-react-core) - this documentation based on this version.

- Note that previously we used epoch versioning, so 0.x00 is a breaking change. For example 0.400.0 to 0.500.0, and 0.600.0 to 1.0 is a breaking change. For minor/patch version changes, we should always update to latest since there are no breaking changes and we will pull in bug fixes and new features.

OPTIONAL: @kui/foundations-tailwind-plugin@1.16.0 - the tailwind plugin is optional, but makes it easier to use the design system with Tailwind CSS

## General Guidelines

- Use KUI components over divs/custom elements
- KUI provides semantic CSS variables and Tailwind utilities for the design system - use these instead of standard Tailwind colors for brand consistency and automatic light/dark theme support
- No emojis
- Components have default padding - don't add extra (e.g., Card, avoid p-6)
- When using the tailwind plugin, variables are available as utilities: `border-base` not `border-(--border-color-base)`, `bg-surface-base` not `bg-[--background-color-surface-base]`, `text-primary` not `text-[--text-color-primary]`
- When using the AppBar component, do not add a logo to the slotLeft property, it is already included by default.
- Stack/Flex: use `gap` prop with number values (gap="1,2,3,4" multiplies by 4 for spacing). Require multiple children, not single child
- Center text in Stack: use `justify` prop or className on Stack, not wrapper div
- Text component: use `kind` prop ("display/xl", "title/lg", "body/regular/sm"), not className to use predefined typography styles

## Layout

- AppBar at top of full page layouts (unless design omits)
- VerticalNav left side, below AppBar
- Account for AppBar height when setting vertical heights

## Available Components

This is a list of all exported components. Note that this is specifically for the base components, most components expose their sub-components for advanced use cases that are not listed here but are available in their specific documentation.

- [Accordion](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Accordion.txt)
  - A vertically stacked group of sections the user can expand and collapse to show or hide their contents.
- [Anchor](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Anchor.txt)
  - Interactive text that navigates the user to another page, section, or resource.
  - sometimes known as Link
- [AnimatedChevron](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/AnimatedChevron.txt)
  - A chevron icon that animates between two orientations to indicate the open or closed state of a disclosure. Use inside expand and collapse triggers when users need a visual cue for the current state.
- [AppBar](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/AppBar.txt)
  - The top-level masthead for an application, anchoring branding, primary navigation, and global actions. Every application has exactly one.
  - sometimes known as Masthead, Navbar, Navigation Bar
- [Avatar](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Avatar.txt)
  - A small visual identifier for a user, account, or entity. Prioritizes an image when available and falls back to initials or an icon otherwise.
- [Badge](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Badge.txt)
  - A small color-coded label that displays status, category, or metadata at a glance. Badges are non-interactive and convey information rather than trigger actions.
- [Banner](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Banner.txt)
  - A prominent, full-width inline message embedded in the page layout for system-wide announcements, page-level alerts, or important context.
- [Block](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Block.txt)
  - A general-purpose block-level container for arbitrary content. Use it as a low-level layout primitive when consistent spacing and overflow behavior are needed without writing custom CSS.
- [Breadcrumbs](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Breadcrumbs.txt)
  - A navigation trail that shows the user's location within the app hierarchy and links back to parent pages. Use concise labels for each level.
- [Button](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Button.txt)
  - A clickable element that triggers an action. Use specific verb + noun labels instead of vague text.
- [ButtonGroup](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/ButtonGroup.txt)
  - A row of related buttons presented as a single set of actions with consistent styling.
- [Card](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Card.txt)
  - A container that groups content, actions, and optional media about a single subject. Cards are fluid and grow to fill their container.
- [Carousel](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Carousel.txt)
  - A horizontal container that cycles through a series of content items.
- [Checkbox](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Checkbox.txt)
  - A form control that lets users toggle a single option on or off. Supports a mixed state for representing partially-selected groups of related options.
- [CodeSnippet](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/CodeSnippet.txt)
  - Displays source code with syntax highlighting and a copy button. Pick `kind="inline"` for code samples within prose and `kind="block"` for standalone, multi-line samples.
- [Collapsible](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Collapsible.txt)
  - An unstyled disclosure that toggles a single block of content between expanded and collapsed states. Use to hide secondary detail behind a clickable summary so users can reveal more on demand.
- [Combobox](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Combobox.txt)
  - A text input paired with a filterable listbox for selecting one or more values from a list. Use when users need to search through a large set of options.
- [DatePicker](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/DatePicker.txt)
  - An input field paired with a calendar popup for selecting a single date or a date range. Use when users need to enter or browse to a specific date.
- [Divider](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Divider.txt)
  - A horizontal or vertical line that visually separates groups of content. Use to create breaks between sections, list items, or toolbar regions where a heading or whitespace alone would be too subtle.
- [Dropdown](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Dropdown.txt)
  - A button that opens a menu of actions, links, or selectable options. Use for contextual actions, filters, and overflow menus.
- [Flex](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Flex.txt)
  - A layout primitive that arranges its children with CSS flexbox using design-token spacing.
- [FormField](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/FormField.txt)
  - Groups a label, input, and helper text to keep form elements consistent and accessible.
  - sometimes known as Form Group, Fieldset
- [Grid](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Grid.txt)
  - A two-dimensional layout primitive that arranges children into rows and columns. Use for dashboards, card listings, and any layout that needs both horizontal and vertical alignment.
- [Group](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Group.txt)
  - A container that joins related items into a single visual unit. Reach for it when adjacent elements should read as one cohesive cluster, such as chips, badges, or button rows.
- [Halo](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Halo.txt)
  - A decorative rotating gradient ring that wraps a single element to draw attention to it. Halo is presentational only — it adds no semantics, so the element inside keeps its own role, label, and behavior.
- [Hero](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Hero.txt)
  - A large page banner that combines headline messaging and calls to action with imagery.
- [HorizontalNav](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/HorizontalNav.txt)
  - A horizontal navigation bar that organizes links to top-level sections of an application or site.
- [Inline](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Inline.txt)
  - An inline layout primitive that renders a `<span>` with the system's spacing tokens exposed as props.
- [InputShell](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/InputShell.txt)
  - A low-level wrapper that styles any element as a KUI input. Reach for the higher-level inputs first; use this only when composing a custom control.
- [Kbd](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Kbd.txt)
  - A visual representation of a keyboard key or shortcut. Place it beside the control or instruction it describes.
- [Label](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Label.txt)
  - A text label for a form control. Prefer FormField for end-user forms; this primitive is intended for composing custom field layouts.
- [Legend](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Legend.txt)
  - A key mapping colors to the data series they represent.
- [List](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/List.txt)
  - Groups related items into a sequence, supporting numbered, bulleted, and icon-marked formats.
- [Menu](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Menu.txt)
  - A list of actions, toggles, or selections. Use when the list should always be visible (sidebars, settings panels).
- [Meter](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Meter.txt)
  - A bar showing how much of a bounded resource is in use.
- [Modal](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Modal.txt)
  - A `<dialog>` that interrupts the page to capture the user's attention until they act on or dismiss its content. Use for confirmations, focused tasks, and information the user must acknowledge before continuing.
- [Notification](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Notification.txt)
  - A non-blocking overlay message that delivers detailed feedback in the user's peripheral vision, optionally with actions. Reach for it when the message needs more detail than a Toast or an action the user should take.
- [NumberInput](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/NumberInput.txt)
  - A TextInput preset to `type="number"` for numeric-only entry.
- [OtpInput](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/OtpInput.txt)
  - A segmented field for entering a one-time passcode or PIN. One real input backs every cell, so browser autofill, paste, and native validation all keep working.
- [PageHeader](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/PageHeader.txt)
  - Top-of-page banner that establishes context with a title, breadcrumbs, and page-level actions.
- [Pagination](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Pagination.txt)
  - Navigation control that splits a long list of items across multiple pages. Pair with tables and grids that exceed a single page of content.
- [Panel](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Panel.txt)
  - Container that groups related content and actions with a background, border, and consistent padding. Use for general-purpose surfaces on dashboards and detail pages.
- [Popover](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Popover.txt)
  - A floating panel that displays rich content, options, or actions anchored to a trigger.
- [PortalProvider](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/PortalProvider.txt)
  - Sets default portal behavior for descendant components that support portaling. Wrap the app (or a region) to make overlays portal to a shared target without passing `portal`/`portalContainer` to each one; descendants still override with their own props.
- [ProgressBar](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/ProgressBar.txt)
  - Visual indicator for long-running operations like uploads, downloads, and other loading states.
- [RadioGroup](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/RadioGroup.txt)
  - A set of mutually exclusive options where the user picks exactly one. Use when the available options can comfortably fit on screen at once.
- [RangeSlider](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/RangeSlider.txt)
  - A two-thumb slider for selecting a minimum and maximum value within a range. Use for filtering by price, time window, or any min/max selection.
  - sometimes known as Range Input, Input Range
- [SegmentedControl](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/SegmentedControl.txt)
  - A horizontal group of mutually exclusive options where selection takes effect immediately. Use for switching between alternate views or modes of the same content.
- [SegmentedMeter](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/SegmentedMeter.txt)
  - A bar showing how a bounded quantity divides across categories.
- [Select](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Select.txt)
  - An input that lets the user pick one or more values from a predefined list.
- [Severity](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Severity.txt)
  - A ranked severity level shown as a fixed icon and label pairing. Use it to communicate urgency, risk, or priority on issues, alerts, and incidents.
- [SidePanel](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/SidePanel.txt)
  - A `<dialog>` panel that slides in from the left or right edge to show supplementary content without leaving the current view.
- [Skeleton](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Skeleton.txt)
  - A placeholder block that mimics the shape of content while it loads. Match each skeleton's size and shape to the real content as closely as possible to keep layout shift minimal.
- [Slider](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Slider.txt)
  - A single-value range input rendered along a bar. Use for continuous settings like volume, brightness, or threshold values where the relative position carries meaning.
  - sometimes known as Range Input, Input Range
- [Spinner](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Spinner.txt)
  - An indicator for short waits with unknown progress.
- [Stack](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Stack.txt)
  - A flex container that arranges its children in a column by default, with an optional divider between items.
- [StatusIndicator](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/StatusIndicator.txt)
  - A small colored dot that signals a new change or short-lived status.
- [StatusMessage](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/StatusMessage.txt)
  - A full-area centered message displayed when there is no content to show — empty states, error pages, permission denied, not found. Replaces the content area rather than overlaying it.
- [Stepper](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Stepper.txt)
  - A progress tracker for moving through a fixed, ordered set of steps.
- [Switch](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Switch.txt)
  - A two-state toggle for binary settings whose change takes effect immediately. Commonly used for preferences and feature toggles.
  - sometimes known as Toggle, ToggleSwitch
- [Table](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Table.txt)
  - Organizes sets of structured data into columns and rows so users can scan, compare, and analyze information.
- [Tabs](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Tabs.txt)
  - Organizes related content into sections that share the same context and switches between them in place. Use for managing settings, comparing data, or any group of mutually exclusive views the user moves between without leaving the page.
- [Tag](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Tag.txt)
  - A small label that categorizes or groups an item with text and optional icons. Use for classification and filtering; reach for Badge to communicate status.
- [Text](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Text.txt)
  - Renders text with the design system's typography tokens applied.
- [TextArea](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/TextArea.txt)
  - A multi-line text input for free-form responses such as descriptions, comments, or notes.
- [TextInput](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/TextInput.txt)
  - A single-line input for text, numbers, or special symbols. Commonly used in forms; switch to TextArea when the response is likely to wrap.
- [ThemeProvider](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/ThemeProvider.txt)
  - Establishes a theme context for descendant components, controlling color theme and density. Nest providers to scope different settings to specific parts of the app.
- [TimeInput](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/TimeInput.txt)
  - A TextInput preset to `type="time"` for time-of-day entry, including the built-in native time-picker button.
- [Toast](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Toast.txt)
  - A small, temporary overlay that gives the user non-critical feedback after an action. Reach for it when the message is informational and can be missed without consequence.
- [Toaster](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Toaster.txt)
  - Renders and manages the app's toast and notification stacks. Render one near the app root, then call `toast()` or `notification()` from anywhere.
- [Tooltip](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Tooltip.txt)
  - Reveals a short, supplemental label when the user hovers or focuses an element. Use to clarify icon-only controls or surface non-essential context.
- [TreeNav](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/TreeNav.txt)
  - A hierarchical navigation list that lets users move through links at different levels, similar to a directory tree
- [Upload](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/Upload.txt)
  - A file picker with drag-and-drop support that renders previews and basic management controls for the selected files.
- [VerticalNav](https://webassets.nvidia.com/kaizen-ui-foundations/docs/components/VerticalNav.txt)
  - A vertical navigation menu of single links and nested link groups, typically rendered in a sidebar. Use as section-level navigation paired with a HorizontalNav for app-wide chrome, or as the sole navigation for apps with deep hierarchies and few global destinations.

# Icons

Decision rules for KUI iconography: whether to use an icon, which variant, and which icons are safe icon-only.

## Setup

We use [NVIDIA Icons](https://github.com/NVIDIA/icons#documentation) - specifically the React package. Refer to that packages README via the link or node_modules for setup documentation if you're configuring it for the first time or debugging.

Icons come from `@nvidia/react-gui-icons/icons` as named PascalCase exports.

Names that would start with a digit or shadow a JS global are prefixed `Icon` — `IconError`, `IconImage`, `IconDocument`, etc.

```tsx
import { ChevronDown } from "@nvidia/react-gui-icons/icons";

<ChevronDown />                  // line/outline (default)
<ChevronDown variant="fill" />   // solid; prefer at smaller sizes
```

Icons inherit `currentColor`, so set the color on an ancestor rather than on the icon. `size` is a CSS length string (`size="24px"`), defaulting to `1em`.

You can see a list of all available icons [here](https://github.com/NVIDIA/icons/tree/main/packages/react-gui-icons/src/icons) or check in node_modules if it's installed.

## Decision 1: Use an icon at all?

Icons are not free — they add visual density, scanning cost, and inconsistency risk if applied unevenly.

| Pattern          | Use when                                                                                                                                                                                             | Examples                                                                                     |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| **Label only**   | The action is a verb-clear contextual choice. The label already communicates intent; an icon would be decorative or ambiguous. Default for review actions, form submits, and most secondary buttons. | Approve, Decline, Save, Cancel, Edit, Submit, Delete (use color, not icon, to signal danger) |
| **Icon + label** | The action belongs to a recognizable system class (navigation, search, refresh, add, export, sort, filter, upload). The icon clarifies the action's _category_, not its _target_.                    | Refresh, + Add cluster, Search, Export, Filter, Sort                                         |
| **Icon only**    | Tight UI surfaces where the icon is universally understood.                                                                                                                                          | Close, kebab, expand/collapse, table-row delete in dense rows                                |

**Default to "label only" when uncertain.** Ask whether the icon is doing real work, not decorating. Adding icons indiscriminately makes UI feel busy without improving comprehension; removing icons that genuinely aid recognition (refresh, search, add) makes scanning slower.

---

## Decision 2: Which icon?

Cheatsheet of most common scenarios:

| Action                    | Icon                                                |
| ------------------------- | --------------------------------------------------- |
| Create / Add              | `Add` (plus sign)                                   |
| Edit                      | `Pencil`                                            |
| Delete / Remove           | `Trash`/`TrashDelete`                               |
| Save / Download           | `Download`                                          |
| Copy / Duplicate          | `CopyGeneric`/`CopyDoc`(for document specifically)  |
| Close / Dismiss           | `Close`                                             |
| Search                    | `MagnifyingGlass`                                   |
| External link             | `OpenExternal`                                      |
| Filter                    | `Filter`                                            |
| Sort                      | `Sort`(no arrow), `SortAscending`, `SortDescending` |
| Refresh / Reload          | `Refresh`                                           |
| Settings                  | `Cog`                                               |
| More actions (kebab)      | `MoreVert`                                          |
| More actions (horizontal) | `MoreHoriz`                                         |

**Toolbars and PageHeader actions:** when a button needs an icon render it leading

---

## Decision 3: Solid vs. outline variant

Icons accept a `variant` prop defaulting to `variant="line"` (outline). `variant="fill"` is solid.

Use solid icons for navigation, small icon sizes for improved readability, or primary/prominent actions - this provides stronger visual weight and easier to recognize at smaller sizes.

---

## Icon-only safe set

These icons are universally recognized enough to omit a visible text label. **All icon-only usage must be coupled with a11y considerations such as a `aria-label` on the wrapping element.**

| Icon | Action |
|---|---|
| `Close` | Dismiss / close |
| `Pencil` | Edit |
| `Trash` | Delete |
| `Cog` | Settings |
| `MoreVert` / `MoreHoriz` | Overflow menu |
| `MagnifyingGlass` | Search |
| `ChevronDown` / `ChevronUp` | Expand / collapse |
| `ChevronLeft` / `ChevronRight` | Previous / next |
| `Add` | Create / add |

Every other icon should be paired with a text label.

---

## Gotchas

- **Consistency within a group is non-negotiable.** Within a single toolbar, button group, badge row, or menu, every item either has an icon or none does. Mixing is the most common iconography mistake and reads as visual sloppiness.
- **Don't mix solid and outline within the same visual group** (toolbar, menu, tab set, nav). Mixed variants imply a semantic difference where none exists.
- **Icon-only buttons must set `aria-label`.** Screen readers otherwise announce "button" with no context.
- **Don't force an icon when no recognizable metaphor exists.** A wrong metaphor teaches users an incorrect mental model — worse than no icon. Use a text-only label.
- **Don't add an icon to every badge, tag, or table cell.** Icons in every cell become visual noise and lose the emphasis that selective use provides.
- **Prefer plain `Check` over `CheckCircle` in dense contexts** (table cells, small badges). The enclosing circle adds visual weight and reduces readability at small sizes.

# CSS Variables

CSS variables automatically included via @kui/foundations-tailwind-plugin or by importing @kui/foundations-react/base.css.

Always use these variables for custom styling - via Tailwind classes or direct CSS variable references.

## Themed Properties

Variables that automatically change per color theme (light/dark) or density theme (standard/compact/spacious).

### NVIDIA Color Theme

Semantic color theme variables. Prefer using these CSS variables for automatically adapting to the current theme.

```css
--background-color-accent-blue: var(--color-blue-050); /* dark: var(--color-blue-900) */
--background-color-accent-blue-hover: var(--color-blue-050); /* dark: var(--color-blue-900) */
--background-color-accent-blue-selected: var(--color-blue-200); /* dark: var(--color-blue-800) */
--background-color-accent-blue-strong: var(--color-blue-700); /* dark: var(--color-blue-900) */
--background-color-accent-blue-subtle: var(--color-blue-050); /* dark: var(--color-blue-900) */
--background-color-accent-blue-subtle-hover: var(--color-blue-200); /* dark: var(--color-blue-800) */
--background-color-accent-blue-subtle-selected: var(--color-blue-600); /* dark: var(--color-blue-500) */
--background-color-accent-gray: var(--color-gray-200); /* dark: var(--color-gray-600) */
--background-color-accent-gray-hover: var(--color-gray-300); /* dark: var(--color-gray-1000) */
--background-color-accent-gray-selected: var(--color-gray-700); /* dark: var(--color-gray-200) */
--background-color-accent-gray-strong: var(--color-gray-700); /* dark: same */
--background-color-accent-gray-subtle: var(--color-gray-100); /* dark: var(--color-gray-700) */
--background-color-accent-gray-subtle-hover: var(--color-gray-300); /* dark: var(--color-gray-200) */
--background-color-accent-gray-subtle-selected: var(--color-gray-700); /* dark: var(--color-gray-600) */
--background-color-accent-green: var(--color-green-025); /* dark: var(--color-green-900) */
--background-color-accent-green-hover: var(--color-green-025); /* dark: var(--color-green-900) */
--background-color-accent-green-selected: var(--color-green-050); /* dark: var(--color-green-800) */
--background-color-accent-green-strong: var(--color-green-800); /* dark: var(--color-green-900) */
--background-color-accent-green-subtle: var(--color-green-100); /* dark: var(--color-green-900) */
--background-color-accent-green-subtle-hover: var(--color-green-200); /* dark: var(--color-green-800) */
--background-color-accent-green-subtle-selected: var(--color-green-600); /* dark: same */
--background-color-accent-purple: var(--color-purple-200); /* dark: var(--color-purple-900) */
--background-color-accent-purple-hover: var(--color-purple-050); /* dark: var(--color-purple-900) */
--background-color-accent-purple-selected: var(--color-purple-100); /* dark: var(--color-purple-800) */
--background-color-accent-purple-strong: var(--color-purple-700); /* dark: var(--color-purple-900) */
--background-color-accent-purple-subtle: var(--color-purple-050); /* dark: var(--color-purple-900) */
--background-color-accent-purple-subtle-hover: var(--color-purple-100); /* dark: var(--color-purple-800) */
--background-color-accent-purple-subtle-selected: var(--color-purple-600); /* dark: var(--color-purple-700) */
--background-color-accent-red: var(--color-red-100); /* dark: var(--color-red-900) */
--background-color-accent-red-hover: var(--color-red-050); /* dark: var(--color-red-900) */
--background-color-accent-red-selected: var(--color-red-100); /* dark: var(--color-red-800) */
--background-color-accent-red-strong: var(--color-red-700); /* dark: var(--color-red-900) */
--background-color-accent-red-subtle: var(--color-red-100); /* dark: var(--color-red-900) */
--background-color-accent-red-subtle-hover: var(--color-red-200); /* dark: var(--color-red-800) */
--background-color-accent-red-subtle-selected: var(--color-red-600); /* dark: var(--color-red-700) */
--background-color-accent-teal: var(--color-teal-100); /* dark: var(--color-teal-900) */
--background-color-accent-teal-hover: var(--color-teal-050); /* dark: var(--color-teal-900) */
--background-color-accent-teal-selected: var(--color-teal-100); /* dark: var(--color-teal-800) */
--background-color-accent-teal-strong: var(--color-teal-800); /* dark: var(--color-teal-900) */
--background-color-accent-teal-subtle: var(--color-teal-100); /* dark: var(--color-teal-900) */
--background-color-accent-teal-subtle-hover: var(--color-teal-200); /* dark: var(--color-teal-800) */
--background-color-accent-teal-subtle-selected: var(--color-teal-600); /* dark: var(--color-teal-500) */
--background-color-accent-yellow: var(--color-yellow-100); /* dark: var(--color-yellow-900) */
--background-color-accent-yellow-hover: var(--color-yellow-050); /* dark: var(--color-yellow-900) */
--background-color-accent-yellow-selected: var(--color-yellow-100); /* dark: var(--color-yellow-800) */
--background-color-accent-yellow-strong: var(--color-yellow-700); /* dark: var(--color-yellow-900) */
--background-color-accent-yellow-subtle: var(--color-yellow-100); /* dark: var(--color-yellow-900) */
--background-color-accent-yellow-subtle-hover: var(--color-yellow-200); /* dark: var(--color-yellow-800) */
--background-color-accent-yellow-subtle-selected: var(--color-yellow-600); /* dark: same */
--background-color-background-contrast: var(--color-gray-900); /* dark: var(--color-gray-000) */
--background-color-background-default: var(--color-gray-000); /* dark: var(--color-gray-950) */
--background-color-background-emphasis: var(--color-gray-050); /* dark: var(--color-gray-700) */
--background-color-background-highlight: var(--color-gray-100); /* dark: var(--color-gray-600) */
--background-color-background-subtle: var(--color-gray-025); /* dark: var(--color-gray-800) */
--background-color-component-skeleton: var(--color-gray-100); /* dark: var(--color-gray-800) */
--background-color-component-skeleton-subtle: var(--color-gray-200); /* dark: var(--color-gray-900) */
--background-color-component-tooltip: var(--color-gray-800); /* dark: same */
--background-color-component-track: var(--color-translucent-black-100); /* dark: var(--color-translucent-white-200) */
--background-color-component-track-inverse: var(--color-translucent-black-100); /* dark: var(--color-translucent-black-400) */
--background-color-feedback-danger: var(--color-red-300); /* dark: var(--color-red-900) */
--background-color-feedback-danger-hover: var(--color-red-600); /* dark: same */
--background-color-feedback-danger-pressed: var(--color-red-700); /* dark: same */
--background-color-feedback-danger-strong: var(--color-red-500); /* dark: same */
--background-color-feedback-danger-subtle-hover: var(--color-red-100); /* dark: var(--color-red-900) */
--background-color-feedback-danger-subtle-pressed: var(--color-red-200); /* dark: var(--color-red-800) */
--background-color-feedback-info: var(--color-blue-050); /* dark: var(--color-blue-950) */
--background-color-feedback-success: var(--color-green-025); /* dark: var(--color-green-950) */
--background-color-feedback-warning: var(--color-yellow-100); /* dark: var(--color-yellow-950) */
--background-color-interaction-base: var(--color-gray-000); /* dark: var(--color-translucent-black-600) */
--background-color-interaction-disabled: var(--color-translucent-black-050); /* dark: var(--color-translucent-white-100) */
--background-color-interaction-disabled-checked: var(--color-translucent-black-400); /* dark: var(--color-translucent-white-500) */
--background-color-interaction-hover: var(--color-translucent-black-050); /* dark: var(--color-translucent-white-100) */
--background-color-interaction-inverse: var(--color-gray-900); /* dark: var(--color-gray-000) */
--background-color-interaction-inverse-hover: var(--color-gray-950); /* dark: var(--color-gray-100) */
--background-color-interaction-inverse-pressed: var(--color-gray-975); /* dark: var(--color-gray-200) */
--background-color-interaction-pressed: var(--color-translucent-black-100); /* dark: var(--color-translucent-white-200) */
--background-color-interaction-primary-base: var(--color-green-300); /* dark: same */
--background-color-interaction-primary-hover: var(--color-green-400); /* dark: same */
--background-color-interaction-primary-selected: var(--color-green-500); /* dark: same */
--background-color-interaction-selected: var(--color-gray-000); /* dark: var(--color-gray-1000) */
--background-color-surface-base: var(--color-gray-000); /* dark: var(--color-gray-1000) */
--background-color-surface-blanket: var(--color-translucent-black-700); /* dark: same */
--background-color-surface-glass: var(--color-translucent-white-800); /* dark: var(--color-translucent-black-600) */
--background-color-surface-navigation: var(--color-gray-000); /* dark: var(--color-gray-1000) */
--background-color-surface-overlay: var(--color-gray-000); /* dark: var(--color-gray-900) */
--background-color-surface-raised: var(--color-gray-000); /* dark: var(--color-gray-950) */
--background-color-surface-sunken: var(--color-gray-025); /* dark: var(--color-gray-975) */
--border-color-accent-black: var(--color-gray-1000); /* dark: same */
--border-color-accent-blue: var(--color-blue-600); /* dark: var(--color-blue-300) */
--border-color-accent-gray: var(--color-gray-700); /* dark: var(--color-gray-300) */
--border-color-accent-green: var(--color-green-700); /* dark: var(--color-green-300) */
--border-color-accent-purple: var(--color-purple-600); /* dark: var(--color-purple-300) */
--border-color-accent-red: var(--color-red-600); /* dark: var(--color-red-300) */
--border-color-accent-teal: var(--color-teal-600); /* dark: var(--color-teal-300) */
--border-color-accent-white: var(--color-gray-000); /* dark: same */
--border-color-accent-yellow: var(--color-yellow-600); /* dark: var(--color-yellow-300) */
--border-color-base: var(--color-translucent-black-200); /* dark: var(--color-translucent-white-200) */
--border-color-brand: var(--color-brand); /* dark: same */
--border-color-chart: var(--color-gray-200); /* dark: var(--color-gray-800) */
--border-color-component-tooltip: var(--color-gray-600); /* dark: same */
--border-color-disabled: var(--color-translucent-black-400); /* dark: var(--color-translucent-white-300) */
--border-color-feedback-danger: var(--color-red-500); /* dark: same */
--border-color-feedback-danger-hover: var(--color-red-600); /* dark: same */
--border-color-feedback-danger-strong: var(--color-red-700); /* dark: same */
--border-color-feedback-danger-subtle: var(--color-red-500); /* dark: var(--color-red-300) */
--border-color-feedback-info: var(--color-blue-400); /* dark: same */
--border-color-feedback-success: var(--color-green-400); /* dark: same */
--border-color-feedback-warning: var(--color-yellow-300); /* dark: var(--color-yellow-200) */
--border-color-interaction-base: var(--color-translucent-black-300); /* dark: var(--color-translucent-white-200) */
--border-color-interaction-disabled: var(--color-translucent-black-100); /* dark: var(--color-translucent-white-100) */
--border-color-interaction-hover: var(--color-translucent-black-900); /* dark: var(--color-translucent-white-400) */
--border-color-interaction-inverse: var(--color-gray-900); /* dark: var(--color-gray-000) */
--border-color-interaction-inverse-hover: var(--color-gray-950); /* dark: var(--color-gray-100) */
--border-color-interaction-inverse-pressed: var(--color-gray-975); /* dark: var(--color-gray-200) */
--border-color-interaction-pressed: var(--color-translucent-black-900); /* dark: var(--color-translucent-white-400) */
--border-color-interaction-primary-base: var(--color-green-300); /* dark: same */
--border-color-interaction-primary-hover: var(--color-green-400); /* dark: same */
--border-color-interaction-primary-selected: var(--color-green-500); /* dark: same */
--border-color-interaction-selected: var(--text-color-brand); /* dark: same */
--border-color-interaction-strong: var(--color-translucent-black-700); /* dark: var(--color-translucent-white-700) */
--color-chart-data-categorical-1: var(--color-green-500); /* dark: var(--color-green-300) */
--color-chart-data-categorical-2: var(--color-blue-500); /* dark: var(--color-blue-300) */
--color-chart-data-categorical-3: var(--color-yellow-500); /* dark: var(--color-yellow-400) */
--color-chart-data-categorical-4: var(--color-teal-500); /* dark: var(--color-teal-300) */
--color-chart-data-categorical-5: var(--color-fuchsia-500); /* dark: var(--color-fuchsia-300) */
--color-chart-data-categorical-6: var(--color-purple-500); /* dark: var(--color-purple-300) */
--color-chart-data-categorical-7: var(--color-red-500); /* dark: var(--color-red-300) */
--color-chart-data-categorical-8: var(--color-gray-500); /* dark: var(--color-gray-300) */
--color-chart-data-sequential-blue-1: var(--color-blue-200); /* dark: var(--color-blue-800) */
--color-chart-data-sequential-blue-2: var(--color-blue-300); /* dark: var(--color-blue-700) */
--color-chart-data-sequential-blue-3: var(--color-blue-400); /* dark: var(--color-blue-600) */
--color-chart-data-sequential-blue-4: var(--color-blue-500); /* dark: same */
--color-chart-data-sequential-blue-5: var(--color-blue-600); /* dark: var(--color-blue-400) */
--color-chart-data-sequential-blue-6: var(--color-blue-700); /* dark: var(--color-blue-300) */
--color-chart-data-sequential-blue-7: var(--color-blue-800); /* dark: var(--color-blue-200) */
--color-chart-data-sequential-green-1: var(--color-green-200); /* dark: var(--color-green-800) */
--color-chart-data-sequential-green-2: var(--color-green-300); /* dark: var(--color-green-700) */
--color-chart-data-sequential-green-3: var(--color-green-400); /* dark: var(--color-green-600) */
--color-chart-data-sequential-green-4: var(--color-green-500); /* dark: same */
--color-chart-data-sequential-green-5: var(--color-green-600); /* dark: var(--color-green-400) */
--color-chart-data-sequential-green-6: var(--color-green-700); /* dark: var(--color-green-300) */
--color-chart-data-sequential-green-7: var(--color-green-800); /* dark: var(--color-green-200) */
--color-chart-data-trend-negative-1: var(--color-red-400); /* dark: var(--color-red-300) */
--color-chart-data-trend-negative-2: var(--color-red-500); /* dark: var(--color-red-400) */
--color-chart-data-trend-negative-3: var(--color-red-600); /* dark: var(--color-red-500) */
--color-chart-data-trend-neutral: var(--color-gray-500); /* dark: var(--color-gray-300) */
--color-chart-data-trend-positive-1: var(--color-green-400); /* dark: var(--color-green-300) */
--color-chart-data-trend-positive-2: var(--color-green-500); /* dark: var(--color-green-400) */
--color-chart-data-trend-positive-3: var(--color-green-600); /* dark: var(--color-green-500) */
--color-severity-0: var(--color-red-600); /* dark: same */
--color-severity-1: var(--color-red-500); /* dark: same */
--color-severity-2: var(--color-red-400); /* dark: same */
--color-severity-3: var(--color-yellow-400); /* dark: same */
--color-severity-4: var(--color-green-400); /* dark: same */
--color-severity-5: var(--color-blue-400); /* dark: same */
--color-severity-none: var(--color-gray-400); /* dark: var(--color-gray-500) */
--nv-current-theme: light; /* dark: dark */
--text-color-accent-black: var(--color-gray-1000); /* dark: same */
--text-color-accent-blue: var(--color-blue-700); /* dark: var(--color-blue-300) */
--text-color-accent-blue-strong: var(--color-blue-700); /* dark: var(--color-blue-200) */
--text-color-accent-blue-subtle: var(--color-blue-200); /* dark: same */
--text-color-accent-gray: var(--color-gray-700); /* dark: var(--color-gray-050) */
--text-color-accent-green: var(--color-green-700); /* dark: var(--color-green-300) */
--text-color-accent-green-strong: var(--color-green-700); /* dark: var(--color-green-200) */
--text-color-accent-green-subtle: var(--color-green-200); /* dark: same */
--text-color-accent-purple: var(--color-purple-700); /* dark: var(--color-purple-200) */
--text-color-accent-purple-strong: var(--color-purple-700); /* dark: var(--color-purple-200) */
--text-color-accent-purple-subtle: var(--color-purple-200); /* dark: same */
--text-color-accent-red: var(--color-red-700); /* dark: var(--color-red-300) */
--text-color-accent-red-strong: var(--color-red-700); /* dark: var(--color-red-200) */
--text-color-accent-red-subtle: var(--color-red-200); /* dark: same */
--text-color-accent-teal: var(--color-teal-700); /* dark: var(--color-teal-300) */
--text-color-accent-teal-strong: var(--color-teal-700); /* dark: var(--color-teal-200) */
--text-color-accent-teal-subtle: var(--color-teal-200); /* dark: same */
--text-color-accent-white: var(--color-gray-000); /* dark: same */
--text-color-accent-yellow: var(--color-yellow-700); /* dark: var(--color-yellow-300) */
--text-color-accent-yellow-strong: var(--color-yellow-700); /* dark: var(--color-yellow-200) */
--text-color-accent-yellow-subtle: var(--color-yellow-200); /* dark: same */
--text-color-base: var(--color-gray-600); /* dark: var(--color-gray-200) */
--text-color-brand: var(--color-brand); /* dark: same */
--text-color-component-nvidia-logo: var(--color-gray-1000); /* dark: var(--color-gray-000) */
--text-color-disabled: var(--color-gray-400); /* dark: var(--color-translucent-white-300) */
--text-color-feedback-danger: var(--color-red-500); /* dark: var(--color-red-400) */
--text-color-feedback-danger-inverse: var(--color-gray-900); /* dark: var(--color-red-300) */
--text-color-feedback-danger-strong: var(--color-red-700); /* dark: var(--color-red-300) */
--text-color-feedback-danger-subtle: var(--color-red-600); /* dark: var(--color-red-400) */
--text-color-feedback-info: var(--color-blue-500); /* dark: same */
--text-color-feedback-info-inverse: var(--color-gray-900); /* dark: var(--color-blue-300) */
--text-color-feedback-success: var(--color-green-500); /* dark: var(--color-green-400) */
--text-color-feedback-success-inverse: var(--color-gray-900); /* dark: var(--color-green-300) */
--text-color-feedback-warning: var(--color-yellow-300); /* dark: same */
--text-color-feedback-warning-inverse: var(--color-gray-900); /* dark: var(--color-yellow-200) */
--text-color-interaction-disabled-checked: var(--color-translucent-black-300); /* dark: var(--color-translucent-black-600) */
--text-color-interaction-selected: var(--color-gray-000); /* dark: var(--color-translucent-white-200) */
--text-color-inverse: var(--color-gray-000); /* dark: var(--color-gray-1000) */
--text-color-inverse-brand: var(--color-gray-950); /* dark: var(--text-color-brand) */
--text-color-placeholder: var(--color-gray-500); /* dark: var(--color-gray-400) */
--text-color-primary: var(--color-gray-1000); /* dark: var(--color-gray-000) */
--text-color-secondary: var(--color-gray-600); /* dark: var(--color-gray-300) */
--text-color-strong: var(--color-gray-900); /* dark: var(--color-gray-000) */
--text-color-subtle: var(--color-gray-400); /* dark: same */
```

Tailwind usage: `bg-surface-raised`, `text-accent-blue`

### Density Theme

KUI offers a standard semantic sizing theme(standard) along with a compact and spacious theme variant of that semantic sizing.

```css
--radius-density-xl: var(--radius-xl); /* compact(var(--radius-lg)), spacious(var(--radius-xl)) */
--spacing-density-xxs: 2px; /* compact(1px), spacious(4px) */
--spacing-density-xs: 4px; /* compact(2px), spacious(6px) */
--spacing-density-sm: 6px; /* compact(4px), spacious(8px) */
--spacing-density-md: 8px; /* compact(6px), spacious(12px) */
--spacing-density-lg: 12px; /* compact(8px), spacious(16px) */
--spacing-density-xl: 16px; /* compact(12px), spacious(24px) */
--spacing-density-2xl: 24px; /* compact(16px), spacious(32px) */
--spacing-density-3xl: 32px; /* compact(24px), spacious(48px) */
--spacing-density-4xl: 48px; /* compact(32px), spacious(64px) */
--spacing-density-5xl: 64px; /* compact(48px), spacious(80px) */
```

## Semantic Text Utilities

Tailwind text utilities for typography. Use directly or via `Text` component `kind` prop.

Example: `<div className="text-body-regular-md" />` or `<Text kind="body/regular/md" />`

```tailwindcss
.text-body-bold-2xl { @apply font-bold text-24 leading-lh-150; }
.text-body-bold-3xl { @apply font-bold text-32 leading-lh-150; }
.text-body-bold-lg { @apply font-bold text-16 leading-lh-150; }
.text-body-bold-md { @apply font-bold text-14 leading-lh-150; }
.text-body-bold-sm { @apply font-bold text-12 leading-lh-150; }
.text-body-bold-xl { @apply font-bold text-18 leading-lh-150; }
.text-body-bold-xs { @apply font-bold text-10 leading-lh-150; }
.text-body-italic-2xl { @apply italic text-24 leading-lh-150; }
.text-body-italic-3xl { @apply italic text-32 leading-lh-150; }
.text-body-italic-lg { @apply italic text-16 leading-lh-150; }
.text-body-italic-md { @apply italic text-14 leading-lh-150; }
.text-body-italic-sm { @apply italic text-12 leading-lh-150; }
.text-body-italic-xl { @apply italic text-18 leading-lh-150; }
.text-body-italic-xs { @apply italic text-10 leading-lh-150; }
.text-body-regular-2xl { @apply text-24 leading-lh-150; }
.text-body-regular-3xl { @apply text-32 leading-lh-150; }
.text-body-regular-lg { @apply text-16 leading-lh-150; }
.text-body-regular-md { @apply text-14 leading-lh-150; }
.text-body-regular-sm { @apply text-12 leading-lh-150; }
.text-body-regular-xl { @apply text-18 leading-lh-150; }
.text-body-regular-xs { @apply text-10 leading-lh-150; }
.text-body-semibold-2xl { @apply font-semibold text-24 leading-lh-150; }
.text-body-semibold-3xl { @apply font-semibold text-32 leading-lh-150; }
.text-body-semibold-lg { @apply font-semibold text-16 leading-lh-150; }
.text-body-semibold-md { @apply font-semibold text-14 leading-lh-150; }
.text-body-semibold-sm { @apply font-semibold text-12 leading-lh-150; }
.text-body-semibold-xl { @apply font-semibold text-18 leading-lh-150; }
.text-body-semibold-xs { @apply font-semibold text-10 leading-lh-150; }
.text-display-2xl { @apply font-bold text-64 leading-lh-125; }
.text-display-lg { @apply font-bold text-50 calc(62/50); }
.text-display-md { @apply font-bold text-44 leading-lh-125; }
.text-display-sm { @apply font-bold text-40 leading-lh-125; }
.text-display-xl { @apply font-bold text-56 leading-lh-125; }
.text-display-xs { @apply font-bold text-36 leading-lh-125; }
.text-label-bold-2xl { @apply font-bold text-24 leading-lh-125; }
.text-label-bold-3xl { @apply font-bold text-32 leading-lh-125; }
.text-label-bold-lg { @apply font-bold text-16 leading-lh-125; }
.text-label-bold-md { @apply font-bold text-14 calc(17/14); }
.text-label-bold-sm { @apply font-bold text-12 leading-lh-125; }
.text-label-bold-xl { @apply font-bold text-18 calc(22/18); }
.text-label-bold-xs { @apply font-bold text-10 calc(12/10); }
.text-label-light-2xl { @apply font-light text-24 leading-lh-125; }
.text-label-light-3xl { @apply font-light text-32 leading-lh-125; }
.text-label-light-lg { @apply font-light text-16 leading-lh-125; }
.text-label-light-md { @apply font-light text-14 calc(17/14); }
.text-label-light-sm { @apply font-light text-12 leading-lh-125; }
.text-label-light-xl { @apply font-light text-18 calc(22/18); }
.text-label-light-xs { @apply font-light text-10 calc(12/10); }
.text-label-regular-2xl { @apply text-24 leading-lh-125; }
.text-label-regular-3xl { @apply text-32 leading-lh-125; }
.text-label-regular-lg { @apply text-16 leading-lh-125; }
.text-label-regular-md { @apply text-14 calc(17/14); }
.text-label-regular-sm { @apply text-12 leading-lh-125; }
.text-label-regular-xl { @apply text-18 calc(22/18); }
.text-label-regular-xs { @apply text-10 calc(12/10); }
.text-label-semibold-2xl { @apply font-semibold text-24 leading-lh-125; }
.text-label-semibold-3xl { @apply font-semibold text-32 leading-lh-125; }
.text-label-semibold-lg { @apply font-semibold text-16 leading-lh-125; }
.text-label-semibold-md { @apply font-semibold text-14 calc(17/14); }
.text-label-semibold-sm { @apply font-semibold text-12 leading-lh-125; }
.text-label-semibold-xl { @apply font-semibold text-18 calc(22/18); }
.text-label-semibold-xs { @apply font-semibold text-10 calc(12/10); }
.text-mono-2xl { @apply font-mono text-24 leading-lh-150; }
.text-mono-lg { @apply font-mono text-16 leading-lh-150; }
.text-mono-md { @apply font-mono text-14 leading-lh-150; }
.text-mono-sm { @apply font-mono text-12 leading-lh-150; }
.text-mono-xl { @apply font-mono text-20 leading-lh-150; }
.text-title-2xl { @apply font-bold text-36 leading-lh-125; }
.text-title-lg { @apply font-bold text-28 leading-lh-125; }
.text-title-md { @apply font-bold text-24 leading-lh-125; }
.text-title-sm { @apply font-bold text-20 leading-lh-125; }
.text-title-xl { @apply font-bold text-32 leading-lh-125; }
.text-title-xs { @apply font-bold text-18 calc(22/18); }
```

## Primitive Variables

Core static CSS variables (not theme-dependent). Foundation for utility classes and themed properties.

```css
--spacing: 4px;
--color-black: #000000;
--color-white: #ffffff;
--color-brand: #76b900;
--color-red-050: #ffe9e9;
--color-red-100: #ffd7d7;
--color-red-200: #ffbbbb;
--color-red-300: #ff8181;
--color-red-400: #fe3f3f;
--color-red-500: #e52020;
--color-red-600: #c21e1e;
--color-red-700: #961515;
--color-red-800: #650b0b;
--color-red-900: #4b0404;
--color-red-950: #2d0100;
--color-yellow-050: #feeeb2;
--color-yellow-100: #fcde7b;
--color-yellow-200: #f9c500;
--color-yellow-300: #ef9100;
--color-yellow-400: #df6500;
--color-yellow-500: #d73d00;
--color-yellow-600: #b93100;
--color-yellow-700: #8d2600;
--color-yellow-800: #601600;
--color-yellow-900: #441000;
--color-yellow-950: #2d0b00;
--color-green-025: #dafb7d;
--color-green-050: #cfff40;
--color-green-100: #bff230;
--color-green-200: #a5de15;
--color-green-300: #76b900;
--color-green-400: #549a00;
--color-green-500: #3f8500;
--color-green-600: #327100;
--color-green-700: #265600;
--color-green-800: #193800;
--color-green-900: #142700;
--color-green-950: #0d1a00;
--color-teal-050: #adfcf8;
--color-teal-100: #9aefe5;
--color-teal-200: #3ae3c9;
--color-teal-300: #1dbba4;
--color-teal-400: #139a86;
--color-teal-500: #0d8473;
--color-teal-600: #097061;
--color-teal-700: #04554b;
--color-teal-800: #033831;
--color-teal-900: #022723;
--color-teal-950: #011a19;
--color-blue-050: #cbf5ff;
--color-blue-100: #aaccee;
--color-blue-200: #7cd7fe;
--color-blue-300: #10b1fb;
--color-blue-400: #008af9;
--color-blue-500: #0074df;
--color-blue-600: #0060c7;
--color-blue-700: #0046a4;
--color-blue-800: #002781;
--color-blue-900: #002050;
--color-blue-950: #00112c;
--color-purple-050: #fae9ff;
--color-purple-100: #f9d4ff;
--color-purple-200: #f0b9fd;
--color-purple-300: #cd8ef0;
--color-purple-400: #c359ef;
--color-purple-500: #a846db;
--color-purple-600: #952fc6;
--color-purple-700: #741d9d;
--color-purple-800: #4d1368;
--color-purple-900: #331344;
--color-purple-950: #1f0f27;
--color-fuchsia-050: #ffe8f9;
--color-fuchsia-100: #ffd3f2;
--color-fuchsia-200: #feb5ee;
--color-fuchsia-300: #fc79ca;
--color-fuchsia-400: #e050b7;
--color-fuchsia-500: #d2308e;
--color-fuchsia-600: #b62475;
--color-fuchsia-700: #8c1c55;
--color-fuchsia-800: #5d1337;
--color-fuchsia-900: #420d25;
--color-fuchsia-950: #2d0919;
--color-gray-000: #ffffff;
--color-gray-025: #f7f7f7;
--color-gray-050: #eeeeee;
--color-gray-100: #e0e0e0;
--color-gray-1000: #000000;
--color-gray-200: #cccccc;
--color-gray-300: #a7a7a7;
--color-gray-400: #898989;
--color-gray-500: #757575;
--color-gray-600: #636363;
--color-gray-700: #4b4b4b;
--color-gray-800: #313131;
--color-gray-900: #222222;
--color-gray-950: #161616;
--color-gray-975: #0c0c0c;
--color-translucent-black-000: #00000000;
--color-translucent-black-050: #0000000d;
--color-translucent-black-100: #0000001a;
--color-translucent-black-120: #0000001f;
--color-translucent-black-150: #00000026;
--color-translucent-black-200: #00000033;
--color-translucent-black-300: #0000004d;
--color-translucent-black-400: #00000066;
--color-translucent-black-500: #00000080;
--color-translucent-black-600: #00000099;
--color-translucent-black-700: #000000b2;
--color-translucent-black-800: #000000cc;
--color-translucent-black-900: #000000e5;
--color-translucent-white-000: #ffffff00;
--color-translucent-white-050: #ffffff0d;
--color-translucent-white-100: #ffffff1a;
--color-translucent-white-120: #ffffff1f;
--color-translucent-white-200: #ffffff33;
--color-translucent-white-250: #ffffff40;
--color-translucent-white-300: #ffffff4d;
--color-translucent-white-400: #ffffff66;
--color-translucent-white-500: #ffffff80;
--color-translucent-white-600: #ffffff99;
--color-translucent-white-700: #ffffffb2;
--color-translucent-white-800: #ffffffcc;
--color-translucent-white-900: #ffffffe5;
--font-sans: NVIDIA Sans, NVIDIA Sans Fallback, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: JetBrains Mono, JetBrains Mono Fallback, ui-monospace, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--text-10: 0.625rem;
--text-12: 0.75rem;
--text-14: 0.875rem;
--text-16: 1rem;
--text-18: 1.125rem;
--text-20: 1.25rem;
--text-22: 1.375rem;
--text-24: 1.5rem;
--text-28: 1.75rem;
--text-32: 2rem;
--text-36: 2.25rem;
--text-40: 2.5rem;
--text-44: 2.75rem;
--text-48: 3rem;
--text-50: 3.125rem;
--text-56: 3.5rem;
--text-60: 3.75rem;
--text-64: 4rem;
--text-72: 4.5rem;
--text-80: 5rem;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-semibold: 500;
--font-weight-bold: 700;
--leading-lh-100: 1;
--leading-lh-125: 1.25;
--leading-lh-150: 1.5;
--leading-lh-175: 1.75;
--breakpoint-xs: 20rem;
--breakpoint-sm: 36rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 62rem;
--breakpoint-xl: 75rem;
--breakpoint-2xl: 100rem;
--container-3xs: 16rem;
--container-2xs: 18rem;
--container-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-5xl: 64rem;
--container-6xl: 72rem;
--container-7xl: 80rem;
--border-width-none: 0px;
--border-width-1: 1px;
--border-width-2: 2px;
--border-width-3: 3px;
--border-width-4: 4px;
--radius-none: 0px;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-3xl: 32px;
--radius-round: 9999px;
--shadow-lg: 0px 8px 12px 0px var(--color-translucent-black-150);
--shadow-md: 0px 4px 6px 0px var(--color-translucent-black-120);
--shadow-sm: 0px 2px 4px 0px var(--color-translucent-black-120);
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--animate-spin: spin 1s linear infinite;
--transition-duration-150: 150ms;
--transition-duration-200: 200ms;
--transition-duration-250: 250ms;
--transition-duration-300: 300ms;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
```

Available as Tailwind classes: `--color-red-500` → `bg-red-500`, `--text-16` → `text-16`