# Frosted glass — style recipe

## The idea

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

## 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

## Colour

- Morning haze (background): #eef2fb
- Frost (surface): #ffffff
- Night ink (text): #1b2140
- Slate cloud (muted): #4a5275
- Violet hour (accent): #4b3fd6
- Deep teal (accent-2): #0b7285
- Ice edge (border): #c9d3ee
- Text on background contrast: 14.00:1

## Type

- Headings: Manrope, weights 600 — Semi-bold, slightly tight tracking on large sizes
- Body: Inter, weights 400, 500 — Regular for reading, medium for labels and figures
- Scale: 13px, 15px, 17px, 22px, 32px, 48px, 64px
- A clean geometric heading over a neutral sans; big numbers carry the information.

## Spacing and shape

- Base unit: 8px
- Spacing steps: 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

## 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.

## 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