Foundation
Padding
Padding is the internal spacing that separates content from a component's outer boundary. Consistent padding keeps dense product UI readable and gives marketing sections room to breathe. All values sit on the 4px grid defined in DESIGN.md.
Rules
- Use spacing tokens from the 4px grid. Prefer Tailwind utilities (p-4, p-6, px-6) over hard-coded pixel values.
- Cards never touch their edges: 24px internal padding minimum for card shells.
- Product UI defaults to padding-md (24px) for panels. Step down to padding-sm (16px) only in dense lists and tables.
- Marketing cards may scale padding up at md and lg breakpoints (p-7, p-8, p-10).
- Section gutters are managed by Container and Section, not repeated on every child.
- Pair larger padding with larger border radii on marketing surfaces.
Tokens
Semantic padding tokens map to CSS custom properties in globals.css and Tailwind spacing utilities. Use semantic names in documentation; use utilities in code.
padding-xsp-2
Micro gaps, icon insets, compact tag padding, bento cell gaps.
padding-smp-4
Compact data: list rows, dialog body, select items, mobile section gutter (minimum).
padding-mdp-6
Default card padding, widget body, notifications, app content area, desktop gutter (minimum).
padding-lgp-8
Featured marketing cards, testimonial quote blocks, wide blog card text columns.
padding-xlpx-12
Section horizontal gutter (tablet+), tablet section vertical padding.
padding-2xlpy-24
Section vertical padding (desktop), hero vertical padding (large breakpoints).
Usage
Compact data
padding-sm · 16px (p-4)Components in a set that hold distinct information in a small area: table rows, widget list items, sidebar items, badge insets.
px-5 py-3 (20px horizontal, 12px vertical)p-4px-2 py-0.5px-4Variable height content
padding-md · 24px (p-6)Components with varying content amounts: alerts, widgets, cards, popovers. Padding gives copy room to breathe.
p-6px-5 py-4px-5 py-4 / p-5p-6 (24px)Card-based content
padding-md to padding-lg · 24–32pxMarketing cards and editorial blocks. Padding scales up on larger breakpoints when there is more room.
p-6p-7 md:p-9 lg:p-10p-7 md:p-8px-8 pt-8 md:px-10 md:pt-10Examples
Open items2
AGM minutes due
Harbour View · 3 days
Levy notice batch
Riverside Towers · 5 days
List rows use px-5 py-3. Header and footer use px-5 with py-4 / py-3.
AGM date not confirmed
Featured
Scheme onboarding
Card shell uses p-6 (24px) on all sides.
Everything in one place
Wide marketing cards scale from p-6 (24px) to p-8 (32px) at md breakpoint.
Page & Section Layout
Full-bleed sections manage vertical rhythm. Container constrains horizontal width and applies the site gutter. Do not add duplicate horizontal padding on children inside a contained section.
Container gutter
Section and site-header horizontal inset
Section vertical (sm)
Compact bands, FAQ, tight sections
Section vertical (md)
Default marketing section rhythm
Section vertical (lg)
Hero-adjacent, feature showcases
Footer
Dark section with link columns
Section with contained=true
Horizontal gutter comes from Container (px-6 md:px-12). Vertical padding from Section spacing prop (py-12 md:py-16 for sm).
Full Spacing Scale
Padding tokens are a subset of the base spacing scale. Gaps between elements use the same values.