Docs

This page isn't translated yet

next

Effects and radii

Shadow effect styles, the radius scale and the component radius tokens.

On this page

ShadowsLink to this section

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).

StyleLayers
shadow-2xs0 1px 0 0 #0000000d
shadow-xs0 1px 2px 0 #0000000d
shadow-sm0 1px 2px -1px #0000001a, 0 1px 3px 0 #0000001a
shadow-md0 2px 4px -2px #0000001a, 0 4px 6px -1px #0000001a
shadow-lg0 4px 6px -4px #0000001a, 0 10px 15px -3px #0000001a
shadow-xl0 8px 10px -6px #0000001a, 0 20px 25px -5px #0000001a
shadow-2xl0 25px 50px -12px #00000040
inset-shadow-2xsinset 0 1px 0 0 #0000000d
inset-shadow-xsinset 0 1px 1px 0 #0000000d
inset-shadow-sminset 0 2px 4px 0 #0000000d
shadow-none0 0 0 0 #00000000
drop-shadow-xs0 1px 1px 0 #0000000d
drop-shadow-sm0 1px 2px 0 #00000026
drop-shadow-md0 3px 3px 0 #0000001f
drop-shadow-lg0 4px 4px 0 #00000026
drop-shadow-xl0 9px 7px 0 #0000001a
drop-shadow-2xl0 25px 25px 0 #00000026
text-shadow-2xs0 1px 0 0 #00000026
text-shadow-xs0 1px 1px 0 #00000033
text-shadow-sm0 2px 2px 0 #00000013, 0 1px 1px 0 #00000013, 0 1px 1px 0 #00000013
text-shadow-md0 2px 4px 0 #0000001a, 0 1px 2px 0 #0000001a, 0 1px 1px 0 #0000001a
text-shadow-lg0 4px 8px 0 #0000001a, 0 3px 2px 0 #0000001a, 0 1px 2px 0 #0000001a

Radius scaleLink to this section

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

ClassValue
rounded-xs2px
rounded-sm4px
rounded-md6px
rounded-lg8px
rounded-xl12px
rounded-2xl16px
rounded-3xl24px
rounded-4xl32px

Component radiiLink to this section

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

TokenCSS variablesmmdlg
header.navigation.item.borderRadius--header-navigation-item-border-radius4px4px4px
header.navigation.menuToggle.borderRadius--header-navigation-menu-toggle-border-radius4px4px4px
header.subNavigation.borderRadius--header-sub-navigation-border-radius8px8px8px
header.menu.subNavigation.borderRadius--header-menu-sub-navigation-border-radius0px0px0px
gallery.navigation.button.borderRadius--gallery-navigation-button-border-radius6px6px6px
icon.hasBackgroundBorderRadius--icon-has-background-border-radius4px4px4px
media.borderRadius--media-border-radius12px12px12px
carousel.wrapper.borderRadius--carousel-wrapper-border-radius12px12px12px
carousel.wrapper.pagination.bulletBorderRadius--carousel-wrapper-pagination-bullet-border-radius9999px9999px9999px
carousel.wrapper.button.borderRadius--carousel-wrapper-button-border-radius0px0px0px
carousel.thumbs.borderRadius--carousel-thumbs-border-radius12px12px12px
carousel.bottom.button.borderRadius--carousel-bottom-button-border-radius6px6px6px
avatar.borderRadius--avatar-border-radius9999px9999px9999px
button.primary.borderRadius--button-primary-border-radius6px6px6px
button.secondary.borderRadius--button-secondary-border-radius6px6px6px
chip.borderRadius--chip-border-radius3px3px3px
card.default.borderRadius--card-default-border-radius8px12px12px
card.highlighted.borderRadius--card-highlighted-border-radius8px12px12px
accordion.default.borderRadius--accordion-default-border-radius8px12px12px
quote.avatarBorderRadius--quote-avatar-border-radius9999px9999px9999px
form.inputBlock.borderRadius--form-input-block-border-radius10px10px10px
form.inputInline.checkboxBorderRadius--form-input-inline-checkbox-border-radius4px4px4px
cookieConsent.surface.borderRadius--cookie-consent-surface-border-radius8px12px12px
cookieConsent.button.primary.borderRadius--cookie-consent-button-primary-border-radius6px6px6px
cookieConsent.button.secondary.borderRadius--cookie-consent-button-secondary-border-radius6px6px6px
cookieConsent.category.borderRadius--cookie-consent-category-border-radius8px12px12px
cookieConsent.toggle.borderRadius--cookie-consent-toggle-border-radius64px64px64px