Spacing & Layout

Spacing controls how far apart elements sit, how much padding containers carry, and how elements group on the page. Consistent spacing separates a polished UI from a chaotic one. The CTD Learns App uses a 4px base unit, so every value is a multiple of 4 (8, 12, 16, 24, 32...). This page also covers border radii, shadows, and breakpoints. Use theme.spacing() or token references. Never hardcode pixel values.

Spacing Tokens

Preview
Token
Value
Usage

24px

tokens.spacing.cardPadding
24px

Internal padding for all cards

268px

tokens.spacing.sidebarWidth
268px

Fixed sidebar width

52px

tokens.spacing.topbarHeight
52px

Top navigation bar height

32px

tokens.spacing.contentPadding
32px

Main content area horizontal padding

Usage
// MUI spacing helper (base unit = 4px):
padding: theme.spacing(3)               // 24px
margin: theme.spacing(2)                 // 16px

// Token references:
padding: tokens.spacing.cardPadding     // 24px
width: tokens.spacing.sidebarWidth      // 268px

Page Layout

Topbar, 52px, logo, breadcrumb, user actions

Sidebar (268px)
Dashboard
Processes
Workflows
Settings
Content area, padding: 32px

Border Radius Scale

Preview
Name
Token
Value
Usage

radiusSm

tokens.shape.radiusSm
4px

Chips, small badges

radiusMd

tokens.shape.radiusMd
8px

Buttons, inputs, small cards

radiusLg

tokens.shape.radiusLg
10px

Cards, panels, modals

radiusXl

tokens.shape.radiusXl
16px

Large surfaces, sheets

radiusFull

tokens.shape.radiusFull
9999px

Pills, avatars, toggles

Usage
// In sx prop:
borderRadius: tokens.shape.radiusMd     // 8px
borderRadius: tokens.shape.radiusLg     // 10px
borderRadius: tokens.shape.radiusFull   // 9999px (pill)

Shadow Scale

Preview
Name
Token
Description
Usage

card

tokens.shadow.card

Subtle, 1px lift

All card components

modal

tokens.shadow.modal

Strong, 10px lift

Dialogs, drawers

dropdown

tokens.shadow.dropdown

Medium, 4px lift

Menus, popovers

Breakpoints

Breakpoints are screen-width thresholds where your layout adapts to the device. The CTD Learns App uses MUI's 5-tier system. All breakpoints are mobile-first. Styles at a given tier apply from that width upward.

xs

0–599px

Phone

sm

600–899px

Phone (wide)

Active
md

900–1199px

Tablet

lg

1200–1535px

Laptop

xl

1536px+

Desktop

Live: The card highlighted above is your current breakpoint. Resize your browser window to see it change.

Choosing the right approach

Use up() (mobile-first)

Start with mobile styles as the default and add desktop styles for larger screens. This is the recommended pattern.

Use down() (desktop-first)

When you hide or override desktop features on smaller screens, e.g. collapsing a sidebar on mobile.

Object syntax in sx prop (most common)
// Hidden on mobile, flex on desktop
sx={{ display: { xs: 'none', md: 'flex' } }}

// Smaller padding on mobile
sx={{ p: { xs: 1, sm: 2, md: 3 } }}

// Responsive grid columns
<Grid size={{ xs: 12, sm: 6, md: 4 }} />
useMediaQuery hook (for conditional logic)
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';

function Component() {
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up('md'));

  return isDesktop ? <DesktopNav /> : <MobileNav />;
}
Styled component syntax
// Mobile-first: apply at md and up
[theme.breakpoints.up('md')]: {
  display: 'flex',
}

// Desktop-first: apply below md (hide on mobile)
[theme.breakpoints.down('md')]: {
  display: 'none',
}

// Range: only between sm and md
[theme.breakpoints.between('sm', 'md')]: {
  padding: '1rem',
}
TypographyButtons