Чёрно-графитовая база Xbox с фирменным зелёным и строгой сеткой в духе Fluent.
Уверенная техничная подача: почти чёрный фон, зелёный как знак действия.
Нажмите на цвет, чтобы скопировать hex.
Попробуйте свой цвет — образец и токены обновятся сразу.
Три вопроса — останутся только подходящие стили.8 из 8
:root {
--background: #0e0e0e;
--surface: #1f1f1f;
--foreground: #ffffff;
--muted: #a0a0a0;
--accent: #107c10;
--palette-1: #0e0e0e;
--palette-2: #1f1f1f;
--palette-3: #2d2d2d;
--palette-4: #107c10;
--palette-5: #9bf00b;
--radius: 4px;
--shadow: 0 6.4px 14.4px rgb(0 0 0 / 0.33), 0 1.2px 3.6px rgb(0 0 0 / 0.28);
--gradient: linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 100%);
--font-heading: Segoe UI Variable;
--font-body: Segoe UI;
}@theme {
--color-background: #0e0e0e;
--color-surface: #1f1f1f;
--color-foreground: #ffffff;
--color-muted: #a0a0a0;
--color-accent: #107c10;
--radius-style: 4px;
--shadow-style: 0 6.4px 14.4px rgb(0 0 0 / 0.33), 0 1.2px 3.6px rgb(0 0 0 / 0.28);
--font-heading: "Segoe UI Variable", sans-serif;
--font-body: "Segoe UI", sans-serif;
}{
"name": "xbox",
"color": {
"background": "#0e0e0e",
"surface": "#1f1f1f",
"foreground": "#ffffff",
"muted": "#a0a0a0",
"accent": "#107c10"
},
"palette": {
"Фон": "#0e0e0e",
"Поверхность": "#1f1f1f",
"Линии": "#2d2d2d",
"Акцент": "#107c10",
"Яркий зелёный": "#9bf00b"
},
"radius": "4px",
"shadow": "0 6.4px 14.4px rgb(0 0 0 / 0.33), 0 1.2px 3.6px rgb(0 0 0 / 0.28)",
"gradient": "linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 100%)",
"font": {
"heading": {
"family": "Segoe UI Variable",
"weight": 600,
"tracking": "-0.01em"
},
"body": {
"family": "Segoe UI"
}
}
}