Slate

Cool gray-blue structure with enough atmosphere to feel modern rather than plain.

Gradient story

Slate

#475569

Modern, neutral, enterprise

Slate is the neutral for products that need to look capable without making color the story. It is cooler than charcoal and less formal than navy, which makes it a natural fit for dashboards, documentation, and enterprise software.

A slate gradient should be disciplined. Use a deep blue-gray anchor and a pale steel highlight, then let the surface organize the page rather than decorate it.

Design notes

Slate works when the content is complex and the interface needs order. It pairs well with blue, teal, green, and warm neutrals.

Practical applications

Try slate for documentation landing pages, data product heroes, enterprise slide decks, and feature sections with screenshots or charts.

Live applications

Build a whole visual system from one color.

Remix Slate

Background image

Use slate as the emotional field, then place copy on the anchored side for contrast.

50/50 layout

Let the gradient carry one side of the page while white space keeps the content crisp.

Feature pillars

Repeat the same color logic across cards so a page feels consistent instead of assembled.

Slide cover

A reusable composition from the same color system.

Type field

A reusable composition from the same color system.

Social crop

A reusable composition from the same color system.

Open a ready-made variation

Each preview opens in the editor with the same base color, so you can tune rotation, ratio, texture, and export format.

Hero field / #475569 to #0F172A

Editorial mesh / #475569 to #CBD5E1

Type anchor / #0F172A to #475569

Soft cover / #475569 to #CBD5E1

Frequently asked

Where should I use a slate gradient?

Slate works especially well for b2b saas pages, data dashboards, documentation covers. Use it where a flat color would feel too static but a photo would be too specific.

What does a slate gradient look good with?

Slate pairs naturally with #0F172A and #CBD5E1. Use the darker pairing as the anchor for type and the lighter pairing as atmosphere so the gradient feels dimensional instead of flat.

How do I use a slate gradient in Fove?

Open the gradient in the editor, choose a ratio for your slide, landing page, or social crop, then export PNG, JPG, SVG, or copy clean CSS. Raster exports can include texture for a more finished look.

Related colors

Open it. Tune it. Export it.

Start with this slate gradient, then adjust texture, intensity, rotation, and aspect ratio for your exact slide or page.

Open slate in the editor

See all gradient colors (24) or browse curated palettes.