Чёрно-белая строгость: чистый чёрный текст, светло-серые плашки #f3f3f3, синий #276ef1 только для ссылок. Геометричный Uber Move, крупные кнопки и прямые формы.
Уверенно и прямо: ехать туда, куда нужно.
Нажмите на цвет, чтобы скопировать hex.
Попробуйте свой цвет — образец и токены обновятся сразу.
Три вопроса — останутся только подходящие стили.8 из 8
:root {
--background: #ffffff;
--surface: #f3f3f3;
--foreground: #000000;
--muted: #5e5e5e;
--accent: #276ef1;
--palette-1: #ffffff;
--palette-2: #f3f3f3;
--palette-3: #000000;
--palette-4: #5e5e5e;
--palette-5: #276ef1;
--radius: 8px;
--shadow: 0 4px 16px rgb(0 0 0 / 0.16);
--gradient: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
--font-heading: Uber Move;
--font-body: Uber Move Text;
}@theme {
--color-background: #ffffff;
--color-surface: #f3f3f3;
--color-foreground: #000000;
--color-muted: #5e5e5e;
--color-accent: #276ef1;
--radius-style: 8px;
--shadow-style: 0 4px 16px rgb(0 0 0 / 0.16);
--font-heading: "Uber Move", sans-serif;
--font-body: "Uber Move Text", sans-serif;
}{
"name": "uber",
"color": {
"background": "#ffffff",
"surface": "#f3f3f3",
"foreground": "#000000",
"muted": "#5e5e5e",
"accent": "#276ef1"
},
"palette": {
"Фон": "#ffffff",
"Плашка": "#f3f3f3",
"Текст": "#000000",
"Вторичный": "#5e5e5e",
"Синий": "#276ef1"
},
"radius": "8px",
"shadow": "0 4px 16px rgb(0 0 0 / 0.16)",
"gradient": "linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%)",
"font": {
"heading": {
"family": "Uber Move",
"weight": 700,
"tracking": "-0.02em"
},
"body": {
"family": "Uber Move Text"
}
}
}