Radius

Radius Presets Scale

Preset	Small Control (--radius-lg)	Medium Control (--radius-xl)	Surface Panel (--radius-panel)
None	0px	0px	0px
Small	0.25rem	0.375rem	0.5rem
Medium	0.5rem	0.75rem	1rem
Large	0.75rem	1rem	1.5rem
Full	9999px	9999px	1.5rem

Concentric Radius

Signature Feature

Concentric radius is what makes nested containers in Shavin look optically perfect — every inner curve aligns with its parent's curve as if drawn from the same center point. No manual math, no per-padding radius tokens. Just set radius="concentric" and the design system handles the rest.

The container automatically publishes its inner radius to descendants. Any child with radius="concentric" reads that value and resolves the correct corner — zero configuration, zero runtime measurement. It works through any depth of transparent layout wrappers.

Concentric demo — image aligns to card padding

Image with radius='concentric' inside a Card

<Card padding="md">
  <Image
    src="/photo.jpg"
    alt="Concentric demo"
    ratio="16/9"
    radius="concentric"
  />
</Card>

Nested content

Inner card respects outer card's concentric radius automatically.

Nested Card with radius='concentric' inheritance

<Card padding="lg">
  <Card padding="sm" interactive>
    <Text weight="semibold">Nested content</Text>
    <Text size="sm" color="subtle">
      Inner card respects outer card's
      concentric radius automatically.
    </Text>
  </Card>
</Card>

Flex is transparent — no radius, no background. The image still aligns to the Card's curve.

Concentric through a transparent Flex wrapper

<Card padding="md">
  <Flex direction="col" gap="4">
    <Image
      src="/hero.jpg"
      alt="Concentric through Flex"
      ratio="16/9"
      radius="concentric"
    />
    <Text>Flex is transparent — no
      radius, no background. The image
      still aligns to the Card's curve.
    </Text>
  </Flex>
</Card>

Sharp boundary reset — image aligns to sharp corners

Sharp boundary resets concentric to 0px

<Card padding="md">
  {/* Section with its own background
      but no radius — sharp corners */}
  <div className="bg-surface-hover p-4"
       data-concentric-reset>
    <Image
      src="/photo.jpg"
      alt="Sharp boundary reset"
      ratio="16/9"
      radius="concentric"
    />
  </div>
</Card>

How it works

For container authors

Every Shavin container (Card, Flex translucent, Grid translucent, Box translucent, Section translucent, Calendar, CheckboxCards) automatically publishes its inner radius. No extra props needed — the container's padding is all the system needs.

For content authors

Set radius="concentric" on any Image, nested Card, or element that should align to its container's curve. The element reads the inherited value and resolves the correct corner radius automatically.