ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
79 lines
2.0 KiB
Markdown
79 lines
2.0 KiB
Markdown
# Glassmorphism
|
||
|
||
Glass is used sparingly for **floating chrome** (header, menus, sheets, blog tables)—not as a general card style.
|
||
|
||
## When to use
|
||
|
||
| Allowed | Not allowed |
|
||
| --- | --- |
|
||
| Scrolled header shell | Every content card |
|
||
| Nav dropdown / mobile sheet | Full page backgrounds |
|
||
| Blog table header treatments | Text-heavy panels that hurt readability |
|
||
|
||
## Canonical recipe (header scrolled)
|
||
|
||
```txt
|
||
border-border/50
|
||
bg-background/75
|
||
supports-[backdrop-filter]:bg-background/65
|
||
backdrop-blur-xl
|
||
backdrop-saturate-150
|
||
shadow-sm
|
||
rounded-2xl
|
||
```
|
||
|
||
Mobile sheet:
|
||
|
||
```txt
|
||
bg-background/95
|
||
backdrop-blur-xl
|
||
backdrop-saturate-150
|
||
shadow-xl
|
||
border-border/50
|
||
```
|
||
|
||
Dropdown:
|
||
|
||
```txt
|
||
bg-popover/95
|
||
backdrop-blur-xl
|
||
shadow-md
|
||
border-border/50
|
||
rounded-xl
|
||
```
|
||
|
||
## Spec ranges
|
||
|
||
| Property | Range |
|
||
| --- | --- |
|
||
| Blur | `backdrop-blur-md` (12px) to `backdrop-blur-xl` (24px) |
|
||
| Fill opacity | 65%–95% of `background` / `popover` |
|
||
| Border | `border-border/40`–`/50` or translucent mixes |
|
||
| Saturation | `backdrop-saturate-150` for chrome |
|
||
|
||
## Readability rules
|
||
|
||
1. Text on glass must still meet contrast—prefer `foreground` / `muted-foreground`, not low-alpha white text on light glass.
|
||
2. Provide opaque fallbacks when `backdrop-filter` is unsupported (`supports-[backdrop-filter]:…` pattern).
|
||
3. Do not place long paragraphs on heavy blur without a solid scrim.
|
||
|
||
## Dark mode
|
||
|
||
Glass uses the same semantic tokens; dark backgrounds already sit on `#141818` / `#1c2424`. Do not switch to pure `bg-white/10` hacks unless matching an existing pattern (timeline idle cards are a special dark UI).
|
||
|
||
## Motion
|
||
|
||
Blur/background changes on the header animate with `duration-300 ease-out`. Avoid animating blur on scroll for large content regions (expensive).
|
||
|
||
## Forbidden
|
||
|
||
- Frosted cards stacked across an entire landing page.
|
||
- Extra noise textures + glass + glow simultaneously.
|
||
- Glass without border or shadow that disappears on light backgrounds.
|
||
|
||
## Related
|
||
|
||
- [navbar.md](./navbar.md)
|
||
- [gradients.md](./gradients.md)
|
||
- [cards.md](./cards.md)
|