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.
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 |
| 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 |
