equinor-design-system

To apply EDS design tokens for Fusion Portal UI styling, use EDS CSS custom properties for colors, typography via `variant`, and spacing tokens instead of raw pixel values to ensure brand-compliant component styling and portal shell-safe layout design.

The correct way to use EDS typography variants is by specifying the `variant` property via `@equinor/eds-core-react`, which ensures brand-compliant text styling while blocking manual font sizing or font-family overrides.

To render EDS icons safely with accessibility features, use the `Icon` component and pass both the `data` and `title` properties, ensuring screen readers can properly interpret the icon within your UI.

No, you cannot use raw hex, rgb, or named colors for semantic UI layers in Equinor apps. You must use EDS CSS custom properties to maintain color token correctness and brand compliance across the application.

For Fusion Portal three-zone shell layouts, you must standardize padding and gaps using EDS spacing tokens rather than raw pixel values, and align your design to avoid conflicting portal shell margins and heights.

You should use the `Paper` component for elevation guidance in EDS when you need to apply visual depth to UI elements, ensuring consistent elevation styling across your application interfaces.