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>
44 lines
1.9 KiB
Plaintext
44 lines
1.9 KiB
Plaintext
---
|
|
description: UI design consistency — spacing, components, motion, gradients, visual hierarchy
|
|
globs: app/**/*.tsx,components/**/*.tsx
|
|
alwaysApply: false
|
|
---
|
|
|
|
# UI Design Rules (Amin Rayan)
|
|
|
|
Enforce visual consistency with `docs/design-system/`. Do not redesign the brand; extend existing patterns.
|
|
|
|
## Always
|
|
|
|
- Use the shared spacing scale only (`p/m/gap` 1,2,3,4,5,6,8,10,12,16,20,24).
|
|
- Use section backgrounds from the system (`bg-section-canvas`, `bg-section-muted`, `bg-gradient-hero`, `bg-gradient-cta`, `bg-gradient-featured`).
|
|
- Keep one job per section: one headline + short support + one CTA group.
|
|
- Reuse `Button` variants (`default`, `secondary`/`outline`, `ghost`) and sizes (`sm`, `default`, `lg`, `icon*`).
|
|
- Reuse `Card` for interactive/grouped panels — not as decorative wrappers for every block.
|
|
- Match hover and transition norms: UI `duration-200`, chrome `duration-300`, reveals `~500ms`.
|
|
- Prefer `transform` + `opacity` for motion (`MotionReveal` / existing motion helpers).
|
|
- Keep decorative glows inside `.section-decor` with low opacity.
|
|
|
|
## Never
|
|
|
|
- Invent arbitrary spacing, typography stacks, or shadow recipes.
|
|
- Place cards in the hero or wrap the entire page in cards.
|
|
- Add disconnected gradient patches or non-brand purple/indigo gradients.
|
|
- Overuse glassmorphism (reserve for header/menus/sheets).
|
|
- Animate layout width/height/top/left when transform works.
|
|
- Add floating badges/stickers on hero media.
|
|
- Create inconsistent button styles or rounded-full CTA capsules that ignore `--btn-radius`.
|
|
|
|
## Hierarchy reminder
|
|
|
|
Brand and section titles use `type.display` / `type.h1` / `type.h2`. Body uses `type.body` / `type["section-intro"]`. Do not freestyle `text-[15px]` or foreign font families.
|
|
|
|
## References
|
|
|
|
- `docs/design-system/sections.md`
|
|
- `docs/design-system/buttons.md`
|
|
- `docs/design-system/cards.md`
|
|
- `docs/design-system/motion.md`
|
|
- `docs/design-system/gradients.md`
|
|
- `docs/design-system/glassmorphism.md`
|