Menu
Esc
DocsGitHub TR

Foundations

Spacing

Spacing scale, semantic spacing and the layout density scale (Comfort / Narrow).

Device
Density

Spacing 8

TokenValuePreview
--layout-default
04 Layout / layout-default
  • Comfort 16px
  • Narrow 14px
--layout-huge
04 Layout / layout-huge
  • Comfort 32px
  • Narrow 28px
--layout-large
04 Layout / layout-large
  • Comfort 20px
  • Narrow 18px
--layout-micro
04 Layout / layout-micro
  • Comfort 4px
  • Narrow 2px
--layout-none
04 Layout / layout-none
0px
--layout-small
04 Layout / layout-small
  • Comfort 12px
  • Narrow 10px
--layout-tiny
04 Layout / layout-tiny
  • Comfort 8px
  • Narrow 6px
--layout-xlarge
04 Layout / layout-xlarge
  • Comfort 24px
  • Narrow 20px

design-tokens 9

TokenValuePreview
--space-atom
03 Token / design-tokens/s-atom
2px
--space-large
03 Token / design-tokens/s-large
20px
--space-medium
03 Token / design-tokens/s-medium
16px
--space-micro
03 Token / design-tokens/s-micro
4px
--space-none
03 Token / design-tokens/s-none
0px
--space-small
03 Token / design-tokens/s-small
12px
--space-tiny
03 Token / design-tokens/s-tiny
8px
--space-xlarge
03 Token / design-tokens/s-xlarge
24px
--space-xxlarge
03 Token / design-tokens/s-xxlarge
32px

spacing 10

TokenValuePreview
--space-card
03 Token / design-tokens/spacing/s-card
  • Desktop var(--space-medium)
  • Tablet 16px
  • Mobile var(--space-medium)
--space-card-v-gutter
03 Token / design-tokens/spacing/s-card-v-gutter
2 section arasında kullanılır
var(--space-xxlarge)
--space-container
03 Token / design-tokens/spacing/s-container
  • Desktop var(--layout-huge)
  • Tablet var(--layout-huge)
  • Mobile var(--layout-xlarge)
--space-form-button-top
03 Token / design-tokens/spacing/s-form-button-top
formun cta buttonlarının formdan ayrışması için kullanılır
  • Desktop var(--space-xxlarge)
  • Tablet 32px
  • Mobile var(--space-xxlarge)
--space-form-dropdown-top
03 Token / design-tokens/spacing/s-form-dropdown-top
dropdown ile açılan her bileşenin form elementine uzaklığını temsil eder. Ör; Select altında açılan dropdown ile arasında gap değeri
var(--space-micro)
--space-form-gutter
03 Token / design-tokens/spacing/s-form-gutter
form elementleri arasında kullanılır
  • Desktop var(--space-medium)
  • Tablet 16px
  • Mobile var(--space-medium)
--space-form-ingroup-gutter
03 Token / design-tokens/spacing/s-form-ingroup-gutter
form elementleri içinde kullanılır.
  • Desktop var(--space-tiny)
  • Tablet 8px
  • Mobile var(--space-tiny)
--space-landing-section-v-gutter
03 Token / design-tokens/spacing/s-landing-section-v-gutter
2 section arasında kullanılır
  • Desktop 96px
  • Tablet 56px
  • Mobile 56px
--space-modal
03 Token / design-tokens/spacing/s-modal
  • Desktop var(--space-xlarge)
  • Tablet 24px
  • Mobile var(--space-xlarge)
--space-modal-horizontal
03 Token / design-tokens/spacing/s-modal-horizontal
  • Desktop var(--space-medium)
  • Tablet 16px
  • Mobile var(--space-medium)