CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

:root {
  /* Component sizes */
  --size-xs: 1.5rem;   /* 24px */
  --size-sm: 2rem;     /* 32px */
  --size-md: 2.5rem;   /* 40px - default */
  --size-lg: 3rem;     /* 48px */
  --size-xl: 3.5rem;   /* 56px */
  --size-2xl: 4rem;    /* 64px */

  /* Border radius scale */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
}