Spacing System Designer Skill
Instructions
- Analyze spacing requirements from task
- Create spacing scale (4px, 8px, 16px base or similar)
- Define spacing tokens for margins, padding, gaps
- Specify spacing usage guidelines
- Consider responsive spacing adjustments
- Return structured spacing system specifications with:
- Spacing scale
- Spacing tokens
- Usage guidelines
- Responsive variations
Examples
Input: "Create spacing system"
Output:
### Spacing System
**Base Unit:** 4px
**Spacing Scale:**
- xs: 4px (0.25rem)
- sm: 8px (0.5rem)
- md: 16px (1rem)
- lg: 24px (1.5rem)
- xl: 32px (2rem)
- 2xl: 48px (3rem)
- 3xl: 64px (4rem)
**Spacing Tokens:**
- `spacing.xs`: 4px - Tight spacing, icon padding
- `spacing.sm`: 8px - Small gaps, compact layouts
- `spacing.md`: 16px - Standard spacing, component padding
- `spacing.lg`: 24px - Section spacing, larger gaps
- `spacing.xl`: 32px - Major section spacing
- `spacing.2xl`: 48px - Page section spacing
- `spacing.3xl`: 64px - Large page sections
**Usage Guidelines:**
- Component padding: md (16px)
- Component margins: lg (24px)
- Section spacing: xl (32px)
- Page margins: 2xl (48px)
- Grid gaps: md (16px)
**Responsive Spacing:**
- Mobile: Reduce spacing by 25% (md becomes 12px)
- Tablet: Standard spacing
- Desktop: Standard spacing
Spacing Types
- Padding: Internal spacing within components
- Margins: External spacing between components
- Gaps: Spacing in grid/flex layouts
- Gutters: Column spacing in grid systems
- Section Spacing: Spacing between major sections
- Component Spacing: Spacing between UI components
Spacing Scale Approaches
- 4px Base: 4, 8, 12, 16, 24, 32, 48, 64px
- 8px Base: 8, 16, 24, 32, 48, 64, 96px
- Fibonacci: 4, 8, 12, 20, 32, 52px
- Custom: Based on design needs
Responsive Considerations
- Mobile: Tighter spacing (reduce by 20-25%)
- Tablet: Standard spacing
- Desktop: Standard or slightly increased spacing
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: spacing-system-designer3description: Creates spacing and sizing systems including margins, padding, gaps, and consistent spacing scales. Defines spacing tokens and usage guidelines for consistent layouts.4---56# Spacing System Designer Skill78## Instructions9101. Analyze spacing requirements from task112. Create spacing scale (4px, 8px, 16px base or similar)123. Define spacing tokens for margins, padding, gaps134. Specify spacing usage guidelines145. Consider responsive spacing adjustments156. Return structured spacing system specifications with:16 - Spacing scale17 - Spacing tokens18 - Usage guidelines19 - Responsive variations2021## Examples2223**Input:** "Create spacing system"24**Output:**25```markdown26### Spacing System2728**Base Unit:** 4px2930**Spacing Scale:**31- xs: 4px (0.25rem)32- sm: 8px (0.5rem)33- md: 16px (1rem)34- lg: 24px (1.5rem)35- xl: 32px (2rem)36- 2xl: 48px (3rem)37- 3xl: 64px (4rem)3839**Spacing Tokens:**40- `spacing.xs`: 4px - Tight spacing, icon padding41- `spacing.sm`: 8px - Small gaps, compact layouts42- `spacing.md`: 16px - Standard spacing, component padding43- `spacing.lg`: 24px - Section spacing, larger gaps44- `spacing.xl`: 32px - Major section spacing45- `spacing.2xl`: 48px - Page section spacing46- `spacing.3xl`: 64px - Large page sections4748**Usage Guidelines:**49- Component padding: md (16px)50- Component margins: lg (24px)51- Section spacing: xl (32px)52- Page margins: 2xl (48px)53- Grid gaps: md (16px)5455**Responsive Spacing:**56- Mobile: Reduce spacing by 25% (md becomes 12px)57- Tablet: Standard spacing58- Desktop: Standard spacing59```6061## Spacing Types6263- **Padding**: Internal spacing within components64- **Margins**: External spacing between components65- **Gaps**: Spacing in grid/flex layouts66- **Gutters**: Column spacing in grid systems67- **Section Spacing**: Spacing between major sections68- **Component Spacing**: Spacing between UI components6970## Spacing Scale Approaches7172- **4px Base**: 4, 8, 12, 16, 24, 32, 48, 64px73- **8px Base**: 8, 16, 24, 32, 48, 64, 96px74- **Fibonacci**: 4, 8, 12, 20, 32, 52px75- **Custom**: Based on design needs7677## Responsive Considerations7879- **Mobile**: Tighter spacing (reduce by 20-25%)80- **Tablet**: Standard spacing81- **Desktop**: Standard or slightly increased spacing8283---84> Converted and distributed by [TomeVault](https://tomevault.io/claim/lexicalninja) — claim your Tome and manage your conversions.85<!-- tomevault:4.0:skill_md:2026-04-15 -->
tomevault-io