Logo
Logo держит фирменный знак в интерфейсе: марку в шапке оболочки, подпись бренда в футере или на титульном экране. Вектор один — цвета букв и штриховки задаёт скин через токены --c-logo-*, размер выбирает ось size. Без label марка декоративна, с label получает role="img" и доступное имя.
Статус: draft · в системе с 2026-08 · интерактивность: none (нет)
Когда использовать
- Фирменный знак в шапке продуктовой оболочки: марка слева от навигации.
- Подпись бренда на титульном или входном экране, в футере.
- Выворотка знака на тёмном хроме:
variant=inverseвместо перекраски вручную.
Не использовать:
- Идентичность пользователя или аккаунта — это Avatar с генеративным персонажем по
id. - Произвольная декоративная графика или иллюстрация — это не бренд-марка.
Альтернативы:
Варианты
Тёмный знак на светлой поверхности и светлая выворотка на тёмной.
<!--
🟢
Варианты Logo под поверхность: тёмный знак `default` на светлой плитке и
светлая выворотка `inverse` на тёмной. Пара цветов приходит из токенов скина,
вектор один.
-->
<script>
import Logo from "$lib/ui/Logo.svelte";
</script>
<div class="logo-variants">
<div class="tile tile-light">
<Logo variant="default" />
</div>
<div class="tile tile-dark">
<Logo variant="inverse" />
</div>
</div>
<style>
.logo-variants {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
}
.tile {
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-3) var(--sp-4);
border-radius: var(--r-m);
}
.tile-light {
background: var(--c-surface-2);
}
.tile-dark {
background: var(--neutral-900);
}
</style>
Размеры
Две ступени шкалы --logo-h-*: марка в шапке и компактная подпись.
<!--
🟢
Две ступени шкалы `--logo-h-*`: m — марка в шапке (35px), xs — компактная
подпись бренда (15px). Ширина следует за высотой по пропорции знака.
-->
<script>
import Logo from "$lib/ui/Logo.svelte";
</script>
<div class="logo-sizes">
<Logo size="m" />
<Logo size="xs" />
</div>
<style>
.logo-sizes {
display: flex;
align-items: flex-end;
gap: var(--sp-3);
}
</style>