> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# Effects

> Effects include elevations (shadows) and focus rings for consistent depth, attention, and keyboard focus.

## Elevations

Elevation, or shadow, adds depth and hierarchy to the interface by using shadow to separate elements from the background. It helps guide user focus and indicate layers of interaction. Elevation should be applied intentionally and consistently to avoid visual clutter.

### Guidelines

* Use elevation tokens, not hardcoded box-shadow values.
* Elevation should reflect actual layering — tooltips and popovers sit higher than cards, which sit higher than the base surface. Don't apply high elevation to flat, inline elements.
* Don't use shadows decoratively. If an element isn't functionally elevated (e.g. floating, overlaying content), it shouldn't have a shadow.
* Avoid stacking shadows — if multiple elevated elements overlap, only the topmost should cast a shadow.
* In dark mode, elevation is often conveyed through surface lightness rather than shadow intensity. Let the tokens handle this automatically.
* Avoid shadows on cards, especially in dense dashboard layouts — they add visual noise and make the page feel cluttered.

### Tokens

| Token                   | Use                                                         |
| :---------------------- | :---------------------------------------------------------- |
| `effect-shadow-sm`      | Tooltips, small floating labels                             |
| `effect-shadow-default` | Menus, Dropdowns, Popovers, or floating panels and toolbars |
| `effect-shadow-lg`      | Drawers, Sheets, Side panels                                |
| `effect-shadow-xl`      | Dialogs, Alert dialogs                                      |

## Focus states

Focus states, or rings, make interactive elements visible to keyboard and assistive technology users. They are not optional.

### Guidelines

* Never remove or suppress focus styles — not even for aesthetic reasons.
* Don't rely on color alone to show focus (always use a 2px stroke weight); the focus ring must be visible regardless of the element's color or background.
* Focus styles are provided by Aura via primitives and tokens. Don't override them unless you are replacing them with something that meets WCAG 2.1 AA contrast requirements.
* Custom interactive elements (anything not using an Aura component) must implement focus styles manually.
* Test focus order — it should follow a logical reading sequence and not jump unexpectedly around the page.

### Tokens

**Default focus ring**

| Token                           | Value                | Description                                                                |
| :------------------------------ | :------------------- | :------------------------------------------------------------------------- |
| `ring` + `border-width/1`       | `1px solid, #7081C7` | Color and stroke weight applied to inside stroke weight of the focus ring  |
| `ring-muted` + `border-width/1` | `1px solid, #D0D6ED` | Color and stroke weight applied to outside stroke weight of the focus ring |

**Validation focus ring**

| Token                                       | Value                | Description                                                                |
| :------------------------------------------ | :------------------- | :------------------------------------------------------------------------- |
| `ring-destructive` + `border-width/1`       | `1px solid, #CB0B2C` | Color and stroke weight applied to inside stroke weight of the focus ring  |
| `ring-destructive-muted` + `border-width/1` | `1px solid, #FDDEE4` | Color and stroke weight applied to outside stroke weight of the focus ring |