Relume Style Guide V3.0

Brand Book

Měníme návyky,
měníme firmy

Digitalizace je jen začátek,
skutečná změna přichází s lidmi

Naše vize

Dáváme smysl digitalizaci.

Nejde nám o technologie pro technologie. Chceme, aby lidem v práci dávaly věci větší smysl, šetřily čas a energii, a přitom byly moderní, funkční a přívětivé. Pomáháme firmám růst tím, že jim pomáháme zjednodušit a vylepšit to, co dělajíkaždý den.

Naše mise

Chceme být těmi, kdo firmám pomáhají z chaosu do klidu.

Když to vypadá, že už se v procesech nedá vyznat, jsme ti, kdo s chladnou hlavou, dobrými otázkami a špetkou drzosti pomůžou vše narovnat.

Věříme, že když se zkrotí opakující se rutina, otevře se prostor pro skutečnou práci, nápady a rozvoj. A právě to je budoucnost, kterou chceme tvořit.

DNA značky

S digitalizací měníme procesy. Se změnou přístupu měníme firmy.

Tahle věta vystihuje náš přístup: technologie nejsou cílem, ale prostředkem. Důležité je, jak je použijeme, jak se na ně dívá vedení firmy, a jak je přijmou lidé, kteří s nimi každý den pracují.

Kdo jsme a čím se odlišujeme?

Nejsme jen dodavatel, jsme partner

Máme zkušenosti z velkých firem, zvládáme komplexní digitalizační projekty a nabízíme end-to-end řešení. Ale hlavně, když něco nefunguje, řekneme to. Když je potřeba klienta trochu vyprovokovat, uděláme to. Protože víme, že skutečná změna přichází až tehdy, kdy se někdo odváží říct: „Takhle už ne. Zkusme to jinak.“

Ke komu mluvíme?

Naši klienti jsou nejčastěji:

manažeři digitalizace, provozu, IT nebo inovací, ředitelé firem a lídři týmů, kteří chtějí modernizovat fungování firmy

Často jsou:
  • Zaneprázdnění, zahlcení a hledají pomocníka, který je provede změnou

  • Opatrní, digitalizace pro ně může být riziko, investice, ale i příležitost

  • Zvyklí, že „dodavatelé“ moc neříkají ne (a o to víc si váží toho, že my ano, když to dává smysl)

Naše hodnoty

1. Otevřenost a lidskost

U nás platí: když něco nedává smysl, řekni to. Jsme lidi, se kterými je radost pracovat, jsme normální, přímí a fajn. Věci si říkáme na rovinu, mezi sebou i s klienty. Spolupráce s námi je příjemná, ale zároveň věcná.

2. Zvídavost a odvaha hledat nové cesty

Nebojíme se ptát „Proč?“ a „Co kdyby?“. Rádi zkoumáme, vrtáme se v problémech a hledáme, jak to udělat lépe. Nehledáme výmluvy, ale řešení.

3. Ambice a odpovědnost

Chceme růst, jako tým i jako jednotlivci. A rosteme i tak, že věci dotahujeme do konce. Když něco slíbíme, uděláme to. Věříme, že tah na branku a zodpovědnost jdou ruku v ruce.

4. Partnerství a výzva

Nejsme "hodní dodavatelé". Jsme rovnocenná protistrana, partner, který se nebojí oponovat. Klienty challengeujeme, protože věříme, že jen tak vznikají smysluplná řešení.

5. Expertíza a poctivost

Máme výsledky, zkušenosti i know-how. Víme, co děláme, a víme, proč to děláme.Umíme proměnit vize ve funkční realitu. Nepatříme k nejlevnějším, protožepřinášíme skutečnou hodnotu jinak.

Jaký je náš tón komunikace (Tone of Voice)?

Komunikace INFOMATIC je čitelná, lidská a důvěryhodná.

Mluvíme tak, aby nám klienti i partneři rozuměli, cítili se s námi dobře a zároveň vnímali naši odbornost a jistotu v tom, co děláme.

Jak mluvíme?

Srozumitelně

Používáme běžný jazyk, ne přehnaný odborný žargon. Složité věci umíme vysvětlit jednoduše i to je součást naší expertízy.

Odborně a věcně

Fakta mají hlavní slovo. Víme, co děláme. A to, co říkáme má hlavu a patu, ale bez zbytečné okázalosti.

Přirozeně lidsky

Komunikujeme s respektem a empatií. Nesnažíme se být přehnaně vtipní nebo cool, stačí být opravdoví a vstřícní.

Strukturovaně, ale dynamicky

Dáváme věcem řád, aby se v nich dalo vyznat. Zároveň se nebojíme přirozeného tempa, příkladů nebo metafor, které věci oživí.

Sebevědomě, ale ne arogantně

Máme zkušenosti a umíme za nimi stát. Neprodáváme vzdušné zámky. Když něco nevíme nebo nedoporučujeme, říkáme to na rovinu.

Vykání nebo tykání?

Klientům a partnerům povětšinou vykáme a komunikujeme s respektem, ale přirozeně.

V komunikaci značky vykáme nebo mluvíme v množném čísle („Pomůžeme vám...“, „Zjednodušíme vaše procesy...“). Tykání do veřejné komunikace nepatří.

Jací jsme navenek?

Profesionální

Rozumíme tomu, co děláme a je to na nás vidět i slyšet. Nehrajeme si na experty, jsme experti. Dodáváme řešení, za kterými si stojíme. Když něco doporučíme, máme pro to dobrý důvod.

Inovativní

Technologie pro nás nejsou cíl, ale nástroj, jak dělat věci lépe. Hledáme nové cesty a nebojíme se přemýšlet jinak, zkoušet a testovat. Jsme zvídaví a baví nás posouvat hranice, ať už svoje, nebo klientských projektů.

Lidští a přátelští

Jsme normální lidé, přímí, otevření a vstřícní. Je s námi radost spolupracovat umíme se smát, ale umíme i říct ne, když je to potřeba. Spolupráce s námi je o partnerství, respektu a férovém přístupu.

Inspirativní

Pomáháme vidět budoucnost v lepším světle. Ukazujeme firmám, že změna dává smysl a digitalizace není strašák, ale příležitost. Že rutinu můžou nechat na technologiích a věnovat se práci, která je baví a má vyšší hodnotu pro jejich podnikání.

Proč pracovat s námi?

  • Šetříme lidem čas i peníze tím, že zjednodušujeme jejich každodenní práci.

  • Neřešíme jen procesy, řešíme i změnu přístupu.

  • Technologie přizpůsobujeme lidem, ne naopak.

  • Umíme to s komplexitou i výzvami a dotahujeme věci do konce.

Proč na tom záleží?

Hodnoty, mise, vize i tón komunikace nejsou jen slova do šuplíku nebo do prezentace pro klienta. Jsou to základní věci, podle kterých se rozhodujeme, jak děláme věci, a hlavně proč je děláme tak, jak je děláme.

Pomáhají nám táhnout za jeden provaz, i když máme různé role, někdo programuje, jiný jezdí ke klientům nebo řeší byznys. Díky tomu máme společný jazyk a víme, co od sebe navzájem čekat.

Když víme, kam směřujeme a co je pro nás důležité, můžeme dělat lepší rozhodnutí. Rychleji, efektivněji, a hlavně s tím, že to dává smysl nejen klientům, ale i nám samotným.

Není to dogma. Je to kompas.

Co to znamená v praxi?

Obchodník ví, že nejde o to „prodat za každou cenu“, ale nabídnout řešení, které klientovi fakt pomůže. A klidně si s ním sednout a probrat, že někdy je cesta jiná, než si myslel.

Technik má jistotu, že když řekne „tohle není dlouhodobě dobré řešení“, nikdo ho neshodí ze stolu. Respektujeme jeho zkušenosti a dáváme mu prostor se ozvat.

Vývojář chápe, že nemá kódovat jen aby to běželo, ale tak, aby řešení bylo
udržitelné, smysluplné a odpovídalo reálným potřebám. A když se vynoří problém, je v bezpečném prostředí k tomu ho řešit, ne ho maskovat.

Jak naše hodnoty, mise, vize a tone of voice používat?

Nejsou to pravidla vytesaná do kamene, ale spíš kompas, který nám pomáhá rozhodovat se v práci i v komunikaci s klienty nebo mezi sebou.

Kdy se hodí si na ně vzpomenout:

Když si nejsi jistý, co je správný postup

Zeptej se: „Dává to klientovi smysl? Je to v souladu s tím, co chceme dělat jako firma?“ Pokud ne, možná je čas to probrat s týmem nebo zkusit jiný přístup.

Když komunikuješ s klientem

Buď otevřený, zvídavý, férový. Klienti často ocení víc náš přístup než samotné řešení, a to dělá rozdíl.

Když se něco nedaří

U nás je normální říct „Hele, tady to skřípe.“ Nejde o hledání viníka, ale o hledání lepší cesty. Chyby nejsou ostuda, jsou šance něco vylepšit.

Když spolupracuješ napříč týmy

Každý má jiný pohled a jinou odbornost. Když se budeme vzájemně respektovat a opravdu si naslouchat, dostaneme se dál než každý sám.

Když přemýšlíš, co dál

Chceš se učit nové věci? Posouvat se? Super! Jsme rádi, když lidi rostou s firmou. Když víš, kam směřujeme, můžeš si v tom najít vlastní cestu.

Colors
Neutral (Biscay Coral)

White

#ffffff

Neutral lightest

#e7ebef

Neutral Lighter

#d0d7df

Neutral Light

#5c738f

Neutral

#173760

Neutral Dark

#122c4c

Neutral Darker

#091626

Neutral Darkest

#06101c

Primary (Science Blue)

Primary lightest

#e5f0fa

Primary Lighter

#cce2f6

Primary Light

#4c9be0

Primary

#0071d4

Primary Dark

#005aa9

Primary Darker

#002d54

Primary Darkest

#00213f

Secondary (Koromiko)

Secondary lightest

#fff8ee

Secondary Lighter

#fff1dd

Secondary Light

#ffd08a

Secondary

#ffbd59

Secondary Dark

#cc9747

Secondary Darker

#664b23

Secondary Darkest

#4c381a

color-scheme-1
Scheme 1

Text color

color-scheme-2
Scheme 2

Text color

color-scheme-3
Scheme 3

Text color

color-scheme-4
Scheme 4

Text color

color-scheme-5
Scheme 5

Text color

Icons
Tabler Icon set

Copy and use from this library https://icons.relume.io/collection/tabler .

Use this color:

Primary

#0071d4

Typography
HTML Headings Tags
HTML tags define default Heading styles.
All H1 Headings

Heading 1

Font: Barlow
Weight: 700 (Bold)
Size: 3.052 REM (48px)
Height: 120%

All H2 Headings

Heading 2

Font: Barlow
Weight: 700 (Bold)
Size: 2.441 REM (39px)
Height: 120%

All H3 Headings

Heading 3

Font: Barlow
Weight: 700 (Bold)
Size: 1.953 REM (31px)
Height: 120%

All H4 Headings

Heading 4

Font: Barlow
Weight: 700 (Bold)
Size: 1.563 REM (25px)
Height: 130%

All H5 Headings
Heading 5

Font: Barlow
Weight: 700 (Bold)
Size: 1.25 REM (20px)
Height: 130%

All H6 Headings
Heading 6

Font: Barlow
Weight: 700 (Bold)
Size: 1.125 REM (18px)
Height: 140%

Heading Classes
Heading classes when typography style doesn't match the default HTML tag.
heading-style-h1

Heading-style-h1

Font: Barlow
Weight: 700 (Bold)
Size: 3.052 REM (48px)
Height: 120%

heading-style-h2

Heading-style-h2

Font: Barlow
Weight: 700 (Bold)
Size: 2.441 REM (39px)
Height: 120%

heading-style-h3

Heading-style-h3

Font: Barlow
Weight: 700 (Bold)
Size: 1.953 REM (31px)
Height: 120%

heading-style-h4

Heading-style-h4

Font: Barlow
Weight: 700 (Bold)
Size: 1.563 REM (25px)
Height: 130%

heading-style-h5

Heading-style-h5

Font: Barlow
Weight: 700 (Bold)
Size: 1.25 REM (20px)
Height: 130%

heading-style-h6

Heading-style-h6

Font: Barlow
Weight: 700 (Bold)
Size: 1.125 REM (18px)
Height: 140%

Other HTML Tags
HTML tags define default text styles.
All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Font: Barlow
Weight: 400 (Normal)
Size: 1.1 REM (18px)
Height: 1.5 REM (24px)

All Links
All Links

Font: Barlow
Weight: 400 (Normal)
Size: 1.1 REM (18px)
Height: 1.5 REM (24px)

All Block Quotes
Block Quote

Font: Barlow
Weight: 400 (Normal)
Size: 1.25 REM (20px)
Height: 1.5 REM (24px)

All Unordered Lists
  • No bullet list

  • No bullet list

Font: Barlow
Weight: 400 (Normal)
Size: 1.1 REM (18px)
Height: 1.5 REM (24px)

All Unordered Lists
  • No bullet list

  • No bullet list

Font: Barlow
Weight: 400 (Normal)
Size: 1.1 REM (18px)
Height: 1.5 REM (24px)

All Ordered Lists
  1. No bullet list

  2. No bullet list

  3. No bullet list

Font: Barlow
Weight: 400 (Normal)
Size: 1.1 REM (18px)
Height: 1.5 REM (24px)

Text Sizes
Text sizes classes when typography size doesn't match the default HTML tag.
text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Font: Barlow
Weight: 400 (Normal)
Size: 1.625 REM (26px)
Height: 1.5 REM (24px)

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Font: Barlow
Weight: 400 (Normal)
Size: 1.25 REM (20px)
Height: 1.5 REM (24px)

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Font: Barlow
Weight: 400 (Normal)
Size: 1.125 REM (18px)
Height: 1.5 REM (24px)

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Font: Barlow
Weight: 400 (Normal)
Size: 1 REM (16px)
Height: 1.5 REM (24px)

text-size-tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Font: Barlow
Weight: 400 (Normal)
Size: 0.75, REM (12px)
Height: 1.5 REM (24px)

Text Weights
Text weight classes when typography weight doesn't match the default HTML tag.
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
accent-text
Accent-text
underline
Underline
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-2lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-style-3lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-style-muted
text-style-muted
text-style-tagline
text-style-tagline
text-color-white
text-color-white
Text Styles
Text style classes when typography style doesn't match the default HTML tag.
Text Alignment
Text alignment classes when typography alignment doesn't match the default HTML tag.
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Rich Text
text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here

Ochranná zóna loga

Do ochranné zóny značky nesmí zasáhnout žádné jiné grafické prvky. Ochranná zóna je určena výškou litery „M“.

Proč ji dodržovat?

Dodržením stanovené ochranné zóny zajistíte kvalitní vizuální efekt a působení vašeho loga. Slouží jako mantinely před okolními rušivými prvky.

Použití loga

Variantu značky je potřeba vybrat vždy tak, aby byla na podkladové ploše dobře čitelná.
Podkladové plochy ve stupních šedi
Barevné podkladové plochy
Na fotografiích

Vizuální styl

Ukázka použití vizuálního stylu značky. Další práce s vizuálním stylem záleží především na pečlivosti a zkušenostech grafika.
Isometrická ilustrace složky, monitoru a dokumentů reprezentujících správu digitálních souborů a údajů

Použití fotek

Fotografie pomáhají utvářet dojem ze značky. Měly by působit přirozeně, autenticky a lidsky — bez přehnaného stylizování nebo strojených emocí.

Dobrý příklad

Přirozené výrazy, formální ale přátelské.

Špatný příklad

Nepřirozené výrazy, pohled do kamery, korporátní vzhled.

Dobrý příklad

Přirozené prostředí, autentické.

Špatný příklad

Aranžované, póza na kameru, přesvětlené.

Dobrý příklad

Zaměření na detail, jasně vidíme, co se děje a kam má jít pozornost.

Špatný příklad

Nepřehledné, rušivé pozadí, není hned zřetelné co se na fotce nachází.

UI Elements
Buttons
button
button
is-small
button
is-secondary
button
is-secondary
is-small
button
is-link
To use on a dark background, simple use the add-on class is-alternate
button
is-alternate
button
is-alternate
is-small
button
is-secondary
is-alternate
button
is-secondary
is-small
is-alternate
button
is-link
is-alternate
Button
Buttons With Icons
button
is-icon
button
is-small
is-icon
button
is-secondary
is-icon
button
is-secondary
is-small
is-icon
button
is-link
is-icon
button
is-icon
is-alternate
button
is-small
is-icon
is-alternate
button
is-secondary
is-icon
is-alternate
button
is-secondary
is-small
is-icon
is-alternate
button
is-link
is-icon
is-alternate
Other UI Elements
category-filter-link
slider-arrow
Tags
Linkable labels that categorize or highlight information on cards, products and posts
tag
Tag
tag
is-text
Tag
tag
is-alternate
Tag
tag
is-text
is-alternate
Tag
Form Elements
form_field-label
form_input
form_input
is-text-area
form_input
is-select-input
form_checkbox
form_radio
button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
To use Forms on a dark background, simply use the add-on class is-alternate
form_field-label
form_input
form_input
is-text-area
form_input
is-select-input
form_checkbox
form_radio
button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Icons (Image)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

icon-height-medium

icon-height-large

icon-height-xlarge

icon-height-custom1

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-small

icon-1x1-medium

icon-1x1-large

icon-1x1-xlarge

icon-1x1-custom1

Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom1

Radius
Large
Large radius is applied to elements which are 1 or 2 columns in width.
Medium
Medium radius is applied to elements which are between 2 and 3 columns in width.
Small
Small radius is applied to elements which are smaller than 4 columns in width.
Effects
Box Shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
Structure Classes
Defined and flexible core structure we can use on all or most pages.
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
Max Widths
Use the max-width CSS property to contain inner content to a maximum width.
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Paddings
Direction Classes
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Size Classes
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
Margins
Direction Classes
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Size Classes
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
Spacers
Unified spacer system for the project.
spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge
Utility Classes
Useful utility classes we like to use in most of our projects to build faster.
hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-auto
pointer-events-none
layer
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
margin-top-auto
aspect-ratio-square
aspect-ratio-portrait
aspect-ratio-landscape
aspect-ratio-widescreen
inherit-color