Website Design Explorer

Style

Frosted glass

Frosted, translucent panels float over soft colour fields; thin light borders and gentle depth show what sits on what.

  • cool
  • calm
  • technical
  • airy
  • contemporary
  • cool

Copy the idea

See it live

Example: weather and air-quality app landing page for Brumelight, a fictional brand made up for this explorer. Switch the width to see the style on a phone, a tablet and a desktop screen.

Open the example on its own

Copy the idea

Take the style with you as a brief for a person, as instructions for an AI assistant, or as design tokens. It describes the idea and the rules — never the example's code.

The recipe

When to use it and the principles behind it. The palette, type, spacing and the do's and don'ts are drawn below; the brief you copy carries all ten sections.

Use it when

  • Apps and tools that show live readings or status at a glance
  • Products that want to feel light, modern and quietly technical
  • Landing pages with a few key panels rather than long text

Avoid it when

  • Pages are mostly long reading text
  • The brand needs warmth, grit or a printed feel
  • The layout must stay readable on very low-powered screens

Principles

  • Panels are translucent white, but solid enough that text reads without the blur
  • Two or three large, soft colour fields sit far behind the content and never under small text directly
  • Thin, light, semi-transparent borders outline every panel
  • Panels overlap and float at different depths instead of locking into a grid
  • Soft, wide shadows tinted with the background's blue, never black
  • One violet accent for actions; a teal second accent for small signals only

Imagery and motion

  • Imagery: No photos: soft gradient colour fields, simple line icons and big readings drawn in type.
  • Motion: Slow drifts of the colour fields and gentle fades as panels come in; nothing bounces.

Palette

  • Morning hazebackground#eef2fb
  • Frostsurface#ffffff
  • Night inktext#1b2140
  • Slate cloudmuted#4a5275
  • Violet houraccent#4b3fd6
  • Deep tealaccent-2#0b7285
  • Ice edgeborder#c9d3ee

Text on background: 14.00:1 — passes AA

Type

Headings Manrope, weights 600

The quick brown fox jumps over the lazy dog

Semi-bold, slightly tight tracking on large sizes

Body Inter, weights 400, 500

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Regular for reading, medium for labels and figures

Scale A clean geometric heading over a neutral sans; big numbers carry the information.
  • 64pxThe quick brown fox jumps over the lazy dog
  • 48pxThe quick brown fox jumps over the lazy dog
  • 32pxThe quick brown fox jumps over the lazy dog
  • 22pxThe quick brown fox jumps over the lazy dog
  • 17pxThe quick brown fox jumps over the lazy dog
  • 15pxThe quick brown fox jumps over the lazy dog
  • 13pxThe quick brown fox jumps over the lazy dog

Spacing and shape

Spacing base unit 8px
  • 8px
  • 16px
  • 24px
  • 40px
  • 64px
  • 104px

Roomy padding inside panels; panels overlap rather than sit in tight rows.

Corner radii
  • 16px
  • 24px
Borders
1 px light, semi-transparent white or ice-blue borders on every panel
Shadows
Soft and wide, low-opacity blue shadows that lift panels off the colour fields

Do and don't

Do

  • Give every panel a background solid enough to read without the blur
  • Keep the colour fields large, soft and few
  • Let panels overlap a little to show depth
  • Use the violet accent only for the main action

Don't

  • No text placed straight on a gradient
  • No dark, heavy shadows
  • No tight tile grid of equal boxes
  • No more than three colour fields on a screen

Similar styles

The styles closest to this one in mood, density, era, warmth and accent colour.