NověCall Care AI zvedne každý hovor 24/7.Vyzkoušet
+420 604 644 825[email protected]Praha 3, Žižkov
CZEN
Kontakt
DomůDesign system

Styleguide · verze 1.0

Design system
Evenir.

Jeden vizuální jazyk pro web, AI produkty i prezentace. Každý token zde odpovídá proměnné ve Figmě, každá komponenta má své stavy.

8barevných tokenů z původní palety
2písma převzatá ze současné značky

01

Barvy

Paleta značky zůstává. Doplnili jsme jen tmavší a světlejší odstíny tyrkysové, aby tmavé sekce a plochy měly hloubku.

AA
Teal 500#19929B · --tealHlavní barva značky, odkazy, aktivní stavy
AA
Grey 600#5B5B5B · --greyText odstavců, sekundární prvky
Surface
Mist 200#D5E9EB · --mistPlochy, štítky, jemné pozadí
Surface
Orange 400#FF8243 · --orangePouze hlavní CTA. Text na oranžové je vždy Ink 900.
AA
Teal 950#07363A · --teal-950Tmavé sekce, vlajková karta
AA
Ink 900#1D2A2C · --inkNadpisy a text na oranžové (kontrast 6 : 1, AA)
Surface
Mist 50#EEF6F7 · --mist-50Pozadí sekcí, ikonové dlaždice
Surface
Line 200#DCE8EA · --lineOhraničení karet a polí
25
50
200
300
500
600
700
900
950

02

Typografie

Velké kondenzované nadpisy dávají webu sebevědomí, Montserrat drží čitelnost textu.

AÁBig Shoulders DisplayNadpisy, čísla, štítky. Zůstává z dnešního webu, jen sebevědomější.
AáMontserratText, formuláře, tlačítka. Také převzato ze současné značky.
01JetBrains MonoJen pro AI rozhraní: časy hovorů, stavy, data.
Display XLBig Shoulders 800 · 92/83 · uppercase
AI pro firmy
Display LBig Shoulders 800 · 64/60
Čtyři AI produkty
Heading MBig Shoulders 800 · 40/40
Výsledky studie
Heading SBig Shoulders 800 · 27/27
Call Care AI
LeadMontserrat 400 · 18/30
Navrhujeme, nasazujeme a provozujeme AI agenty.
BodyMontserrat 400 · 16/26
Ozve se vám člověk z pražského týmu do jednoho dne.
LabelMontserrat 700 · 12 · +16 %
Naše AI portfolio

03

Tlačítka a štítky

Jedno tlačítko, tři varianty, čtyři stavy. Oranžová patří jen hlavní akci na obrazovce.

VýchozíHoverStiskNeaktivníPrimaryPokračovatPokračovatPokračovatPokračovatSecondaryPokračovatPokračovatPokračovatPokračovatTealPokračovatPokračovatPokračovatPokračovatSmallKontaktKontaktKontaktKontakt
Textový odkazŠtítekVybráno 6NovéRealityReal Estate AICall Care AI

04

Formuláře

Pole 50 px, zaoblení 12 px, zaměření tyrkysovým prstencem. Chyby vždy s textem, ne jen barvou.

Jan Novák
[email protected]
jan.novak@
Zadejte platný e-mail
+420 777 123 456
Call Care AI
Zaškrtnuto Nezaškrtnuto Vybráno Možnost Zapnuto Vypnuto

05

Ikony

Vlastní lineární sada pro AI i IT služby, jednotná napříč webem a produkty.

spark
headset
trend
home
shield
lock
cloud
server
layers
windows
users
calendar
phone-call
mail
pin
search
database
compass
puzzle
key
radar
gauge
file
arrow

Mřížka 24 px, tah 1,75 px, zaoblené konce. Ve Figmě jako komponenty s prohoditelnou instancí.

06

Mezery, zaoblení, stíny

Základní krok 4 px. Sekce 120 px na desktopu, 80 px na mobilu.

space-44 px
space-88 px
space-1212 px
space-1616 px
space-2424 px
space-3232 px
space-4848 px
space-6464 px
space-9696 px
radius-sm8 px
radius-md12 px
radius-lg20 px
radius-xl28 px
radius-pill999 px
shadow-1Karty v klidu
shadow-2Hover, formulář
shadow-3Plovoucí panely

07

Breakpointy

Návrh pro 1440, 1200, 1024 a 390 px. Komponenty se přizpůsobí, nemění se.

Desktop 144012 sloupců, obsah 1240 px, okraj 100 px
Laptop 120012 sloupců, hero 520 px vpravo
Tablet 1024Menu v šuplíku, sekce pod sebou
Mobile 3904 sloupce, okraj 20 px, CTA na šířku

Připraveni dát AI do práce?

Ukažte nám jeden proces, který vás brzdí. Na úvodní konzultaci zdarma vám řekneme, jestli a jak ho AI zvládne.

Domluvit konzultaci