StudyFox Brandkit — system identyfikacji

Znak

Geometryczny lis z trzech trójkątów — czytelny od favikony po billboard. Znak występuje samodzielnie albo w zestawieniu ze słowem StudyFox (Bricolage Grotesque ExtraBold, „Fox" w kolorze marki).

StudyFox

Jasne tło

StudyFox

Ciemne tło

Mono na kolorze marki

Zasady

Pole ochronne: wokół znaku zachowaj odstęp równy wysokości ucha lisa (¼ wysokości znaku).
Minimalny rozmiar: 16 px (favikona) dla samego znaku, 90 px szerokości dla pełnego zestawienia.
Nie wolno: obracać, rozciągać, dodawać cieni i gradientów, zmieniać proporcji oczu, ani używać znaku na tłach o zbyt małym kontraście.
Pliki: mark.svg (jasne tła) · mark-dark.svg (ciemne tła).

Kolor

Dwie rodziny: Fox (ruda energia marki) i Den (ciepłe neutrale — papier w dzień, nora w nocy). Stany systemowe (poprawnie / błędnie / uwaga / info) mają własne kolory i nigdy nie zastępują koloru marki. Proporcja na ekranie: ~90% neutrali, ~8% koloru marki, ~2% stanów.

Fox — kolor marki

50

100

200

300

400

500

600

700

800

900

950

#FFF4ECanchor: 500 #ED5C0F · interakcje: 600 #C74A0A#3D1607

Den — neutrale

0

50

100

200

300

400

500

600

700

800

900

#FFFFFFtło jasne: 50 · tusz: 900 · tło ciemne: 950 #191613#221E1A

Role — używaj ról, nie surowych heksów

Rola	Jasny motyw	Ciemny motyw	Zastosowanie
`--ground`	den-50	den-950	tło strony
`--surface`	den-0	den-900	karty, panele
`--ink`	den-900	#F0EBE4	tekst główny
`--brand`	fox-500	fox-400	znak, wykresy, akcenty
`--brand-strong`	fox-600	fox-400	przyciski, linki (AA)
`--ok / --err / --warn / --info`	#348544 · #C43333 · #A66A00 · #33708F		wyłącznie stany odpowiedzi i komunikaty

Kontrast: tekst ≤ 18 px na jasnym tle używa fox-600, nigdy fox-500. Biały tekst kładziemy na fox-600 i ciemniejszych.
Zakaz gradientów indigo–fiolet i jakichkolwiek gradientów w UI produktu. Kolor kładziemy płasko; głębię robi cień i warstwa, nie gradient.
Ciemny motyw to nora, nie kosmos: zawsze ciepłe brązoszarości Den, nigdy niebieskie slate'y.

Typografia

Bricolage Grotesque mówi nagłówkami — ma lisi charakter i pełne polskie znaki. Instrument Sans robi całą resztę interfejsu. JetBrains Mono wyłącznie do liczb, statystyk, kodu i etykiet technicznych (zawsze z tabular-nums).

Display · Bricolage 800 · 38–48Zażółć gęślą jaźń przed egzaminem

H1 · Bricolage 700 · 30Psychologia emocji i motywacji

H2 · Bricolage 700 · 24Wyniki kolokwium — grupa środowa

H3 · Bricolage 600 · 20Powtórki zaplanowane na dziś

Body · Instrument 400 · 15Każde opublikowane pytanie ma oparcie w źródle z sylabusa — stronie podręcznika albo slajdzie z wykładu. Dzięki temu uczysz się tego, co naprawdę będzie na egzaminie, a nie tego, co ktoś zapamiętał inaczej.

Small · Instrument 400 · 13.5Ostatnia aktualizacja: 4 lipca 2026 · 1 248 pytań w 12 przedmiotach

Mono · JetBrains 600 · 13.5XP 12 480 · seria 21 dni · skuteczność 87,4%

Komponenty

Żywe wzorce — tak wyglądają w produkcie. Wszystko zbudowane wyłącznie z tokenów; żaden komponent nie definiuje własnych kolorów.

Przyciski

Odznaki

Nowość Zweryfikowane ze źródłem Odpowiedź do weryfikacji Odrzucone Z wykładu

Stany odpowiedzi w quizie

Kafle statystyk

12 480

punktów XP

21 dni

aktualna seria

87,4%

skuteczność

#3

ranking tygodnia

Pola formularzy

Głos marki

Po polsku, na „ty", konkretnie. StudyFox jest sprytnym kolegą z roku — wie, co będzie na egzaminie, i mówi krótko. Nigdy nie jest infantylny, nie krzyczy wykrzyknikami i nie wstydzi się powiedzieć „nie wiemy jeszcze".

Nie takUps! Coś poszło nie tak :( Spróbuj ponownie później!

TakNie udało się zapisać odpowiedzi. Sprawdź internet i spróbuj jeszcze raz.

Nie takGratulacje!!! Jesteś niesamowity! 🎉🎉🎉

Tak21 dni serii. Egzamin z emocji za 9 dni — jesteś przed planem.

Nie takTa odpowiedź może być nieprawidłowa lub prawidłowa.

TakPoprawna odpowiedź nie jest jeszcze potwierdzona. Moderator pracuje nad źródłem.

Przyciski = czasownik + rzecz: „Rozpocznij quiz", „Prześlij pytania", „Zapisz zmiany". Nigdy „OK" ani „Kliknij tutaj".
Liczby zawsze konkretne: „34 powtórki na dziś", nie „kilka powtórek".
Emoji: maksymalnie jedno, tylko w komunikatach sukcesu, nigdy w błędach ani nawigacji.
Polskie znaki są święte — ą, ę, ś, ć, ź, ż, ó, ł, ń w każdym tekście, także w e-mailach.

Tokeny

Źródło prawdy: tokens.css (role + skale, oba motywy) i tokens.json (dla narzędzi i aplikacji mobilnej). W aplikacji webowej (Tailwind 4) mapujemy tokeny w @theme:

@theme {
  --color-fox-50: #FFF4EC;   --color-fox-100: #FFE6D5;
  --color-fox-200: #FDCCAB;  --color-fox-300: #FAA976;
  --color-fox-400: #F5813D;  --color-fox-500: #ED5C0F;
  --color-fox-600: #C74A0A;  --color-fox-700: #A03C0C;
  --color-fox-800: #7D300E;  --color-fox-900: #66280F;
  --color-fox-950: #3D1607;

  --color-den-50: #FAF8F5;   --color-den-100: #F2EFEA;
  --color-den-200: #E5E0D8;  --color-den-300: #CFC9BF;
  --color-den-400: #A8A198;  --color-den-500: #7E7870;
  --color-den-600: #5C5750;  --color-den-700: #453F38;
  --color-den-800: #2E2A25;  --color-den-900: #221E1A;
  --color-den-950: #191613;

  --color-ok: #348544;   --color-ok-soft: #EAF5EC;
  --color-err: #C43333;  --color-err-soft: #FBEDEB;
  --color-warn: #A66A00; --color-warn-soft: #FBF3E0;
  --color-info: #33708F; --color-info-soft: #E9F2F7;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --radius-xs: 6px;  --radius-sm: 8px;  --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 24px;
}