Бумажно-белый фон, тёплый тёмно-серый текст #37352f, светлые бежевые подложки и спокойный синий #2383e2. Простые иллюстрации от руки и много текста без декора.
Спокойное рабочее пространство, где мысли укладываются по полочкам.
Нажмите на цвет, чтобы скопировать hex.
Попробуйте свой цвет — образец и токены обновятся сразу.
Три вопроса — останутся только подходящие стили.8 из 8
:root {
--background: #ffffff;
--surface: #f7f6f3;
--foreground: #37352f;
--muted: #787774;
--accent: #2383e2;
--palette-1: #ffffff;
--palette-2: #f7f6f3;
--palette-3: #37352f;
--palette-4: #787774;
--palette-5: #2383e2;
--radius: 10px;
--shadow: 0 0 0 1px rgb(15 15 15 / 0.05), 0 3px 6px rgb(15 15 15 / 0.1);
--gradient: linear-gradient(180deg, #ffffff 0%, #f7f6f3 100%);
--font-heading: Inter;
--font-body: Inter;
}@theme {
--color-background: #ffffff;
--color-surface: #f7f6f3;
--color-foreground: #37352f;
--color-muted: #787774;
--color-accent: #2383e2;
--radius-style: 10px;
--shadow-style: 0 0 0 1px rgb(15 15 15 / 0.05), 0 3px 6px rgb(15 15 15 / 0.1);
--font-heading: "Inter", sans-serif;
--font-body: "Inter", sans-serif;
}{
"name": "notion",
"color": {
"background": "#ffffff",
"surface": "#f7f6f3",
"foreground": "#37352f",
"muted": "#787774",
"accent": "#2383e2"
},
"palette": {
"Фон": "#ffffff",
"Подложка": "#f7f6f3",
"Текст": "#37352f",
"Вторичный": "#787774",
"Синий": "#2383e2"
},
"radius": "10px",
"shadow": "0 0 0 1px rgb(15 15 15 / 0.05), 0 3px 6px rgb(15 15 15 / 0.1)",
"gradient": "linear-gradient(180deg, #ffffff 0%, #f7f6f3 100%)",
"font": {
"heading": {
"family": "Inter",
"weight": 700,
"tracking": "-0.02em"
},
"body": {
"family": "Inter"
}
}
}