monadical/greyhaven-design-system
14
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

design system token v0.5

Browse Source
This commit is contained in:
Juan
2026-04-16 10:58:11 -05:00
parent c4cc5a78b9
commit b8168261a1
7 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
skill/SKILL.md
View File

@@ -197,7 +197,7 @@ Source of truth: `tokens/*.json` (W3C DTCG format).
| `spacing.1.5` | `0.375rem` | 6px |
| `spacing.component.card-padding` | `1.5rem` | Card internal padding (px-6) |
| `spacing.component.card-gap` | `1.5rem` | Gap between cards (gap-6) |
| `spacing.component.section-padding` | `4rem` | Vertical padding between major sections (py-16) |
| `spacing.component.section-padding` | `2.5rem` | Vertical padding inside sections (py-10) |
| `spacing.component.form-gap` | `1rem` | Gap between form fields (gap-4) |
| `spacing.component.button-padding-x` | `1rem` | Button horizontal padding (px-4) |
| `spacing.component.navbar-height` | `4rem` | Navbar height (h-16) |
@@ -598,7 +598,7 @@ All components live in `components/ui/`. Import with `@/components/ui/<name>`.
#### Section
- **File**: `components/ui/section.tsx`
- **Exports**: `Section`, `sectionVariants`
- **Description**: Titled content section with spacing. py-16 between sections.
- **Description**: Titled content section with spacing. py-10 internal padding. Colored variants (highlighted, accent) get my-8 vertical margin so they visually detach from adjacent sections; default has no margin so same-bg siblings flow seamlessly.
- **Props**: `variant?: "default" | "highlighted" | "accent"; width?: "narrow" | "default" | "wide" | "full"; title?: string; description?: string`
- **Example**:
```tsx
@@ -630,7 +630,7 @@ All components live in `components/ui/`. Import with `@/components/ui/<name>`.
## Composition Rules
- **Card spacing**: `gap-6` between cards, `p-6` internal padding
- **Section rhythm**: `py-16` between major page sections
- **Section rhythm**: `py-10` internal padding per section. Colored sections add `my-8` to detach from neighbors
- **Button placement**: Primary action right, secondary left
- **Form layout**: Vertical stack with `gap-4`, labels above inputs
- **Navbar**: Fixed top, `z-50`, `h-16`, logo left, nav center, actions right