Material You в продуктах Google: белые и бледно-голубые поверхности, текст #1f1f1f, новый синий #0b57d0 и тональные контейнеры #d3e3fd. Google Sans, крупные скругления и мягкие уровни тени.
Дружелюбно и понятно: интерфейс, который подстраивается под вас.
Нажмите на цвет, чтобы скопировать hex.
Попробуйте свой цвет — образец и токены обновятся сразу.
Три вопроса — останутся только подходящие стили.8 из 8
:root {
--background: #ffffff;
--surface: #f8fafd;
--foreground: #1f1f1f;
--muted: #444746;
--accent: #0b57d0;
--palette-1: #ffffff;
--palette-2: #f8fafd;
--palette-3: #d3e3fd;
--palette-4: #1f1f1f;
--palette-5: #0b57d0;
--radius: 20px;
--shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
--gradient: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
--font-heading: Google Sans;
--font-body: Google Sans Text;
}@theme {
--color-background: #ffffff;
--color-surface: #f8fafd;
--color-foreground: #1f1f1f;
--color-muted: #444746;
--color-accent: #0b57d0;
--radius-style: 20px;
--shadow-style: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
--font-heading: "Google Sans", sans-serif;
--font-body: "Google Sans Text", sans-serif;
}{
"name": "google",
"color": {
"background": "#ffffff",
"surface": "#f8fafd",
"foreground": "#1f1f1f",
"muted": "#444746",
"accent": "#0b57d0"
},
"palette": {
"Фон": "#ffffff",
"Поверхность": "#f8fafd",
"Контейнер": "#d3e3fd",
"Текст": "#1f1f1f",
"Primary": "#0b57d0"
},
"radius": "20px",
"shadow": "0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15)",
"gradient": "linear-gradient(180deg, #ffffff 0%, #f8fafd 100%)",
"font": {
"heading": {
"family": "Google Sans",
"weight": 500,
"tracking": "-0.01em"
},
"body": {
"family": "Google Sans Text"
}
}
}