Brandguide | Anfilov

Logo

Logo usage guidelines — varianty, clearspace, minimální velikosti a pravidla pro favicon.

Light Background

Full Logo — Dark

Symbol — Dark

Symbol — Minimum (24px)

Dark Background

Full Logo — White

Symbol — White (Outline)

Favicon (bílý glyf na tmavém)

48px

32px

16px

Clearspace

Ochranná zóna kolem loga musí odpovídat výšce písmene “A” ze symbolu. Žádný text, grafika ani jiné prvky nesmí do této zóny zasahovat.

Minimální velikosti

Minimální symbol: 24 px (digitál) / 8 mm (tisk). Minimální logotyp: 120 px (digitál) / 30 mm (tisk).

80px

48px

32px

24px min

16px

Pravidla

Správně

Symbol vždy #1C1C1C na světlém
Bílá outline varianta na tmavém
Clearspace = výška písmene “A”
Favicon: nezměněný SVG symbol, žádné zjednodušování
Wordmark ve stejné barvě jako symbol

Špatně

Měnit barvu symbolu na jinou než černá/bílá
Používat zlatou na symbol loga
Deformovat poměr stran
Rotovat logo
Symbol pod 24 px

Barvy

Monochromatická paleta — neutrální šedé, čistý kontrast. Třívrstvý token systém: primitives → semantic → component.

Primitives — Neutral Scale

#FAFAFA

#F5F5F5

#E5E5E5

#D4D4D4

#A3A3A3

#737373

#525252

#404040

#262626

#171717

#0A0A0A

Sémantické — Surfaces

#FFFFFF

surface-base

Pozadí stránky

#FFFFFF

surface-elevated

Karty, panely

#F5F5F5

surface-sunken

Sekční pozadí

#FAFAFA

surface-muted

Jemné pozadí

#0A0A0A

surface-dark

Tmavé sekce

Sémantické — Text

#0A0A0A

text-primary

Hlavní text

#525252

text-secondary

Vedlejší text

#A3A3A3

text-tertiary

Metadata, captions

#0A0A0A

text-accent

Akcentový text

#171717

text-link

Odkazy

#FAFAFA

text-inverse

Text na tmavém

Borders

#E5E5E5

border

Jemné bordery

#D4D4D4

border-strong

Středně silné

#A3A3A3

border-accent

Hover/accent

Status

#22C55E

success

Úspěch

#EAB308

warning

Varování

#EF4444

error

Chyba

#3B82F6

info

Informace

Pravidla tlačítek

Černé tlačítko na světlém pozadí. Bílé tlačítko na tmavém pozadí. Žádné stíny pod tlačítky — čistý kontrast.

Light BG

Černé tlačítko na bílém pozadí

Dark BG

Bílé tlačítko na tmavém pozadí

Typografie

Jedno písmo: Averta Standard. Škála založená na Major Third (≈ 1.25). Font stack: 'Averta Standard', -apple-system, BlinkMacSystemFont, sans-serif.

Averta Standard

400 Regular400 Italic600 SemiBold700 Bold700 Bold Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%&

Příliš žluťoučký kůň úpěl

ďábelské ódy — číslo 42

Czech diacritics: ě š č ř ž ý á í é ů ú ó ď ť ň

Heading Scale

Display

48pxwt 700lh 1.08ls -1.5px

Heading 1

38pxwt 700lh 1.12ls -1.0px

Heading 2

30pxwt 700lh 1.20ls -0.5px

Heading 3

24pxwt 700lh 1.28ls -0.3px

Heading 4

20pxwt 700lh 1.32ls 0

Heading 5

18pxwt 600lh 1.40ls 0

Heading 6

16pxwt 600lh 1.40ls 0

Body & UI Scale

Body Large (subtitle) — Příliš žluťoučký kůň úpěl ďábelské ódy.

20pxwt 400lh 1.55

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

18pxwt 400lh 1.70

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

16pxwt 400lh 1.65

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

14pxwt 400–600lh 1.40

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

12pxwt 600lh 1.40uppercase, tracking 3px

Pravidla

Jedno písmo: Averta Standard pro veškerý text
Minimální velikost: 12 px
Nikdy nepoužívat font-weight 800 (Extra Bold)
Font stack: 'Averta Standard', -apple-system, BlinkMacSystemFont, sans-serif

Elementy

Všechny interaktivní komponenty — buttony, formuláře, badges, karty, togles, avatary a další.

Buttony — Light Background

Černé tlačítko na světlém pozadí.

Varianty

Velikosti

S ikonami

Disabled

Buttony — Dark Background

Bílé tlačítko na tmavém pozadí.

Badges / Tagy

DefaultAccentSuccessWarningErrorOutline

Formuláře

Text Input

S chybou

Toto pole je povinné

Povinné

Disabled

Select

Textarea

S chybou

Zadejte alespoň 10 znaků

Toggles & Checkboxes

Toggles

NotifikaceDark mode

Checkboxes

Souhlasím s podmínkamiOdebírat newsletterZapamatovat si mě

Avatary

Squircle (22 %) — nikdy kruh (50 %).

32px

44px

64px

Stacked

ABC+3

Ikony (Lucide)

Styl: line, 1.5 px stroke, rounded caps. Velikost: 20 px (inline), 24 px (standalone). Barva: text-secondary (default), accent.

ArrowRight

Check

ChevronDown

Download

Heart

Mail

Settings

Star

Trash2

Upload

Zap

Globe

Lock

Eye

Bell

Tabs

Přehled panelu. Taby přepínají obsah bez reloadu stránky.

Karty

Základní karta

Standardní karta s header, body a footer. Radius 14 px, jemný border.

Hover karta

Interaktivní karta s hover efektem. Accent border on hover.

Dark karta

Invertovaná karta. Na tmavém pozadí se používá bílé tlačítko.

Citace

Accent border — jen pro citace.

“Design je nejen to, jak to vypadá a jak to působí. Design je to, jak to funguje.”

Steve Jobs

Progress Bars

Upload progress

Task completion

Storage used

Tooltips

Modal / Dialog

Alerts

Informace

Informační zpráva pro neutrální sdělení.

Úspěch

Operace byla úspěšně dokončena.

Upozornění

Zkontrolujte před pokračováním.

Chyba

Něco se pokazilo. Zkuste to znovu.

Breadcrumbs

Dropdown Menu

Accordion

Pagination

Rating

5.0 — Vynikající

3.5 — Dobré

1.0 — Slabé

Tabulka

Jméno	Role	Status	Přidán
Alice Nováková	Designer	Aktivní	2024-01
Bob Martinez	Developer	Aktivní	2023-11
Carol Singhová	PM	Neaktivní	2024-03
David Kim	Developer	Aktivní	2023-08

Spacing, Radius & Tokens

8pt grid systém. Veškerý spacing vychází z násobků 4 px / 8 px.

Spacing Scale (8pt grid)

Micro spacing

4px--s1

S2 (space-inline)

Gap mezi inline elementy

8px--s2

S3 (space-label)

Label margin

12px--s3

Within-component

16px--s4

S5 (card-gap, stack)

Card gap, vertikální gap odstavců

24px--s5

S6 (card-pad, heading)

Card padding, heading spacing

32px--s6

S7 (group)

Group spacing

48px--s7

Major blocks

64px--s8

S9 (section)

Section padding

96px--s9

S10

Hero padding

128px--s10

Grid

Max-width1120px

Sloupce12

Gutter24px (--s5)

Margin32px (--s6)

Breakpointssm 640 · md 768 · lg 1024 · xl 1280

Border Radius

4px

Tagy, pills

8px

Buttony, inputy

12px

Tabulky, kód

14px

Karty, sekce

18px

Mockupy, velké panely

22px

2XL

Hero prvky

9999px

Full

Pills

22%

Squircle

Avatary (ne kruh!)

Shadows

Neutrální stíny z rgba(0,0,0,…). Tlačítka bez stínů.

Jemná elevace

Karty, hover

Dropdowny

Elevated panels

Modály

Component Tokens

Button

btn-radiusvar(--radius-sm) → 10px

btn-padding-x/y26px / 13px

btn-shadownone

Card

card-radiusvar(--radius-lg) → 22px

card-padding32px

card-bordervar(--color-border)

card-shadowvar(--shadow-sm)

Input

input-radiusvar(--radius-sm) → 10px

input-bordervar(--color-border)

input-border-focus#0A0A0A

Badge

badge-radiusvar(--radius-xs) → 6px

badge-padding-x/y11px / 5px

Avatar

avatar-radius22% (squircle)

Navigation

nav-height72px

nav-bgvar(--color-surface-elevated)

nav-bordervar(--color-border)

Motion

Max 400 ms. Žádný bounce easing. Respektuj prefers-reduced-motion: reduce.

duration-fast120msHovers, color changes

duration-normal200msTransforms, reveals

duration-slow350msPanel transitions

easing-defaultcubic-bezier(0.4, 0, 0.2, 1)Default easing

easing-entercubic-bezier(0, 0, 0.2, 1)Enter/appear

easing-exitcubic-bezier(0.4, 0, 1, 1)Exit/disappear