BeeMy logo

Vizuální styleguide
& design systém

Něžný, prémiový a útulný vizuální jazyk pro e-shop s dětskou výbavičkou. Základní kameny značky pro nastávající maminky — barvy, typografie, logo, komponenty.

1

Typografická hierarchie

Bariol / Nunito pro nadpisy · Open Sans pro text
H1 · Nadpis stránky — Bariol / Nunito Bold · 52 px

Něžný start pro vaše miminko

H2 · Sekční nadpis — Bariol / Nunito Bold · 34 px

Vše, co vaše hnízdečko potřebuje

H3 · Podnadpis — Bariol / Nunito SemiBold · 22 px

Vybráno s láskou a péčí

Body · Běžný text — Open Sans Regular · 16 px

Každý produkt v BeeMy vybíráme tak, aby byl bezpečný, jemný k pokožce a krásný na pohled. Věříme, že první měsíce mají být klidné a útulné — pro miminko i pro vás. Doplňkový popisek · Open Sans · 13,5 px · ztlumená šeď.

2

Barevná paleta

Teplá, přírodní, tlumená
Mandlová smetana
#FAF6F0 Primární pozadí
Hřejivý med
#D9A05B Sekundární brandová barva, akcenty
Břidlicová šeď
#3A3A3A Texty a nadpisy
Šalvějová zelená
#A3B19B Akcent hlavních tlačítek
Holčičí růžová
#E7B7B0 Jemný akcent, štítky (holčičí řada)
Klučičí modrá
#A9C5D3 Jemný akcent, štítky (klučičí řada)

Text na hlavních plochách

Web stojí na dvou plochách — mandlové smetaně (pozadí stránky) a bílých kartách. Na obou používej pro text břidlicovou šeď a pro vedlejší texty ztlumenou — obě jsou dobře čitelné. Světlé barvy palety na text nepatří.

Nadpisy a hlavní text Vedlejší a ztlumený text Mandlová smetana · pozadí stránky
Nadpisy a hlavní text Vedlejší a ztlumený text Bílé karty · produkt, hero

Název v každém vzorku je napsaný tou barvou písma, která je na dané barvě dobře čitelná. Pastelová růžová a modrá jsou světlé — používej je jako podbarvení nebo štítky, ne jako barvu písma. Když potřebuješ růžovou nebo modrou přímo jako text či ikonu, sáhni po jejich tmavší variantě, aby zůstala dobře čitelná:

Růžová tmavá #BF4B3A Modrá tmavá #48758C

Odstíny pro stavy tlačítek (ztmavení při najetí / stisku): med #C6893F, šalvěj #8FA085. Jemná linka #EAE1D5, ztlumený text #746E64.

4

Tlačítka

Zaoblení 16 px · stavy
Primární — normal
Primární — hover
Primární — active
Disabled
Sekundární — normal
Sekundární — hover
Sekundární — active
Ghost / odkaz

Živé stavy si vyzkoušíte najetím myší (hover) a stiskem (active) na tlačítka výše. Text na barevných tlačítkách je tmavý odstín (šalvěj → #2E3A29, med → #523716) kvůli dostatečnému kontrastu a jemnějšímu, prémiovému dojmu.

5

Produktová karta

Zaoblení 16 px · měkký stín
Novinka Prostor pro fotku produktu
Spánek & pohodlí

Dětské hnízdečko Oblázek

Měkoučké hnízdečko z 100% bavlny pro klidný a bezpečný spánek vašeho miminka. Ručně šité s láskou.

1 490 Kč 1 290 Kč
6

Hero sekce úvodní strany

Emotivní fotka + uvítací text

Vítejte v BeeMy

Něžný začátek pro ty nejmenší

Pečlivě vybraná výbavička pro vaše miminko — bezpečná, jemná a krásná. Ať jsou první dny doma plné klidu a lásky.

📷
Prostor pro emotivní fotku maminka s miminkem · teplé, měkké světlo
🍯 Vyrobeno s láskou
7

Brand CSS ke stažení

Tokeny a styly pro šablonu webu

beemy-brand.css

Přenositelný soubor s barvami, fonty a základními styly (tlačítka, karty). Vlož ho do custom CSS šablony webu (např. Upgates), ať je e-shop na-brand bez ručního opisování hexů. Font Bariol nahraj zvlášť (soubory ze složky fonty/).

Stáhnout CSS