English version — content translation pending. Texty zatím v češtině.

Styleguide

Vizuální systém PG GROUP

Náhled typografie, komponent a tokenů. Celou stránku přepnete do tmavého režimu přepínačem v hlavičce; vzorníky a panely níže ukazují oba režimy vedle sebe.

A — Typografie

H1 · 96/48

Lorem ipsum dolor sit amet

H2 · 64/36

Lorem ipsum dolor sit amet

H3 · 40/28

Lorem ipsum dolor sit amet

H4 · 28/22

Lorem ipsum dolor sit amet

H5 · 20/18
Lorem ipsum dolor sit amet
H6 · 16/16
Lorem ipsum dolor sit amet
Perex

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus, posuere velit aliquet.

Odstavec · 16–18/1.6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus, posuere velit aliquet. Donec sed odio dui. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum.

Malý text · 14

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus, posuere velit aliquet.

Odkazy
Výchozí odkaz
Default
Odkaz při hoveru
Hover
Navštívený odkaz
Visited
Řez

Tučně – lorem ipsum · kurzíva – dolor sit amet

Seznamy
  • Lorem ipsum dolor
  • Consectetur adipiscing
  • Integer posuere erat
  1. Lorem ipsum dolor
  2. Consectetur adipiscing
  3. Integer posuere erat
Citace

„Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.“

— Jméno Příjmení
Oddělovač
Psané písmo · Mynerve

Myšlenky měníme ve skutečnost.

Příliš žluťoučký kůň úpěl ďábelské ódy

Sledujte nás → · max. 1–2× na obrazovku

B — Komponenty

Primární tlačítko
Default
Hover
Active
Focus
Disabled
Sekundární outline
Default
Hover
Active
Focus
Disabled
Odkaz se šipkou
Více o nás
Default
Více o nás
Hover
Více o nás
Focus
Ikonová tlačítka
Default
Hover (inverze)
Focus
Light/dark
Filtrační štítky
To se jen tak nevidí →
Naše zapojení + tooltip
Karta realizace

BACARDÍ

Zóna Rock for People

Komplexní návrh, produkce a zajištění festivalové zóny propojující prezentaci značky, hudební program, odpočinkové zázemí a návštěvnické aktivity.

Karta služby

Značkové terasy, bary, prezentační zóny, výstavní expozice a další řešení pro zviditelnění značek v místě prodeje či jejich prezentace.

Karta výhody
01

Kapacita podle potřeby

Zkušený tým, který zapojíte, když potřebujete. Bez nutnosti rozšiřovat vlastní personální kapacity a bez povinného měsíčního paušálu.

02

Znalost vašeho prostředí

Stav hover – číslo se vyplní.

Karta člena týmu

Jméno a příjmení

Pracovní pozice

Tabulka parametrů
CTA blok

Lorem ipsum

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum
Pás log (marquee)
  • Agrotec
  • BMW
  • LANCÔME
  • BRENO
Instagram widget

Viz patička této stránky – 6 čtverců, hover = překryv s ikonou, na mobilu horizontální pás.

Velký kontaktní odkazE-mailinfo@pggroup.cz
Drobečková navigace
Stránkování
Oba režimy vedle sebe
Primární Sekundární

Textový odkaz

Primární Sekundární

Textový odkaz

C — Tokeny

Light mode

--bg#FFFFFF
--surface#F4F4F4
--text#0A0A0A
--muted#6B6B6B
--line#E2E2E2
--inverse-bg#0A0A0A
--inverse-text#FFFFFF

Dark mode

--bg#0A0A0A
--surface#161616
--text#FFFFFF
--muted#9A9A9A
--line#2A2A2A
--inverse-bg#FFFFFF
--inverse-text#0A0A0A
Mezery · 8px grid
8
16
24
32
48
64
96
128
Zaoblení
0 px
2 px
4 px
kruh – jen ikonová tlačítka
Stíny

Žádné. Hloubku nahrazuje inverze ploch a 1–2px linky.

Logo
Na světlé ploše
Inverzní · barva = currentColor
Min. výška 36 px
Písma

Montserrat 900 · Montserrat 400/500 · Mynerve 400