Белый и светло-серый #f5f5f7, почти чёрный текст #1d1d1f, крупный плотный SF Pro Display, синие текстовые ссылки и скруглённые плитки без обводок. Продукт на фото — главный герой.
Тишина, воздух и точность: каждая деталь выверена, лишнего нет.
Нажмите на цвет, чтобы скопировать hex.
Попробуйте свой цвет — образец и токены обновятся сразу.
Три вопроса — останутся только подходящие стили.8 из 8
:root {
--background: #ffffff;
--surface: #f5f5f7;
--foreground: #1d1d1f;
--muted: #6e6e73;
--accent: #0071e3;
--palette-1: #ffffff;
--palette-2: #f5f5f7;
--palette-3: #1d1d1f;
--palette-4: #6e6e73;
--palette-5: #0071e3;
--radius: 18px;
--shadow: 0 2px 12px rgb(0 0 0 / 0.08);
--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 2px 12px rgb(0 0 0 / 0.08);
--font-heading: "SF Pro Display", sans-serif;
--font-body: "SF Pro Text", sans-serif;
}{
"name": "apple",
"color": {
"background": "#ffffff",
"surface": "#f5f5f7",
"foreground": "#1d1d1f",
"muted": "#6e6e73",
"accent": "#0071e3"
},
"palette": {
"Фон": "#ffffff",
"Плитка": "#f5f5f7",
"Текст": "#1d1d1f",
"Вторичный": "#6e6e73",
"Синий": "#0071e3"
},
"radius": "18px",
"shadow": "0 2px 12px rgb(0 0 0 / 0.08)",
"gradient": "linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%)",
"font": {
"heading": {
"family": "SF Pro Display",
"weight": 600,
"tracking": "-0.015em"
},
"body": {
"family": "SF Pro Text"
}
}
}