4. Скругления
Flat стиль. Скругление объясняет тип объекта: 0px для column-контейнеров, 4px для controls, 8px для surface, full только для самостоятельных pill / avatar-элементов. Тени не используются.
Наглядные сценарии
Column-контейнеры: секции, обёртки, hero-блоки, full-width панели.
Column / Section
Вложенная карточка (8px)
Ещё одна карточка (8px)
--radius-nonerounded-noneСамый крупный уровень — внутри уже лежат карточки и заголовки. Скругление не нужно.
Мелкие controls: button, input, select, dropdown, badge, tooltip.
Dropdown / Tooltip
Редактировать
--radius-smrounded-smЕсли элемент нажимается или вводит данные, почти всегда это 4px.
Surface-уровень: card, modal, panel, sidebar, toast.
Карточка результата
Контейнер контента, поэтому использует surface-radius 8px.
Toast / Notice
Та же surface-логика.
--radius-lgrounded-lgЕсли элемент является контейнером контента или самостоятельной поверхностью, это 8px.
Только standalone-pill: avatar, counter, isolated accent label.
`full` живёт как отдельный маркер, а не как основной radius контейнера.
--radius-fullrounded-fullНе использовать для основных кнопок, инпутов и карточек — это ломает flat-характер системы.
В этом блоке две отдельные кнопки копирования: одна копирует CSS token, вторая — Tailwind class. Больше нет смешения между визуальным примером и тем, что попадает в буфер.