Витрина Steam: глубокий сине-серый фон, холодный голубой акцент и плотные карточки игр без лишнего декора.
Спокойная рабочая витрина: много товаров, плотная сетка, цвет только в ссылках и ценах.
Нажмите на цвет, чтобы скопировать hex.
Попробуйте свой цвет — образец и токены обновятся сразу.
Три вопроса — останутся только подходящие стили.8 из 8
:root {
--background: #1b2838;
--surface: #171a21;
--foreground: #c7d5e0;
--muted: #8f98a0;
--accent: #66c0f4;
--palette-1: #1b2838;
--palette-2: #171a21;
--palette-3: #2a475e;
--palette-4: #66c0f4;
--palette-5: #c7d5e0;
--radius: 3px;
--shadow: 0 0 12px rgb(0 0 0 / 0.5);
--gradient: linear-gradient(180deg, #1b2838 0%, #171a21 100%);
--font-heading: Motiva Sans;
--font-body: Motiva Sans;
}@theme {
--color-background: #1b2838;
--color-surface: #171a21;
--color-foreground: #c7d5e0;
--color-muted: #8f98a0;
--color-accent: #66c0f4;
--radius-style: 3px;
--shadow-style: 0 0 12px rgb(0 0 0 / 0.5);
--font-heading: "Motiva Sans", sans-serif;
--font-body: "Motiva Sans", sans-serif;
}{
"name": "steam",
"color": {
"background": "#1b2838",
"surface": "#171a21",
"foreground": "#c7d5e0",
"muted": "#8f98a0",
"accent": "#66c0f4"
},
"palette": {
"Фон": "#1b2838",
"Шапка": "#171a21",
"Карточка": "#2a475e",
"Акцент": "#66c0f4",
"Текст": "#c7d5e0"
},
"radius": "3px",
"shadow": "0 0 12px rgb(0 0 0 / 0.5)",
"gradient": "linear-gradient(180deg, #1b2838 0%, #171a21 100%)",
"font": {
"heading": {
"family": "Motiva Sans",
"weight": 700,
"tracking": "0em"
},
"body": {
"family": "Motiva Sans"
}
}
}