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>
2.0 KiB
2.0 KiB
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)
border-border/50
bg-background/75
supports-[backdrop-filter]:bg-background/65
backdrop-blur-xl
backdrop-saturate-150
shadow-sm
rounded-2xl
Mobile sheet:
bg-background/95
backdrop-blur-xl
backdrop-saturate-150
shadow-xl
border-border/50
Dropdown:
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
- Text on glass must still meet contrast—prefer
foreground/muted-foreground, not low-alpha white text on light glass. - Provide opaque fallbacks when
backdrop-filteris unsupported (supports-[backdrop-filter]:…pattern). - 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.