Gradients

Gradients in Aggarly Platform are derived directly from brand color tokens and composed using SCSS mixins. Any change to brand colors automatically propagates across the entire system.

Brand Gradient

This is the primary brand gradient. It is composed from the following tokens:

--ds-color-secondary
--ds-color-primary
--ds-color-accent-green

Brand Strip

The brand strip is a subtle accent indicator used in cards, panels, and headers. It inherits border radius and respects RTL.

Implementation

Gradients must always be applied using the provided SCSS mixins. Direct usage of linear-gradient in JSX or component styles is not permitted.

@use "@/design-system/scss/mixins/gradient" as gradient;

/* Primary brand gradient */
.card--highlight {
  @include gradient.brand-gradient-bg;
}

/* Subtle accent strip */
.card--with-strip {
  @include gradient.brand-strip(4px);
}

Usage Guidelines

Gradients are accent primitives, not layout backgrounds.
Use gradients sparingly to preserve readability.
Prefer the brand strip for subtle emphasis.
Never redefine gradients outside the design system.
New gradients must be added as mixins, not inline styles.