Дизайн-токены

Цветовые палитры

Каждая палитра — лестница 50 → 900. 50–200 для поверхностей, 300–500 для акцентов, 600–900 для текста и фокуса.

Типографика

Шкала размеров, насыщенностей, межстрочного и межбуквенного расстояний. Компоненты используют те же строковые токены.

Размер шрифта

• text.xs

  The quick brown fox

  0.75rem
• text.sm

  The quick brown fox

  0.875rem
• text.base

  The quick brown fox

  1rem
• text.lg

  The quick brown fox

  1.125rem
• text.xl

  The quick brown fox

  1.25rem
• text.2xl

  The quick brown fox

  1.5rem
• text.3xl

  The quick brown fox

  1.875rem
• text.4xl

  The quick brown fox

  2.25rem
• text.5xl

  The quick brown fox

  3rem

Насыщенность

• fontWeight.thin

  Aa Bb Cc 123

  100
• fontWeight.extralight

  Aa Bb Cc 123

  200
• fontWeight.light

  Aa Bb Cc 123

  300
• fontWeight.regular

  Aa Bb Cc 123

  400
• fontWeight.medium

  Aa Bb Cc 123

  500
• fontWeight.semibold

  Aa Bb Cc 123

  600
• fontWeight.bold

  Aa Bb Cc 123

  700
• fontWeight.extrabold

  Aa Bb Cc 123

  800
• fontWeight.black

  Aa Bb Cc 123

  900

Межстрочный интервал

• lineHeight.none

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit fringilla, dictum lorem at, sollicitudin lectus.

  1
• lineHeight.tight

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit fringilla, dictum lorem at, sollicitudin lectus.

  1.15
• lineHeight.snug

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit fringilla, dictum lorem at, sollicitudin lectus.

  1.3
• lineHeight.normal

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit fringilla, dictum lorem at, sollicitudin lectus.

  1.5
• lineHeight.relaxed

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit fringilla, dictum lorem at, sollicitudin lectus.

  1.65
• lineHeight.loose

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit fringilla, dictum lorem at, sollicitudin lectus.

  1.85

Межбуквенный интервал

• letterSpacing.tighter

  KOVAX REACT

  -0.04em
• letterSpacing.tight

  KOVAX REACT

  -0.02em
• letterSpacing.normal

  KOVAX REACT

  0em
• letterSpacing.wide

  KOVAX REACT

  0.02em
• letterSpacing.wider

  KOVAX REACT

  0.04em
• letterSpacing.widest

  KOVAX REACT

  0.08em

Шкала отступов

Ритм отступов и контейнеров. Полоски показывают реальную ширину в rem — 5xl при стандартном root равен 96 px.

• spacing.none0rem
• spacing.2xs0.25rem
• spacing.xs0.5rem
• spacing.sm0.75rem
• spacing.md1rem
• spacing.lg1.5rem
• spacing.xl2rem
• spacing.2xl2.5rem
• spacing.3xl3rem
• spacing.4xl4rem
• spacing.5xl6rem

Скругления

Сочетайте мелкие радиусы для плотного UI и крупные — для карточек и маркетинговых поверхностей.

• borderRadius.none0
• borderRadius.xs0.25rem
• borderRadius.sm0.375rem
• borderRadius.md0.5rem
• borderRadius.lg0.75rem
• borderRadius.xl1rem
• borderRadius.2xl1.25rem
• borderRadius.3xl1.5rem
• borderRadius.full9999px

Тени

Иерархия теней плюс утилитарные: внутренняя для углублённых поверхностей и focus-ring для доступности.

• shadow.nonenone
• shadow.xs0 1px 1px 0 rgb(0 0 0 / 0.04)
• shadow.sm0 1px 2px 0 rgb(0 0 0 / 0.05)
• shadow.md0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
• shadow.lg0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
• shadow.xl0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
• shadow.2xl0 25px 50px -12px rgb(0 0 0 / 0.25)
• shadow.innerinset 0 2px 4px 0 rgb(0 0 0 / 0.06)
• shadow.focusRing0 0 0 3px rgb(59 130 246 / 0.35)

Анимации

Сочетайте токены длительности и кривой ускорения. Старые композитные <code>transition.*</code> сохранены для совместимости.

Длительность

• duration.instant · easing.standard
  0ms · cubic-bezier(0.2, 0, 0, 1)
• duration.fast · easing.standard
  120ms · cubic-bezier(0.2, 0, 0, 1)
• duration.normal · easing.standard
  200ms · cubic-bezier(0.2, 0, 0, 1)
• duration.slow · easing.standard
  320ms · cubic-bezier(0.2, 0, 0, 1)
• duration.slower · easing.standard
  500ms · cubic-bezier(0.2, 0, 0, 1)

Кривая ускорения

• duration.slow · easing.linear
  320ms · linear
• duration.slow · easing.standard
  320ms · cubic-bezier(0.2, 0, 0, 1)
• duration.slow · easing.decelerate
  320ms · cubic-bezier(0, 0, 0.2, 1)
• duration.slow · easing.accelerate
  320ms · cubic-bezier(0.4, 0, 1, 1)
• duration.slow · easing.bounce
  320ms · cubic-bezier(0.34, 1.56, 0.64, 1)

Старые composite transitions

• transition.defaultall 0.2s ease-in-out
• transition.fastall 0.1s ease-in-out
• transition.slowall 0.3s ease-in-out

Z-index

Предсказуемое наложение слоёв. Чем выше значение, тем выше элемент.

Брейкпоинты

Брейкпоинты в em — растут вместе с базовым размером шрифта пользователя для лучшей доступности.