Spacing

A 4px grid. Small steps space things inside a component; large steps separate sections. jsonresume.org is generous: when in doubt, add space between sections, not inside them.

Inside and between

Group related things tightly and separate groups generously: the space between groups should always be larger than the space within them.

Cards in a grid

Pro

by JSON Resume Team

serifprint

Even

by JSON Resume Team

serifprint

Flat

by JSON Resume Team

serifprint

Show code

spacing/inside-between.tsx

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardTitle,
  Grid,
  Stack,
  Text,
} from '@jsonresume/ui';

// Tight inside, loose between: 2 (8px) between a title and its meta,
// 4 (16px) inside a card, 6 (24px) between cards.
export default function SpacingInsideBetween() {
  return (
    <Grid minColumnWidth="13rem" gap={6}>
      {['Pro', 'Even', 'Flat'].map((name) => (
        <Card key={name}>
          <CardContent>
            <Stack gap={4}>
              <Stack gap={2}>
                <CardTitle>{name}</CardTitle>
                <Text size="xs" tone="muted">
                  by JSON Resume Team
                </Text>
              </Stack>
              <Stack direction="row" gap={2}>
                <Badge>serif</Badge>
                <Badge>print</Badge>
              </Stack>
              <Button size="sm">Preview</Button>
            </Stack>
          </CardContent>
        </Card>
      ))}
    </Grid>
  );
}

Page rhythm

Sections set the vertical rhythm of a page.

Section spacing

spacing="sm"

spacing="md"

spacing="lg"

spacing/rhythm.tsx

import { Container, Section, Text } from '@jsonresume/ui';

// Section spacing sets page rhythm: sm for dense bands, md by default,
// lg for landing pages, xl for the hero.
export default function SpacingRhythm() {
  return (
    <>
      {(['sm', 'md', 'lg'] as const).map((spacing, i) => (
        <Section
          key={spacing}
          spacing={spacing}
          tone={i % 2 ? 'page' : 'subtle'}
        >
          <Container>
            <Text>spacing=&quot;{spacing}&quot;</Text>
          </Container>
        </Section>
      ))}
    </>
  );
}

Guidelines

Do

Use Stack and Grid gaps instead of margins on children.
Step up the scale as elements get bigger: 2 for labels, 4 inside cards, 6 to 8 between cards, 12 to 16 between sections.

Don’t

Use values off the scale (13px, 18px).
Space groups more tightly than the items inside them.

Scale

Token	Value	Visual
space.0 --jr-space-0	0
space.1 --jr-space-1	0.25rem
space.2 --jr-space-2	0.5rem
space.3 --jr-space-3	0.75rem
space.4 --jr-space-4	1rem
space.5 --jr-space-5	1.25rem
space.6 --jr-space-6	1.5rem
space.8 --jr-space-8	2rem
space.10 --jr-space-10	2.5rem
space.12 --jr-space-12	3rem
space.16 --jr-space-16	4rem
space.20 --jr-space-20	5rem
space.30 --jr-space-30	7.5rem
space.px --jr-space-px	1px