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>
60 lines
2.3 KiB
Plaintext
60 lines
2.3 KiB
Plaintext
---
|
|
description: Visual effects must come from styles/design-system — page owns atmosphere, sections do not
|
|
globs: components/**/*.tsx, app/**/*.tsx
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Design System Visual Effects
|
|
|
|
Atmospheric effects are **page-owned**. Sections sit inside the shared ambient environment.
|
|
|
|
## Architecture
|
|
|
|
```
|
|
body (flat base)
|
|
→ PageAtmosphere (gradient + grid + soft light + noise)
|
|
→ page-content / sections (transparent shells)
|
|
→ cards / panels (surface tokens)
|
|
```
|
|
|
|
Canonical modules live in `styles/design-system/`, imported from `app/globals.css`.
|
|
|
|
| File | Responsibility |
|
|
| --- | --- |
|
|
| `tokens.css` | Brand, elevation, glow stops |
|
|
| `background.css` | Flat body base, CTA photo banner |
|
|
| `ambient.css` | `page-atmosphere*`, `hero-atmosphere`, timeline sizing tokens |
|
|
| `surfaces.css` | `section-shell`, transparent canvas |
|
|
| `borders.css` | `border-surface` |
|
|
| `shadows.css` | `shadow-surface-*`, `shadow-floating`, `shadow-overlay`, `shadow-hero` |
|
|
| `gradients.css` | Panel-only `bg-gradient-cta` (not section washes) |
|
|
| `glow.css` | Card/panel/button neon, `media-frame`, glow orbs |
|
|
| `grid.css` | Legacy section grid (prefer page grid) |
|
|
|
|
## Allowed in sections
|
|
|
|
```tsx
|
|
<section className="section-shell bg-section-canvas">
|
|
<Container className="section-content">…</Container>
|
|
</section>
|
|
```
|
|
|
|
- Section shells: `bg-section-canvas` (default), soft `bg-section-muted`, or dark-only `bg-section-lift` for brightness rhythm
|
|
- Surfaces: `border-surface`, `shadow-surface-sm|md`, `shadow-floating`, `shadow-hero`, `shadow-glow-sm|primary|lg|media`, `media-frame`
|
|
- CTA panels: `bg-gradient-cta`, `bg-cta-photo-banner` (content panels, not section backgrounds)
|
|
- Hero soft wash: `hero-atmosphere` only on the homepage hero
|
|
- Local emphasis: `local-highlight` / `local-highlight--soft` behind a card, image, title, or CTA panel — never as a section wash
|
|
|
|
## Forbidden in sections
|
|
|
|
- Owning page atmosphere (`section-pattern-grid`, `glow-orb`, `SectionAtmosphere`)
|
|
- Opaque `bg-background` / hard `bg-section-muted` slabs that restart the canvas
|
|
- Inline `bg-[radial-gradient(...)]`, custom `box-shadow`, `backdrop-filter`, or grid patterns
|
|
- Per-section lighting that begins/ends inside one block (`glow-orb` bands, large `bg-glow-primary` blobs)
|
|
|
|
## References
|
|
|
|
- `docs/design-system/gradients.md`
|
|
- `docs/design-system/sections.md`
|
|
- `components/page-atmosphere.tsx`
|