Styleguide

Kolory marki

Tokeny Tailwind: gmbear-page, gmbear-primary, gmbear-accent, gmbear-secondary, gmbear-tertiary. Pasek podglądu = najbliższy odcień ze skali primary (accent wyłączony — własny kolor pod CTA i newralgiczne miejsca).

• page

  #04212b

  Odpowiednik skali: primary-950 — #10182f

• primary

  #8ab5f9

  Odpowiednik skali: primary-500 — #8ab5f9

• accent

  #ff7f11

  Poza skalą primary — akcent (CTA, przyciski, newralgiczne miejsca).

• secondary

  #757575

  Odpowiednik skali: primary-700 — #4466b0

• tertiary

  #e1e8ed

  Odpowiednik skali: primary-50 — #f2f5fa

Skala primary

Skala 11 stopni (50–950) jak w dokumentacji Tailwind: krzywa chromy i odcienia w OKLCH wzorowana na domyślnej palecie blue, z kotwicą 500 = primary (#8ab5f9) i jasnością dopasowaną w gamucie sRGB.

Klasy Tailwind: np. bg-gmbear-primary-300, text-gmbear-primary-700. Kolor domyślny: gmbear-primary (alias 500).

• 50

  #f2f5fa

  gmbear-primary-50

• 100

  #e7eef9

  gmbear-primary-100

• 200

  #d2e1f3

  gmbear-primary-200

• 300

  #b7d4f3

  gmbear-primary-300

• 400

  #9dc5f8

  gmbear-primary-400

• 500

  #8ab5f9

  gmbear-primary-500

• 600

  #648cd9

  gmbear-primary-600

• 700

  #4466b0

  gmbear-primary-700

• 800

  #2c447e

  gmbear-primary-800

• 900

  #16264c

  gmbear-primary-900

• 950

  #10182f

  gmbear-primary-950

Typografia

Skala rozmiarów Tailwind używana na stronie (przykłady).

Przyciski (wzorce)

Akcent CTA oraz warianty z palety primary.