Бранд насоки на Spoy

Логото във всеки размер

За светъл и тъмен фон

Знак

• Ink55%

  HEX

  #0B0B0A

  RGB

  11, 11, 10

  CMYK

  0, 0, 9, 96

  OKLCH

  14.9% 0.002 107

  Основата на всичко: страниците, порталът и всеки имейл.

• Surface20%

  HEX

  #111110

  RGB

  17, 17, 16

  CMYK

  0, 0, 6, 93

  OKLCH

  17.7% 0.002 107

  Панели и карти върху Ink.

• Paper15%

  HEX

  #F5F4EE

  RGB

  245, 244, 238

  CMYK

  0, 0, 3, 4

  OKLCH

  96.6% 0.008 99

  Текст и знаци върху тъмен фон, както и светлият фон, когато е нужен.

• Stone5%

  HEX

  #AAA9A1

  RGB

  170, 169, 161

  CMYK

  0, 1, 5, 33

  OKLCH

  73.3% 0.011 101

  Второстепенен текст: уводи, етикети и надписи.

• Signal5%

  HEX

  #FFDE21

  RGB

  255, 222, 33

  CMYK

  0, 13, 87, 0

  OKLCH

  90.1% 0.181 98

  Само едно осветено нещо на екран: основното действие или текущият слой. Никога за основен текст.

• Amber

  HEX

  #FFB802

  RGB

  255, 184, 2

  CMYK

  0, 28, 99, 0

  OKLCH

  82.7% 0.171 80

  Заменя Signal върху светъл фон, където жълтото се губи: за шеврона и акцентите.

Пропорции на цветовете

Колко място заема всеки цвят в типичен макет.

Четими комбинации

Всяка двойка цветове като текст върху фон, оценена по WCAG 2.2. AA е минимумът за основен текст, а AA large важи за 24 px и нагоре.

• Paper върху Ink17.9:1AAA
• Paper върху Surface17.1:1AAA
• Signal върху Ink14.7:1AAA
• Signal върху Surface14.1:1AAA
• Amber върху Ink11.4:1AAA
• Amber върху Surface10.9:1AAA
• Stone върху Ink8.3:1AAA
• Stone върху Surface8.0:1AAA
• Paper върху Stone2.1:1Не отговаря
• Signal върху Stone1.8:1Не отговаря
• Paper върху Amber1.6:1Не отговаря
• Amber върху Stone1.4:1Не отговаря
• Signal върху Amber1.3:1Не отговаря
• Paper върху Signal1.2:1Не отговаря

• Aa

  Geist

  Заглавия и основен текст

  Заглавия и основен текст. Сгъстена разредка в големите размери, нормална – в текста за четене.

  Дебелини 400 · 500 · 600Изтегли шрифта

• Aa

  Geist Mono

  Етикети, числа и код

  Етикети, числа и код. В таговете – с главни букви и по-голяма разредка.

  Дебелини 500Изтегли шрифта

Прегледът използва шрифта, ако е инсталиран или достъпен онлайн.

• Казвайте какво се случва

  Назовете действието и резултата му. Бутонът казва какво прави, а съобщението след него използва същата дума.

  Казвайте

  • Срещата ви е запазена.
  • Когато запазите, изпращаме обновена покана.

  Избягвайте

  • Супер, всичко е готово! 🎉
  • Промените ще бъдат разпространени.

• Говорете с факти, не с прилагателни

  Конкретният детайл казва повече от твърдение за качество.

  Казвайте

  • Едно студио от първия разговор до пускането.
  • Доказателство за доставка със снимки и подпис.

  Избягвайте

  • Иновативни дигитални решения от световна класа.
  • Безпроблемно изживяване от край до край.

• Пазете времето на читателя

  Започвайте с това, което му трябва, искайте по едно нещо наведнъж и посочвайте дата, когато има такава.

  Казвайте

  • Трябват ни адресите на складовете до петък.
  • Първо споделете контекста. Нищо не се изпраща, преди да го прегледате.

  Избягвайте

  • Просто да върнем темата с адресите.
  • Хайде на един бърз кол да се синхронизираме.

• Един глас на всеки език

  Учтив български на „вие“ (с главна буква в писмата), ясен английски и испански на „ти“. Едни и същи факти на всеки език.

  Казвайте

  • Какво чакаме от вас
  • Elige otro horario que te venga bien.

  Избягвайте

  • Чакаме те!
  • Машинен превод, оставен както е излязъл.

• 

  Шапка на имейл Шапката на всеки транзакционен имейл: светлината от началната страница, осветеният слой и логото.

Знак

• PNG

  Ink

• PNG

  Surface

• PNG

  Paper

• PNG

  Stone

• PNG

  Signal

• PNG

  Amber

Лого

• PNG

  Ink

• PNG

  Surface

• PNG

  Paper

• PNG

  Stone

• PNG

  Signal

• PNG

  Amber

Профилни снимки

• PNG

  Ink

• PNG

  Surface

• PNG

  Paper

• PNG

  Stone

• PNG

  Signal

• PNG

  Amber

Иконки за сайт и приложение

• Фавикон SVGfavicon.svg

• Фавикон PNGfavicon-32.png

• Фавикон ICOfavicon.ico

• Икона за Appleapple-touch-icon.png

• Икона за PWAicon-192.png

• Икона за PWA, голямаicon-512.png

:root {
  --color-ink: #0b0b0a; /* oklch(14.9% 0.002 107) */
  --color-surface: #111110; /* oklch(17.7% 0.002 107) */
  --color-paper: #f5f4ee; /* oklch(96.6% 0.008 99) */
  --color-stone: #aaa9a1; /* oklch(73.3% 0.011 101) */
  --color-signal: #ffde21; /* oklch(90.1% 0.181 98) */
  --color-amber: #ffb802; /* oklch(82.7% 0.171 80) */
  --font-sans: Geist, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  --text-display: 3.05rem; /* 48.8px */
  --text-h1: 2.444rem; /* 39.1px */
  --text-h2: 1.956rem; /* 31.3px */
  --text-h3: 1.563rem; /* 25px */
  --text-lead: 1.25rem; /* 20px */
  --text-body: 1rem; /* 16px */
  --text-small: 0.8rem; /* 12.8px */
}