Design systém

Katalog prvků

Tokeny, UI prvky a všechny bloky ve variantách. Bloky se na stránkách skládají v src/content/pages/*.ts, ukázková data katalogu jsou v src/content/catalog.ts.

Barvy

  • --color-bg pozadí
  • --color-surface pruh formuláře
  • --color-surface-2 inputy
  • --color-text text
  • --color-text-muted šedé popisky
  • --color-text-soft placeholdery
  • --color-line oddělovače
  • --color-line-strong rámečky
  • --color-primary zelená
  • --color-accent modrofialová
  • --color-neon neon
  • --pill-blue pill modrá
  • --pill-green pill zelená
  • --pill-violet pill fialová
  • --pill-wine pill vínová
--glow-green
--glow-violet
--glow-blue

Typografie (Figtree, plynule 390 → 1280 px)

Eyebrow – .eyebrow

--fs-h1

Nadpis H1

--fs-h2

Nadpis sekce H2

--fs-h3

Titulek karty H3

--fs-h4

Název položky H4

--fs-slogan

Slogan hera

--fs-lead

Velký perex

--fs-body

Běžný text odstavce

--fs-small

Šedý popisek

Tlačítka a štítky

Primary Outline Delší text tlačítka na dva řádky v kartě
Blue Green Violet Wine
hero media: photo (oblouk), se sloganem Použití: outsourcing, pentest rozcestník

IT kapacity a vývoj

Nadpis H1 stránky

Slogan pod nadpisem

Perex hera. Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

Druhý odstavec perexu.

Primární akceSekundární akce
hero media: icon (neonová ikona), dlouhý H1 Použití: všechny podstránky služeb

Kybernetická bezpečnost • Penetrační testy

Penetrační test na dva řádky nadpisu

Perex hera. Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

Konzultace zdarmaUkázka reportu
hero bez media (jen text) Použití: rezerva pro stránky bez obrázku

Kybernetická bezpečnost

Hero jen s textem

Perex hera. Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

Konzultace zdarma
text-columns 2 sloupce, size lg Použití: „Proč dělat…“, „Co je…“ – skoro všechny podstránky

Nadpis sekce H2

Krátký ukázkový text, který simuluje popis položky na dva až tři řádky. Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

Krátký ukázkový text, který simuluje popis položky na dva až tři řádky. Odkaz v textu.

text-columns 1 sloupec s odrážkami Použití: GAP („vs. audit“, „Nejčastější nedostatky“), API, SCADA

Text v jednom sloupci

Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  • První odrážka
  • Druhá odrážka
  • Třetí odrážka
feature-grid columns 3, dividers, 6 položek Použití: „Proč testovat s námi“, „Co testujeme“, „Typické scénáře“

Mřížka 3 sloupce

  • Položka 1

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  • Položka 2

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  • Položka 3

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  • Položka 4

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  • Položka 5

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  • Položka 6

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.
feature-grid columns 4, bez linek, tone muted + CTA lišta Použití: Compliance, Součinnost (SCADA), Tematické GAP analýzy

Mřížka 4 sloupce

Perex sekce.

  • Položka 1

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  • Položka 2

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  • Položka 3

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  • Položka 4

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

Text CTA lišty pod mřížkou.

Poptat konzultaci
split-list se statistikou a tlačítkem Použití: outsourcing „Proč spolupracovat“

Nadpis vlevo

Velký perex vlevo.

70.000+

Popisek čísla

Doplňující text pod číslem.
Více informací

  • Položka 1

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  • Položka 2

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  • Položka 3

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  • Položka 4

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.
split-list položky s cenou Použití: pentest „Kolik stojí…“

Ceník

Perex k ceně.

  • Webová aplikace

    Od 80 000 Kč

  • Externí infrastruktura

    Od 60 000 Kč

  • Interní infrastruktura

    Od 120 000 Kč

split-list statistiky bez textu + odrážky vpravo Použití: webapp „Cena testu“

Cena testu

Perex k ceně.

Orientační cena

140 000 Kč

Délka testu

1–3 týdny

Co určuje cenu

  • Rozsah aplikace
  • Počet rolí
  • Typ autentizace
divided-list 2 sloupce + štítky (tags) Použití: outsourcing role, intern, OSINT (se štítky „Zdroje“)

Seznam ve dvou sloupcích

Perex sekce.

  • Položka 1

    Krátký šedý popis.

  • Položka 2

    Krátký šedý popis.

  • Položka 3

    Krátký šedý popis.

  • Položka 4

    Krátký šedý popis.

  • Položka 5

    Krátký šedý popis.

  • Položka 6

    Krátký šedý popis.

Zdroje

Štítek AŠtítek BŠtítek C
service-cards layout grid, 3 sloupce, popisky meta + CTA Použití: outsourcing „Modely spolupráce“

Karty služeb

  • Eyebrow

    Model A

    Podtitulek karty.

    Pro koho
    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.
    Co zajistíme
    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.
    Více o Model A

  • Eyebrow

    Model B

    Podtitulek karty.

    Pro koho
    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.
    Co zajistíme
    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.
    Více o Model B

  • Eyebrow

    Model C

    Podtitulek karty.

    Pro koho
    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.
    Co zajistíme
    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.
    Více o Model C

Nevíte si rady? Napište nám.

Poptat konzultaci
service-cards layout grid s ikonami v pozadí Použití: pentest „Typy penetračních testů“

Typy testů

service-cards layout grid, columns 2, primární tlačítka Použití: pentest „Co dělat mezi testy“

Dvě karty

  • Služba A

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.
    Zjistit více

  • Služba B

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.
    Zjistit více
service-cards layout aside (Související testy) Použití: všechny podstránky pentestů

Související testy

timeline 5 kroků (zalomení 4 + 1) Použití: outsourcing, pentest, extern, intern, webapp, SCADA, GAP

Jak to probíhá

Perex sekce.

  1. Krok 1

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  2. Krok 2

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  3. Krok 3

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  4. Krok 4

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

  5. Krok 5

    Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.
timeline tone muted (menší šedý popis) Použití: extern „Co prověříme“

Co prověříme

  1. Oblast 1

    Krátký šedý popis kroku.

  2. Oblast 2

    Krátký šedý popis kroku.

  3. Oblast 3

    Krátký šedý popis kroku.

  4. Oblast 4

    Krátký šedý popis kroku.
cta-bar s nadpisem H2 Použití: outsourcing (bez H2), webapp TrustScope (s H2)

TrustScope — spočítejte si cenu sami

Text výzvy k akci vlevo.

Spočítat cenu
pill-groups 3 skupiny barevných štítků + poznámka Použití: Certifikace a metodiky (pentest, extern), Standardy (GAP)

Skupiny štítků

Perex v širší variantě – parametr wideLead. Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

Modrá

ISO/IEC 27001ISO 9001

Zelená

OSCPeWPTCRTP

Fialová

OWASP WSTGPTES

Vínová

NIS2DORA

Volitelná poznámka vedle 4. skupiny (GAP).

bullets-2col s tlačítkem Použití: pentest „Co obsahuje report“, red teaming „vs. penetrační test“

Dva sloupce s odrážkami

Levý sloupec

  • První bod
  • Druhý bod
  • Třetí bod

Pravý sloupec

  • První bod
  • Druhý bod
  • Třetí bod
Zobrazit vzorový report
bar-stats 2 sloupce Použití: webapp „Nejčastější zranitelnosti“

Procentní statistiky

  • Broken Access Control 72,0 %
  • Injection 45,0 %
  • Security Misconfiguration 61,0 %
  • Vulnerable Components 38,0 %
faq první položka otevřená Použití: všechny stránky

Časté otázky

První otázka?

Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

Druhá otázka?

Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

Třetí otázka?

Krátký ukázkový text, který simuluje popis položky na dva až tři řádky.

contact-form výchozí Použití: všechny stránky

Dejte nám vědět!

Ozveme se vám do jednoho pracovního dne.