Aksel Spacing Skill

Aksel Spacing Skill

This skill provides responsive layout patterns using Nav Aksel Design System spacing tokens.

Critical Rule

NEVER use Tailwind padding/​margin utilities (p-, m-, px-, py-) with Aksel components.

Always use Aksel spacing tokens: space-4, space-6, space-8, etc.

Page Container Pattern

import { Box, VStack } from '@navikt/​ds-react';

export default function Page() {
  return (
    <main className="max-w-7xl mx-auto">
      <Box
        paddingBlock={{ xs: 'space-8', md: 'space-12' }}
        paddingInline={{ xs: 'space-4', md: 'space-10' }}
      >
        <VStack gap={{ xs: 'space-6', md: 'space-8' }}>
          {/​* Page content */​}
        </​VStack>
      </​Box>
    </​main>
  );
}

Card Pattern

import { Box, VStack, Heading, BodyShort } from '@navikt/​ds-react';

export function Card({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <Box
      background="surface-default"
      padding={{ xs: 'space-6', md: 'space-8' }}
      borderRadius="large"
      borderWidth="1"
      borderColor="border-subtle"
    >
      <VStack gap="space-4">
        <Heading size="medium">{title}</​Heading>
        <BodyShort>{children}</​BodyShort>
      </​VStack>
    </​Box>
  );
}

Form Layout Pattern

import { VStack, HStack, TextField, Button } from '@navikt/​ds-react';

export function UserForm() {
  return (
    <VStack gap="space-6">
      {/​* Input fields with consistent vertical spacing */​}
      <VStack gap="space-4">
        <TextField label="First Name" />
        <TextField label="Last Name" />
        <TextField label="Email" type="email" />
      </​VStack>

      {/​* Button group with horizontal spacing */​}
      <HStack gap="space-4" justify="end">
        <Button variant="secondary">Cancel</​Button>
        <Button variant="primary">Submit</​Button>
      </​HStack>
    </​VStack>
  );
}

Dashboard Grid Pattern

import { HGrid, Box, VStack, Heading } from '@navikt/​ds-react';

export function Dashboard() {
  return (
    <VStack gap={{ xs: 'space-6', md: 'space-8' }}>
      <Heading size="xlarge">Dashboard</​Heading>

      {/​* Responsive grid: 1 col mobile, 2 tablet, 4 desktop */​}
      <HGrid gap="space-4" columns={{ xs: 1, sm: 2, lg: 4 }}>
        <MetricCard title="Users" value="1 234" />
        <MetricCard title="Revenue" value="5 678" />
        <MetricCard title="Orders" value="910" />
        <MetricCard title="Growth" value="+12%" />
      </​HGrid>

      {/​* Content area */​}
      <Box
        background="surface-subtle"
        padding={{ xs: 'space-6', md: 'space-8' }}
        borderRadius="large"
      >
        {/​* Content */​}
      </​Box>
    </​VStack>
  );
}

Two-Column Layout Pattern

import { HGrid, Box, VStack } from '@navikt/​ds-react';

export function TwoColumnLayout() {
  return (
    <HGrid gap="space-6" columns={{ xs: 1, md: 2 }}>
      {/​* Left column */​}
      <Box
        background="surface-default"
        padding={{ xs: 'space-6', md: 'space-8' }}
        borderRadius="large"
      >
        <VStack gap="space-4">
          {/​* Left content */​}
        </​VStack>
      </​Box>

      {/​* Right column */​}
      <Box
        background="surface-subtle"
        padding={{ xs: 'space-6', md: 'space-8' }}
        borderRadius="large"
      >
        <VStack gap="space-4">
          {/​* Right content */​}
        </​VStack>
      </​Box>
    </​HGrid>
  );
}

Filter Section Pattern

import { Box, VStack, HGrid, Select, TextField, Heading } from '@navikt/​ds-react';

export function FilterSection() {
  return (
    <Box
      background="surface-subtle"
      padding={{ xs: 'space-4', md: 'space-6' }}
      borderRadius="large"
    >
      <VStack gap="space-4">
        <Heading size="small">Filters</​Heading>

        {/​* Responsive filter inputs */​}
        <HGrid gap="space-4" columns={{ xs: 1, md: 3 }}>
          <Select label="Department">
            <option>All</​option>
          </​Select>

          <Select label="Status">
            <option>All</​option>
          </​Select>

          <TextField label="Search" />
        </​HGrid>
      </​VStack>
    </​Box>
  );
}

Spacing Tokens Reference

"space-0"; // 0px
"space-1"; // 4px
"space-2"; // 8px
"space-3"; // 12px
"space-4"; // 16px  ← Form field gaps
"space-5"; // 20px
"space-6"; // 24px  ← Card padding (mobile)
"space-8"; // 32px  ← Card padding (desktop), section gaps
"space-10"; // 40px  ← Page padding (desktop)
"space-12"; // 48px  ← Page padding block (desktop)

Responsive Breakpoints

xs: "0px"; // Mobile (default)
sm: "480px"; // Large mobile
md: "768px"; // Tablet
lg: "1024px"; // Desktop
xl: "1280px"; // Large desktop

Common Patterns

// ✅ Page padding
paddingBlock={{ xs: 'space-8', md: 'space-12' }}
paddingInline={{ xs: 'space-4', md: 'space-10' }}

// ✅ Card padding
padding={{ xs: 'space-6', md: 'space-8' }}

// ✅ Section gaps
gap={{ xs: 'space-6', md: 'space-8' }}

// ✅ Form field gaps
gap="space-4"

// ✅ Button group gaps
gap="space-4"

// ❌ NEVER use Tailwind
className="p-4 m-2"  // WRONG!
className="px-6 py-4"  // WRONG!