Filters and effects

Backdrop blur 14px

Sticky header

Glow 40px

Effects with a job

Filters change how something looks without changing what it is. At North they are functional: to separate layers, to focus attention or to quiet an image. Never to decorate.

Effect	Token	Value	Use it for
blur-scrim	`--n-filter-blur-scrim`	4px	Backdrop blur behind dialogs and drawers (with the scrim colour).
blur-sm	`--n-filter-blur-sm`	8px	Backdrop blur for floating controls over images.
blur-md	`--n-filter-blur-md`	14px	Backdrop blur for sticky headers and toolbars.
blur-lg	`--n-filter-blur-lg`	40px	Decorative glows only (the Oasis glow, Aurora). Never on content.
grayscale	`--n-filter-grayscale`	1	Full grayscale: partner logo walls in one-colour mode.
grayscale-muted	`--n-filter-grayscale-muted`	0.6	Inactive or archived imagery.
dim	`--n-filter-dim`	0.72	Brightness for images behind text when duotone is not possible.
saturate-backdrop	`--n-filter-saturate-backdrop`	1.4	Saturation boost paired with backdrop blur on light headers.

Backdrop blur

Separate layers, keep context

Sticky headers and toolbars: canvas colour at 88% with backdrop-filter: saturate(1.4) blur(14px), so content scrolling underneath stays readable but quiet (as on this site).
Dialog and drawer scrims: the scrim colour plus a 4px blur.
Floating controls over images: translucent Midnight with an 8px blur.
Always pair blur with a solid-enough background colour so text contrast holds even where the browser can't blur (fallback).

NorthStar⋯

Blur on images and content

Progressive image loading: a small blurred preview sharpens when the full image arrives (220ms).
Background imagery behind text in heroes may be softened with blur-md, but only on photographs, never on product UI or illustrations.
Blur is not redaction. Never blur names, emails, numbers or classified content to hide them in screenshots: blurred text can be reconstructed. Replace sensitive data with sample data, or cover it with a solid Steel bar.

Grayscale

Partner and customer logo walls may be shown in one colour; prefer the official one-colour logo over a grayscale filter where available.
Archived or inactive items (expired analyses, disabled integrations) may show their imagery at 60% grayscale with a label.
Never grayscale our own logo, photos of people in case studies, or the illustrations.

Duotone, dim and overlays

Duotone (Midnight → Dune) is the preferred treatment for photos behind text: see Photography.
When duotone is not possible, dim to 72% brightness and add a Midnight gradient where the text sits.
Overlay gradients run from Midnight 95 at 78% to transparent, under captions and lower thirds only.

Glow

The Oasis glow is our only decorative effect: a soft 40px halo for the star and live AI states on dark backgrounds. One per view. See Light/Dark modes and Motion.

Code

.app-header { background: color-mix(in srgb, var(--n-bg-canvas) 88%, transparent);
  backdrop-filter: saturate(var(--n-filter-saturate-backdrop)) blur(var(--n-filter-blur-md)); }
.n-scrim { background: var(--n-scrim); backdrop-filter: blur(var(--n-filter-blur-scrim)); }
.partner-wall img { filter: grayscale(var(--n-filter-grayscale)); }
@supports not (backdrop-filter: blur(1px)) { .app-header { background: var(--n-bg-canvas); } }

<!-- Tailwind --> <header class="sticky top-0 bg-n-canvas/90 backdrop-blur-md backdrop-saturate-150">

Dos and don'ts

Do

Use backdrop blur to separate floating layers.
Provide a solid fallback background.
Replace sensitive data instead of blurring it.
Prefer official one-colour logos to grayscale filters.

Don't

Blur product UI, illustrations or text.
Use drop-shadow filters, glows or blur as decoration.
Stack blur, grayscale and gradients on one image.
Rely on blur to hide confidential information.

layla.haddad@north.ae
+971 50 123 4567

Don't blur sensitive data to hide it

Don't add glows to UI

Last updated on 14 October 2026