Презентация в духе Apple: чистый белый и светло-серый, крупный продукт по центру, синие ссылки.
Одна мысль на экран: крупный заголовок, продукт и короткая строка под ним.
Нажмите на цвет, чтобы скопировать hex.
Попробуйте свой цвет — образец и токены обновятся сразу.
Три вопроса — останутся только подходящие стили.8 из 8
:root {
--background: #ffffff;
--surface: #f5f5f7;
--foreground: #1d1d1f;
--muted: #6e6e73;
--accent: #0071e3;
--palette-1: #ffffff;
--palette-2: #f5f5f7;
--palette-3: #d2d2d7;
--palette-4: #1d1d1f;
--palette-5: #0071e3;
--radius: 18px;
--shadow: 0 4px 20px rgb(0 0 0 / 0.06);
--gradient: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
--font-heading: SF Pro Display;
--font-body: SF Pro Text;
}@theme {
--color-background: #ffffff;
--color-surface: #f5f5f7;
--color-foreground: #1d1d1f;
--color-muted: #6e6e73;
--color-accent: #0071e3;
--radius-style: 18px;
--shadow-style: 0 4px 20px rgb(0 0 0 / 0.06);
--font-heading: "SF Pro Display", sans-serif;
--font-body: "SF Pro Text", sans-serif;
}{
"name": "product-launch",
"color": {
"background": "#ffffff",
"surface": "#f5f5f7",
"foreground": "#1d1d1f",
"muted": "#6e6e73",
"accent": "#0071e3"
},
"palette": {
"Фон": "#ffffff",
"Поверхность": "#f5f5f7",
"Линии": "#d2d2d7",
"Текст": "#1d1d1f",
"Ссылка": "#0071e3"
},
"radius": "18px",
"shadow": "0 4px 20px rgb(0 0 0 / 0.06)",
"gradient": "linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%)",
"font": {
"heading": {
"family": "SF Pro Display",
"weight": 600,
"tracking": "-0.015em"
},
"body": {
"family": "SF Pro Text"
}
}
}