---
title: "Effects and radii"
description: "Shadow effect styles, the radius scale and the component radius tokens."
requested_language: fr
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/fr/next/reference/tokens/effects
version: unreleased (main)
docs_index: https://docs.systhema.app/fr/next/llms.txt
---
> This page isn't translated yet. Showing English.


<!-- generated by pnpm docs:generate; do not edit -->

## Shadows

The effect styles in the Figma file, one row per style with its layers in Figma's order (`x y blur spread color`). They mirror Tailwind's shadow utilities, so in code use the utility of the same name (`shadow-md`, `inset-shadow-sm`, `drop-shadow-lg`, `text-shadow-xs`).

| Style              | Layers                                                                |
| ------------------ | --------------------------------------------------------------------- |
| `shadow-2xs`       | `0 1px 0 0 #0000000d`                                                 |
| `shadow-xs`        | `0 1px 2px 0 #0000000d`                                               |
| `shadow-sm`        | `0 1px 2px -1px #0000001a, 0 1px 3px 0 #0000001a`                     |
| `shadow-md`        | `0 2px 4px -2px #0000001a, 0 4px 6px -1px #0000001a`                  |
| `shadow-lg`        | `0 4px 6px -4px #0000001a, 0 10px 15px -3px #0000001a`                |
| `shadow-xl`        | `0 8px 10px -6px #0000001a, 0 20px 25px -5px #0000001a`               |
| `shadow-2xl`       | `0 25px 50px -12px #00000040`                                         |
| `inset-shadow-2xs` | `inset 0 1px 0 0 #0000000d`                                           |
| `inset-shadow-xs`  | `inset 0 1px 1px 0 #0000000d`                                         |
| `inset-shadow-sm`  | `inset 0 2px 4px 0 #0000000d`                                         |
| `shadow-none`      | `0 0 0 0 #00000000`                                                   |
| `drop-shadow-xs`   | `0 1px 1px 0 #0000000d`                                               |
| `drop-shadow-sm`   | `0 1px 2px 0 #00000026`                                               |
| `drop-shadow-md`   | `0 3px 3px 0 #0000001f`                                               |
| `drop-shadow-lg`   | `0 4px 4px 0 #00000026`                                               |
| `drop-shadow-xl`   | `0 9px 7px 0 #0000001a`                                               |
| `drop-shadow-2xl`  | `0 25px 25px 0 #00000026`                                             |
| `text-shadow-2xs`  | `0 1px 0 0 #00000026`                                                 |
| `text-shadow-xs`   | `0 1px 1px 0 #00000033`                                               |
| `text-shadow-sm`   | `0 2px 2px 0 #00000013, 0 1px 1px 0 #00000013, 0 1px 1px 0 #00000013` |
| `text-shadow-md`   | `0 2px 4px 0 #0000001a, 0 1px 2px 0 #0000001a, 0 1px 1px 0 #0000001a` |
| `text-shadow-lg`   | `0 4px 8px 0 #0000001a, 0 3px 2px 0 #0000001a, 0 1px 2px 0 #0000001a` |

## Radius scale

Systhema sets Tailwind's radius scale in px. These values back the `rounded-*` utilities.

| Class         | Value  |
| ------------- | ------ |
| `rounded-xs`  | `2px`  |
| `rounded-sm`  | `4px`  |
| `rounded-md`  | `6px`  |
| `rounded-lg`  | `8px`  |
| `rounded-xl`  | `12px` |
| `rounded-2xl` | `16px` |
| `rounded-3xl` | `24px` |
| `rounded-4xl` | `32px` |

## Component radii

Radius tokens that components read. Override them per project with `customTokens.responsiveSizing`.

| Token                                            | CSS variable                                         | sm       | md       | lg       |
| ------------------------------------------------ | ---------------------------------------------------- | -------- | -------- | -------- |
| `header.navigation.item.borderRadius`            | `--header-navigation-item-border-radius`             | `4px`    | `4px`    | `4px`    |
| `header.navigation.menuToggle.borderRadius`      | `--header-navigation-menu-toggle-border-radius`      | `4px`    | `4px`    | `4px`    |
| `header.subNavigation.borderRadius`              | `--header-sub-navigation-border-radius`              | `8px`    | `8px`    | `8px`    |
| `header.menu.subNavigation.borderRadius`         | `--header-menu-sub-navigation-border-radius`         | `0px`    | `0px`    | `0px`    |
| `gallery.navigation.button.borderRadius`         | `--gallery-navigation-button-border-radius`          | `6px`    | `6px`    | `6px`    |
| `icon.hasBackgroundBorderRadius`                 | `--icon-has-background-border-radius`                | `4px`    | `4px`    | `4px`    |
| `media.borderRadius`                             | `--media-border-radius`                              | `12px`   | `12px`   | `12px`   |
| `carousel.wrapper.borderRadius`                  | `--carousel-wrapper-border-radius`                   | `12px`   | `12px`   | `12px`   |
| `carousel.wrapper.pagination.bulletBorderRadius` | `--carousel-wrapper-pagination-bullet-border-radius` | `9999px` | `9999px` | `9999px` |
| `carousel.wrapper.button.borderRadius`           | `--carousel-wrapper-button-border-radius`            | `0px`    | `0px`    | `0px`    |
| `carousel.thumbs.borderRadius`                   | `--carousel-thumbs-border-radius`                    | `12px`   | `12px`   | `12px`   |
| `carousel.bottom.button.borderRadius`            | `--carousel-bottom-button-border-radius`             | `6px`    | `6px`    | `6px`    |
| `avatar.borderRadius`                            | `--avatar-border-radius`                             | `9999px` | `9999px` | `9999px` |
| `button.primary.borderRadius`                    | `--button-primary-border-radius`                     | `6px`    | `6px`    | `6px`    |
| `button.secondary.borderRadius`                  | `--button-secondary-border-radius`                   | `6px`    | `6px`    | `6px`    |
| `chip.borderRadius`                              | `--chip-border-radius`                               | `3px`    | `3px`    | `3px`    |
| `card.default.borderRadius`                      | `--card-default-border-radius`                       | `8px`    | `12px`   | `12px`   |
| `card.highlighted.borderRadius`                  | `--card-highlighted-border-radius`                   | `8px`    | `12px`   | `12px`   |
| `accordion.default.borderRadius`                 | `--accordion-default-border-radius`                  | `8px`    | `12px`   | `12px`   |
| `quote.avatarBorderRadius`                       | `--quote-avatar-border-radius`                       | `9999px` | `9999px` | `9999px` |
| `form.inputBlock.borderRadius`                   | `--form-input-block-border-radius`                   | `10px`   | `10px`   | `10px`   |
| `form.inputInline.checkboxBorderRadius`          | `--form-input-inline-checkbox-border-radius`         | `4px`    | `4px`    | `4px`    |
| `cookieConsent.surface.borderRadius`             | `--cookie-consent-surface-border-radius`             | `8px`    | `12px`   | `12px`   |
| `cookieConsent.button.primary.borderRadius`      | `--cookie-consent-button-primary-border-radius`      | `6px`    | `6px`    | `6px`    |
| `cookieConsent.button.secondary.borderRadius`    | `--cookie-consent-button-secondary-border-radius`    | `6px`    | `6px`    | `6px`    |
| `cookieConsent.category.borderRadius`            | `--cookie-consent-category-border-radius`            | `8px`    | `12px`   | `12px`   |
| `cookieConsent.toggle.borderRadius`              | `--cookie-consent-toggle-border-radius`              | `64px`   | `64px`   | `64px`   |