Quizeko

Kolory Quizeko

Jasna zieleń i błękit, wersja 1.0. Ta sama paleta obowiązuje na stronie, na plakatach i w każdym innym projekcie — dlatego leży tu w trzech formatach do podlinkowania.

  • Infografika SVG

    Cała paleta na jednym obrazku: nazwy, hexy, kontrasty i proporcje. Wstaw jako zwykły obrazek.

    brand/quizeko-kolory.svg

  • Zmienne CSS

    Dziewięć zmiennych w :root plus cztery skróty na tekst, tło, akcję i odnośnik.

    brand/quizeko-kolory.css

  • Tokeny JSON

    To samo w formie danych — dla Tailwinda, Figmy albo własnego generatora motywu.

    brand/quizeko-kolory.json

Podpięcie w innym projekcie zajmuje jedną linijkę:

<link rel="stylesheet" href="https://quizeko.pl/brand/quizeko-kolory.css"> <img src="https://quizeko.pl/brand/quizeko-kolory.svg" alt="Paleta Quizeko">
Infografika z dziewięcioma kolorami Quizeko, ich hexami, kontrastami i zalecanym udziałem na ekranie
Tak wygląda plik, który podlinkujesz w innym projekcie.

Dziewięć kolorów

Jasne tony biorą duże płaszczyzny, ciemne zostają na tekst i przyciski.

  • Papier #FBFDF7
    --quizeko-papier Tło strony. Biel z odrobiną zieleni, żeby nie raziła w słońcu.
  • Niebo #E6F4FB
    --quizeko-niebo Jasny błękit pod sekcje wprowadzające i karty z pytaniem.
  • Łąka #EDF7E0
    --quizeko-laka Jasna zieleń pod treści i pola formularzy. Para dla Nieba.
  • Błękit #2E9BCB
    --quizeko-blekit Kolor znaku i ilustracji. Do tekstu tylko w dużym stopniu i na ciemnym.
  • Zieleń #7CC242
    --quizeko-zielen Podkreślenia, poprawna odpowiedź, wypełnienia ilustracji.
  • Głębia #14607F
    --quizeko-glebia Ciemny błękit: odnośniki, przyciski wtórne, tekst na jasnym tle.
  • Runo #33712C
    --quizeko-runo Ciemna zieleń: przycisk główny, nagłówki sekcji, stopka.
  • Grafit #12302A
    --quizeko-grafit Tekst podstawowy. Czerń przyciemniona zielenią, nigdy czysty #000.
  • Słońce #F5C000
    --quizeko-slonce Jedyny ciepły akcent. Maksymalnie jeden element na ekran.

Pary o sprawdzonym kontraście

Wartości policzone według WCAG 2.1. Poniżej 4,5 kolor nadaje się tylko na duży tekst albo na grafikę.

Próbka Tło i tekst Kontrast Ocena Używamy do
Aa Papier + Grafit 13,83 AAA tekst podstawowy
Aa Niebo + Grafit 12,62 AAA sekcje błękitne
Aa Łąka + Grafit 12,81 AAA sekcje zielone
Aa Papier + Głębia 6,81 AA odnośniki
Aa Papier + Runo 5,79 AA nagłówki
Aa Runo + Papier 5,79 AA przycisk główny
Aa Głębia + Papier 6,81 AA stopka, przycisk wtórny
Aa Zieleń + Grafit 6,51 AA plakietka poprawnej odpowiedzi
Aa Słońce + Grafit 8,38 AAA akcent
Aa Błękit + Grafit 4,50 AA plakietka, tekst od 16 px wzwyż

Zasady

Pięć rzeczy, które trzymają kolorystykę razem, kiedy projekt przechodzi przez kilka rąk.

  • Zieleń i błękit trzymamy w równowadze — żaden nie dominuje ponad dwie trzecie ekranu.
  • Duże płaszczyzny należą do jasnych tonów: Papier, Niebo, Łąka. Ciemne to tekst i przyciski.
  • Słońce jest akcentem, nie tłem. Jeden element na ekran.
  • Błękit #2E9BCB ma kontrast 3,07 na Papierze — nie stawiamy na nim drobnego tekstu.
  • Zamiast cieni używamy obramowań w kolorze Runo albo Głębia z przezroczystością.

Zmieniasz paletę? Edytuj config/marka.php i uruchom php artisan marka:build — SVG, CSS i JSON przeliczą się razem ze stroną.