# Glassmorphism

Schema: 1.0.0 · Content revision: f5fd78058ba2
Resource base: https://mejohnc.org (or the preview host used to obtain this file).

A surface treatment that suggests frosted glass through translucency, blur, and a visible edge. Its success depends on what is behind the surface.

## Visual family
Contemporary interfaces. Editorial family: shared visual vocabulary, not a claim of common origin.

## Visual cues
- Translucent layer
- Background blur
- Subtle edge highlight

## Build it
1. Use glass for a small overlay or toolbar.
2. Provide an opaque fallback.
3. Test text over the lightest and darkest background regions.

## Example
A photo viewer with one translucent toolbar and opaque menus.

## Typography
Use medium-weight text on translucent surfaces. Thin strokes are vulnerable to changing backgrounds.

## Practical consequences
- Starting projects: Portfolio, Internal tool. These are suggestions, not restrictions.
- Reading/layout: spacious; quiet visual emphasis.
- Asset work: Glass needs a background with enough variation to reveal it.
- Complexity: medium. Allow time for a coherent decorative or image layer and responsive checks.

## Limits
Stacking many blurred layers or assuming blur automatically supplies enough contrast.

## Reading the collected reference board
The board includes glass-like distortion and refracted print effects. Those are related material references, but not all demonstrate the frosted, blurred surface used in interface glassmorphism.

## Context
Contemporary screen interpretation. The recipe is a modern web adaptation.
No single inventor or exact founding date is asserted for this interpretation.

## Implementation files
- [page](/territories/glassmorphism/)
- [guide](/territories/glassmorphism/guide.md)
- [brief](/territories/glassmorphism/brief.md)
- [tokens](/territories/glassmorphism/tokens.json)
- [checks](/territories/glassmorphism/checklist.md)
- [example](/territories/glassmorphism/example/)
- [versionedGuide](/territories/v1/glassmorphism/guide.md)
- [versionedTokens](/territories/v1/glassmorphism/tokens.json)