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>
71 lines
2.4 KiB
Markdown
71 lines
2.4 KiB
Markdown
# Spacing
|
|
|
|
All spacing must come from the scale below. Arbitrary values (`p-[13px]`, `mt-[22px]`, `gap-[0.9rem]`) are forbidden unless fixing a temporary third-party bug—and must be replaced before merge.
|
|
|
|
## Scale (px)
|
|
|
|
| Token | px | Rem | Tailwind |
|
|
| --- | --- | --- | --- |
|
|
| 1 | 4 | 0.25 | `1` |
|
|
| 2 | 8 | 0.5 | `2` |
|
|
| 3 | 12 | 0.75 | `3` |
|
|
| 4 | 16 | 1 | `4` |
|
|
| 5 | 20 | 1.25 | `5` |
|
|
| 6 | 24 | 1.5 | `6` |
|
|
| 8 | 32 | 2 | `8` |
|
|
| 10 | 40 | 2.5 | `10` |
|
|
| 12 | 48 | 3 | `12` |
|
|
| 16 | 64 | 4 | `16` |
|
|
| 20 | 80 | 5 | `20` |
|
|
| 24 | 96 | 6 | `24` |
|
|
|
|
Use as `p-4`, `gap-6`, `mt-8`, `space-y-4`, etc.
|
|
|
|
## Layout-level spacing
|
|
|
|
| Role | Token / class | Notes |
|
|
| --- | --- | --- |
|
|
| Container gutter | `px-6` (24) | Via `layout.container` only |
|
|
| Section Y (mobile) | `py-16` (64) | `layout.sectionY` — adjacent gap = 8rem |
|
|
| Section Y (md+) | `md:py-20` (80) | `layout.sectionY` — adjacent gap = 10rem |
|
|
| Header clearance | `pt-28` / `md:pt-32` | `layout.sectionTopWithHeader` |
|
|
| Scroll margin | `scroll-mt-24` (96) | Anchors under fixed header |
|
|
|
|
## Typography-linked spacing
|
|
|
|
From `lib/typography.ts` → `typeSpacing`:
|
|
|
|
| Token | Class | Use |
|
|
| --- | --- | --- |
|
|
| `eyebrowToHeading` | `mt-2` | Eyebrow → title |
|
|
| `headingToBody` | `mt-3` | Title → body |
|
|
| `sectionStack` | `space-y-4` | Section intro stack |
|
|
| `heroStack` | `space-y-6` | Hero copy stack |
|
|
| `cardStack` | `gap-1.5` | Card title → description |
|
|
| `paragraphStack` | `space-y-4` | Stacked paragraphs |
|
|
| `labelToControl` | `gap-1.5` | Label → input |
|
|
|
|
Prefer `typeSpacing.*` over reinventing the same stacks.
|
|
|
|
## Component spacing norms
|
|
|
|
| Component | Internal spacing |
|
|
| --- | --- |
|
|
| Card | `gap-6`, horizontal `px-6`, vertical `py-6` |
|
|
| Button | Tokenized via `--btn-px-*` / `--btn-gap-*` — do not override casually |
|
|
| Field groups | `gap-7` between fields; `gap-3` for checkbox/radio groups |
|
|
| Footer blocks | `mb-14`, `pb-14`, column `gap-10` |
|
|
|
|
## Rules
|
|
|
|
1. Never invent spacing outside the scale.
|
|
2. Prefer consistency with nearest sibling sections over “optical” one-off tweaks.
|
|
3. Vertical rhythm between major sections comes from `layout.sectionY` alone — do not add extra section margins that change the shared gap.
|
|
4. Icon-to-label gaps inside buttons use button tokens; elsewhere prefer `gap-2` / `gap-3`.
|
|
|
|
## Related
|
|
|
|
- [layout.md](./layout.md)
|
|
- [typography.md](./typography.md)
|
|
- [coding-rules.md](./coding-rules.md)
|