Most «glass» interfaces fail in Arabic for one reason: the glass is added as a filter over an interface designed for something else. The result is Arabic text with joined letterforms floating over coloured noise, and a contrast that cannot be measured because it changes with whatever sits behind it.
Glass is a material, not an effect
In Vibe OS we treated glass as a material with thickness, elevation and a ground. A glass panel does not float in a void; it rests on a fixed dark ground, carries a hairline border that defines its thickness, and casts a shadow that says where it sits in depth. Those three decisions — ground, border, shadow — are what make it read as a material.
Rule one: a fixed ground behind the text
Contrast cannot be measured against a changing background. So every piece of text on a glass surface here sits over a fixed dark layer inside the panel — not over the blur directly. The blur is for edges and empty space; the text has its own ground.
/* the panel: blur for the surface, a fixed ground for the text */
.glass {
background: rgba(10, 12, 16, .82); /* the ground contrast is measured against */
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
border: 1px solid rgba(255,255,255,.12); /* the thickness */
box-shadow: 0 24px 60px -30px rgba(0,0,0,.6); /* the depth */
}
.glass p { color: #F2F0EC; } /* ≥ 10:1 even over pure white — computed for the worst case */Rule two: Arabic needs height, not opacity
Joined Arabic letterforms lose their clarity when their edges blend into the background. The fix is not more weight — it is a taller line height (1.7 and up), a size one step larger, and no letter-spacing at all. Glass keeps its effect in the space around the text, not in the text itself.
Rule three: motion reveals depth
A static glass panel can read as an image. When it moves at a slightly different speed from the background (a light parallax of ±20px), the eye understands it is a layer in front of a layer. This is not decoration — it is what proves the glass has depth.
- No more than three glass layers in one screen — beyond that it becomes noise
- Blur of 14–20px; less looks like a mistake and more dissolves the background entirely
- In light mode: a light, nearly opaque ground and a dark border — not the reverse
Good glass is not noticed. What is noticed is the clear text on it and the depth behind it.
In short
Glassiness is not a filter added at the last minute. It is three material decisions — a fixed ground, a border that gives thickness, and a shadow that gives depth — taken once in the design system, then measured against real contrast with real Arabic text.
