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.5 KiB
2.5 KiB
Gradients
Gradients create continuous atmosphere across the page. They must feel like one canvas—not disconnected colorful patches.
Canonical utilities live in app/globals.css @layer utilities.
Allowed utilities
| Class | Role |
|---|---|
bg-section-canvas |
Default section continuity (very soft primary tint) |
bg-section-muted |
Alternate muted band |
bg-gradient-hero |
Hero radial + vertical wash |
bg-gradient-featured |
Featured band (corner radials + wash) |
bg-gradient-cta |
Strong 135° brand CTA panel (brand-primary-dark → brand-primary) |
bg-glow-primary |
Soft radial glow using --brand-glow |
shadow-glow-sm |
Neon rim for primary buttons / resting cards |
shadow-glow-primary |
Mid neon for card hover / button hover |
shadow-glow-lg |
Stronger neon (dark hover / media hover) |
shadow-glow-media |
Neon + depth for image frames |
media-frame |
Shared image wrapper: surface border + media neon |
Opacity limits
| Effect | Light | Dark |
|---|---|---|
| Section tint washes | ~3–6% primary mixed into background | ~4–6% |
| Hero radial glow | ~0.12 alpha | ~0.10 alpha |
| Featured radials | ~0.08–0.10 | ~0.08 + dark brand mix |
| Footer top wash | ~0.03–0.04 | ~0.03 |
| Brand glow token | 0.12 |
0.10 |
If a glow is obvious as a “blob,” it is too strong.
Layer ordering
Inside a section:
- Section background utility (
bg-section-*/ gradient). .section-decorabsolute layer (glows, grids)..section-contentreal UI.
Never place glows above content (z-index) or with pointer events.
Glow usage
- Spotlights behind headings or cards:
bg-glow-primaryon a blurred circle in.section-decor. - Interactive emphasis:
shadow-glow-sm→shadow-glow-primary/shadow-glow-lgon buttons and cards. - Image frames: prefer
media-frame(orshadow-glow-media) over plainshadow-surface-*. - Timeline active nodes may use highlight mixes—keep confined to that component.
CTA panels
Use bg-gradient-cta for conversion bands. Pair with Button surface="brand" for correct contrast.
Forbidden
- One-off
bg-gradient-to-r from-purple-500 to-pink-500(or any non-brand palette). - Hard rectangular gradient blocks that do not blend into neighbors.
- Multiple competing radials in one small card.
- Fixed-position gradient overlays spanning the whole site.