Selleo · Przegląd
Design System

Jeden spójny język
wizualny Selleo

Kolory, typografia, komponenty produktu i komponenty strony selleo.com — z żywym podglądem i kodem gotowym do skopiowania.

#FF6D2A · primary Sofia Pro Płaskie · radius 4px Siatka 8px
01

Jak korzystać

Trzy kroki — od wartości marki do gotowego kodu.

1
Wybierz sekcję w menu

Podstawy to wartości marki (logo, kolory, typografia, siatka, promienie). Komponenty to gotowe elementy: z projektu (Figma) oraz ze strony selleo.com (kod 1:1).

2
Skopiuj kod lub plik

Przy każdym komponencie: HTML i CSS kopiują do schowka, Pobierz zapisuje plik, Kod pokazuje źródło, Powiększ otwiera podgląd 1:1. Przełącznik Desktop / Laptop / Tablet / Mobile pokazuje zachowanie responsywne.

3
Przekaż wytyczne AI

Pobierz plik wytycznych (poniżej) i dodaj do projektu w Claude Code lub Claude Design — każdy nowy landing powstanie zgodnie z marką.

02

Mapa systemu

Kliknij kafel, aby przejść do sekcji.

Podstawy · 00–05

Fundamenty marki

Znak, kolory, typografia, siatka i odstępy, promienie i cienie — źródło wszystkich wartości.

LogoKoloryTypografiaSiatkaTokeny
Otwórz → Komponenty · 06–10

Komponenty produktu

Kontrolki interfejsu odwzorowane z projektu Figma — przyciski, pola, checkboxy, tagi, zakładki, menu — z wszystkimi stanami i kodem.

PrzyciskiPolaCheckboxTagiIkonyZdjęcia
Otwórz → Komponenty · strona www

Komponenty selleo.com

Realny kod strony (1:1): nawigacja, nagłówki i bloki tekstowe, karty, formularz kontaktowy, opinie i oceny, stopka — z podglądem w 4 rozdzielczościach.

NawigacjaNagłówkiKartyFormularzOpinieStopka
Otwórz →
LegacySzukasz poprzedniej wersji? Design System 1.0 obowiązywał do 2025 roku i jest zarchiwizowany w zakładce Legacy — z typografią, rytmem pionowym i komponentami.Otwórz →
03

Zasady

Cztery reguły, które trzymają system w ryzach.

Spójność

Te same wartości wszędzie — jeden pomarańcz, jedna typografia, jeden zestaw odstępów.

Jedno źródło

Wartości pochodzą z księgi marki i żywego kodu selleo.com — bez domysłów.

Dostępność

Widoczny focus, czytelny kontrast, opisowe etykiety — interfejs działa dla każdego.

Prostota

Płasko, bez cieni i gradientów, promień 4px. Forma nie przeszkadza treści.

04

Dla AI

Paczka z plikami marki dla Claude Code i aplikacji Claude. Wystarczy ją zainstalować, a Claude buduje strony zgodne z marką. Poniżej są też same wytyczne i prompty.

selleo-design-system.zip — paczka dla Claude

Cały system w jednym archiwum, czytelnym dla każdego agenta AI (Claude Code, Codex, Cursor, Copilot). Ten sam układ co paczka npm @selleo/selleo-design-system, plus zdjęcia i bloki. W środku: zasady dla agentów ai/guidelines.md (strony www i aplikacje), specyfikacje specs/ (podstawy, zamknięta mapa tokenów, komponenty, wzorce), selleo.css z trzema warstwami tokenów, motyw Tailwind i shadcn/ui, nagłówek i stopka 1:1, audyt token-audit.mjs, który wyłapuje wartości wpisane na sztywno, gotowe AGENTS.md i CLAUDE.md, a do tego fonty, logo, grafiki, ikony, zdjęcia i bloki strony. Dla Claude to jednocześnie skill (SKILL.md).

specs/AGENTS.mdtoken-auditSKILL.mdWytyczne + tokenyselleo.cssFontyLogoGrafikiIkonyZdjęciaBlokiSzablon startowy
1

Repozytorium (Claude Code, Codex, Cursor, Copilot): rozpakuj ZIP do selleo-design-system/ w katalogu projektu i skopiuj agents/AGENTS.md oraz agents/CLAUDE.md do katalogu głównego (w AGENTS.md ustaw ścieżkę selleo-design-system). W projekcie z dostępem do npm wygodniejsza jest paczka npm. Agent przeczyta zasady i specyfikacje w każdej sesji, a node selleo-design-system/scripts/token-audit.mjs src sprawdzi kod (także w CI).

2

Skill Claude: folder do .claude/skills/ (lub ~/.claude/skills/ dla wszystkich projektów), a w aplikacji Claude: Ustawienia → Capabilities → Skills → wgraj ZIP (za duży? wersja bez zdjęć). Narzędzia webowe czytają design system pod adresem /llms.txt.

3

Napisz np. „Zbuduj landing o X zgodnie z design systemem Selleo”. Claude sam wczyta skill i użyje plików z paczki.

SELLEO-DESIGN-GUIDELINES.md

Jeden plik do Claude Design i Claude Code. Zawiera zasady dla stron www i aplikacji, gotowy kod (pełny selleo.css z fontami Sofia Pro, nagłówek i stopkę 1:1, wzorce sekcji), skale typografii i odstępów na każdy widok, adresy logo, ikon i zdjęć oraz listę kontrolną. AI składa stronę z gotowych klocków, zamiast zgadywać fonty, marginesy czy wygląd stopki.

Markdownselleo.cssNagłówek + stopkaWzorce sekcjiTokeny JSONPrompt budującyPrompt naprawczy
1

Pobierz .md z wersji online design systemu, bo tylko wtedy adresy fontów, logo i ikon wskazują na działający serwer. W Claude Design dołącz plik do rozmowy, a w Claude Code dodaj go do repozytorium.

2

Nowa strona: wklej prompt budujący, który zawiera już cały plik, i uzupełnij ostatnią linijkę opisem landingu. Z dołączonym plikiem wystarczy napisać „Zbuduj landing X zgodnie z SELLEO-DESIGN-GUIDELINES.md”.

3

Poprawki: przy dołączonym pliku .md wklej prompt naprawczy. AI podmieni fonty i style na selleo.css, wstawi właściwy nagłówek i stopkę, przebuduje sekcje na wzorce i odhaczy listę kontrolną.

02
Podstawy

Kolory

System oparty na skalach: primary (pomarańcz), secondary (błękit), neutral (szarości) i states. Wartości z księgi marki.

Primary
primary.500165 C
primary.500
#FF6D2A · hsl(19,100,58)
Główny akcent: CTA, wyróżnienia, stany aktywne.
primary.600
primary.600
#E25718 · hsl(19,81,49)
Hover / active dla akcentu.
primary.400
primary.400
#FF905D · hsl(19,100,68)
Jaśniejszy akcent, gradienty.
primary.200
primary.200
#FFEAE0 · hsl(19,100,94)
Tło akcentowe, podświetlenia.
primary.100
primary.100
#FFF8F5 · hsl(18,100,98)
Najlżejsze tło sekcji akcentowej.
Secondary
secondary.500298 C
secondary.500
#5C99D2 · hsl(209,57,59)
Kolor wspierający, ilustracje, akcenty informacyjne.
secondary.600
secondary.600
#3871A5 · hsl(209,49,43)
Ciemniejszy błękit, hover.
secondary.200
secondary.200
#DFEBF6 · hsl(209,56,92)
Tło informacyjne.
secondary.100
secondary.100
#F3F8FC · hsl(207,60,97)
Najlżejsze tło.
Neutral
black · 426 C
black
#2F3033 · hsl(225,4,19)
Nagłówki, tekst o najwyższym kontraście, ciemne tła.
neutral.600
neutral.600
#4C4D52 · hsl(230,4,31)
Tekst drugorzędny, liczby statystyk.
neutral.500
neutral.500
#696B72 · hsl(227,4,43)
Tekst body / akapity.
neutral.400
neutral.400
#95979D · hsl(225,4,60)
Podpisy, meta, placeholdery.
neutral.300
neutral.300
#BFC0C4 · hsl(228,4,76)
Stany wyłączone, ikony dekoracyjne.
neutral.200
neutral.200
#EAEAEB · hsl(240,2,92)
Obramowania, dzielniki.
neutral.100
neutral.100
#F4F5F5 · hsl(180,5,96)
Tło sekcji, powierzchnie pomocnicze.
white
white
#FFFFFF
Tło główne, karty.
States
danger.500
danger.500
#E81B2F · hsl(354,82,51)
Błędy, walidacja, akcje destrukcyjne.
hero.overlay
hero.overlay
#2F3033 @ 70%
Przyciemnienie zdjęć pod tekstem hero.
transparent
transparent
#000000 @ 0%
Brak wypełnienia.
03
Podstawy

Typografia

Zestaw wag na poziom. Każdy poziom ma przypisane wagi Sofia Pro i stałą interlinię/tracking. Rozmiary dopasowane do 4 widoków — przełącz je u góry, żeby odczytać docelową wartość. Przy każdej próbce skopiujesz gotowy CSS.

Widok
Zmienia się rozmiar fontu · interlinia i tracking bez zmian
Nagłówki
Tekst / body
Wyjątki i elementy specjalne
01
Podstawy

Logo

Znak: sygnet z dwóch splecionych „węzłów" obok wordmarku „selleo". Wersją podstawową jest sygnet gradientowy (stosowany m.in. w social mediach) — to on jest główny. Każdy układ pokazujemy zawsze w 4 wariantach kolorystycznych. Najedź na kafel, aby pobrać SVG.

01 · Wersja podstawowa

Logo poziome z sygnetem gradientowym to wersja główna i oficjalna. Obok — pozostałe warianty koloru tego samego układu: kolor do druku (płaskie kolory marki, bez gradientu), czerń na bieli i biel na czerni.

poziome gradient
Gradient · podstawowa
Wersja główna. Ekran, social media.
poziome kolor druk
Kolor · druk
Płaskie kolory marki, bez gradientu.
poziome czerń
Czerń na bieli
Mono #2F3033 na jasnym tle.
poziome biel
Biel na czerni
Mono biała na ciemnym tle.
02 · Warianty układu

Pozostałe układy — każdy w tych samych 4 wariantach kolorystycznych. Sygnet: gdy mało miejsca lub jako ikona/avatar. Wersja z hasłem: gdy potrzebny opis „web & mobile".

Poziome z hasłem „web & mobile"
poziome hasło gradient
Gradient · podstawowa
Wersja główna.
poziome hasło druk
Kolor · druk
Płaskie kolory marki.
poziome hasło czerń
Czerń na bieli
Mono #2F3033.
poziome hasło biel
Biel na czerni
Mono biała na ciemnym.
Pionowe wąskie / kwadratowe formaty
pionowe gradient
Gradient · podstawowa
Wersja główna.
pionowe druk
Kolor · druk
Płaskie kolory marki.
pionowe czerń
Czerń na bieli
Mono #2F3033.
pionowe biel
Biel na czerni
Mono biała na ciemnym.
Sygnet ikona · avatar · favicon
sygnet gradient
Gradient · podstawowa
Wersja główna.
sygnet druk
Kolor · druk
Płaskie kolory marki.
sygnet czerń
Czerń na bieli
Mono #2F3033.
sygnet biel
Biel na czerni
Mono biała na ciemnym.
03 · Pole ochronne

Wokół znaku zachowaj wolną przestrzeń równą wysokości sygnetu (jednostka x). Żaden inny element, tekst ani krawędź nie może wejść w to pole.

x x pole ochronne
04 · Kolorystyka znaku

Wersja podstawowa (ekran): sygnet w gradiencie. Do druku: płaskie kolory marki (Pantone / CMYK). Wordmark „selleo" zawsze #2F3033.

RolaPodglądHEXPantone
Wordmark (ciemny)#2F3033426 C
Sygnet — pomarańcz (druk)#FF6D2A165 C
Sygnet — błękit (druk)#5C99D2298 C
Sygnet — gradient pomarańcz#FF6D2A → #F79606—
Sygnet — gradient błękit#0077B2 · #0093E9 · #00D0FE—

Wartości CMYK do druku — patrz księga (sekcja 04). HEX pobrany bezpośrednio z plików wariantów.

05 · Skalowanie i minimalny rozmiar
min poziome
Poziome · min.
Web: ≥ 120px szer. · Druk: patrz księga (mm).
min sygnet
Sygnet · min.
Web: ≥ 24px · favicon 16px (uproszczony).

Poniżej minimalnego rozmiaru znak traci czytelność — używaj wtedy samego sygnetu. Dokładne wartości mm dla druku znajdują się w księdze.

06 · Stosowanie na różnych tłach
na białym
Jasne tło
Wersja gradientowa (podstawowa).
na ciemnym
Ciemne tło
Wersja biała (mono).
na kolorze
Kolorowe tło
Wersja biała.
na zdjęciu
Zdjęcie / niejednolite tło
Logo na białym polu ≥ pole ochronne.
07 · Niedopuszczalne modyfikacje
Nie rozciągaj poziomo.
Nie ściskaj / zmieniaj proporcji.
Nie obracaj znaku.
Nie zmieniaj kolorów sygnetu.
Nie dodawaj cieni ani efektów.
Nie umieszczaj na średnim szarym (mały kontrast).
Zasady w skrócie
✓ Rób
  • Domyślnie używaj wersji gradientowej (ekran, social media).
  • Do druku — wersja kolorowa płaska; na ciemnym tle — biała.
  • Zachowaj pole ochronne (= wysokość sygnetu) z każdej strony.
  • Poniżej minimalnego rozmiaru użyj samego sygnetu.
✗ Nie rób
  • Nie rozciągaj, nie ściskaj, nie obracaj znaku.
  • Nie zmieniaj kolorów sygnetu ani proporcji.
  • Nie dodawaj cieni ani konturów.
  • Nie umieszczaj na tle o zbyt małym kontraście.
04
Podstawy

Siatka i odstępy

Wszystkie odstępy w projekcie stoją na jednej siatce — wielokrotności 8 px. Poniżej: skala odstępów, rytm sekcji i siatka kolumn.

Jedna zasada: każdy odstęp, padding i margines to wielokrotność 8 px (4 px to jedyny wyjątek — do drobnych korekt). Jeśli w projekcie widzisz inną liczbę — zaokrąglij ją do najbliższej wartości ze skali albo dopytaj projektanta, czy jest celowa.
Skala odstępów

Szerokość prostokąta odpowiada wielkości odstępu. Mniejsze wartości stosujemy wewnątrz elementów i treści, większe — między sekcjami strony.

4 px
Najmniejszy odstęp — drobne korekty, np. między ikoną a tekstem.
8 px
Podstawowy odstęp wewnątrz elementów.
16 px
Lead → tekst regular; odstępy między elementami treści i między kartami.
24 px
Kicker → nagłówek sekcji; marginesy boczne na telefonie.
32 px
Odstęp między blokami treści; przerwy między kolumnami na desktopie.
40 px
Większe przerwy wewnątrz sekcji.
48 px
Nagłówek sekcji → lead (Body large).
64 px
Tekst wprowadzający → treść sekcji; padding górny i dolny sekcji na telefonie.
72 px
Duże przerwy między blokami treści na mniejszych ekranach.
96 px
Padding górny i dolny sekcji na tablecie.
120 px
Padding górny i dolny sekcji na desktopie i laptopie.
144 px
Największe przerwy między blokami na szerokich ekranach.
192 px
Największe przerwy — sekcje powitalne na dużych ekranach.

Wszystkie wartości to wielokrotności 8 px. Pośrednie stopnie (56 · 80 · 88…) są dozwolone, gdy potrzebne. W kodzie odpowiadają im tokeny --space-4 … --space-192.

Rytm sekcji

Każda sekcja strony ma ten sam rytm: kicker → nagłówek (H1) → lead (Body large) → tekst (Body base) → treść. Odstępy i typografia w kartach są rzeczywiste — 24 px to 24 px, a rozmiary fontów pochodzą z zakładki 03 Typografia dla danego widoku. Na tablecie i telefonie rytm skraca się o jeden stopień skali.

Desktop / Laptop
120 px · padding sekcji
Dlaczego Selleo?
24 px

Dla innowatorów e‑learningu

48 px

Tworzymy autorskie platformy LMS, łącząc technologię, design i strategię.

16 px

Od blisko 20 lat pomagamy klientom zamieniać pomysły w skalowalne produkty — od aplikacji webowych i mobilnych po złożone platformy SaaS i rozwiązania LMS.

64 px
120 px · padding sekcji
Tablet
96 px · padding sekcji
Dlaczego Selleo?
16 px

Dla innowatorów e‑learningu

32 px

Tworzymy autorskie platformy LMS, łącząc technologię, design i strategię.

16 px

Od blisko 20 lat pomagamy klientom zamieniać pomysły w skalowalne produkty — od aplikacji webowych i mobilnych po złożone platformy SaaS i rozwiązania LMS.

48 px
96 px · padding sekcji
Mobile
64 px · padding sekcji
Dlaczego Selleo?
16 px

Dla innowatorów e‑learningu

24 px

Tworzymy autorskie platformy LMS, łącząc technologię, design i strategię.

16 px

Od blisko 20 lat pomagamy klientom zamieniać pomysły w skalowalne produkty — od aplikacji webowych i mobilnych po złożone platformy SaaS i rozwiązania LMS.

32 px
64 px · padding sekcji
Siatka kolumn

Treść układamy na kolumnach. Gutter to odstęp między kolumnami, margines — odstęp od krawędzi ekranu. Liczba kolumn rośnie wraz z szerokością ekranu.

Desktop HD
1920 × 1080px +
12 kolumn
Typcenter
Gutter32px
Margines120px
Laptop
1280 × 800px +
12 kolumn
Typstretch
Gutter24px
Margines48px
Tablet
768 × 1024px +
6 kolumn
Typstretch
Gutter24px
Margines24px
Mobile
360 × 640px +
4 kolumny
Typstretch
Gutter16px
Margines24px
Breakpointy

Progi szerokości ekranu, od których włącza się dana siatka.

UrządzenieOd szerokościKolumnyTypGutterMargines
Mobile360px4stretch16px24px
Tablet768px6stretch24px24px
Laptop1280px12stretch24px48px
Desktop HD1920px12center32px120px
Układ sekcji strony selleo.com

Realne wartości z kodu strony (Tailwind). Wystarczą, aby złożyć spójny landing z komponentów — pełne sekcje nie są potrzebne jako wzorce.

ElementMobileod 768pxod 992pxod 1200pxUwagi
Kontenerwidth:100%; padding:0 24pxmax-width 1720px od 1720px (wyśrodkowany)
Odstęp pionowy sekcji64px (py-16)96px (py-24)120px (py-30)—hero: 80px → 112px od 992px
Nagłówek sekcjimargin-bottom 48px; opis max-width 476px (od 1680px: 628px)kicker 14px/800 uppercase, letter-spacing .15em, #FF6D2A
Siatka kart1 kolumna, gap 24px2 kolumny—opinie: 3 kolumny (calc(33% - 24px))awards: gap 8 → 16 → 32px
Nagłówek strony64px80px96px—fixed; po scrollu tło rgba(255,255,255,.9)
Tło sekcji#FFFFFF · #F4F5F5 (hero, zespół) · #2F3033 (ciemne: UI/UX, kontakt)karty na białym mają border 1px #EAEAEB
05
Podstawy

Promienie i cienie

Zaokrąglenia porządkujemy w domkniętą skalę (obserwacja strony + decyzja). Blur i drop shadow mają już zdefiniowane wartości w Figmie — poniżej wprost z projektu.

Skala promieni — role

Cztery role bazowe: brak dla boxów i grafik, 4px dla przycisków i inputów (dopuszczalne również dla boxów), 16px dla opcjonalnych zdjęć / case studies, oraz full dla elementów pigułkowych (pille, tagi, avatary).

--radius-0
Brak · 0
border-radius: 0
Boxy, sekcje, elementy graficzne, kontenery treści.
Button
--radius-btn
Małe · 4px
border-radius: 4px
Przyciski, inputy, drobne kontrolki — oraz dopuszczalne dla boxów.
--radius-media
Media · 4px
border-radius: 4px
Zdjęcia, karty, media — ten sam promień co reszta.
--radius-card
Karta · 16px
border-radius: 16px
Wyjątek: karty case study i duże kafle portfolio (jak na selleo.com). Nie dla przycisków, inputów ani zwykłych kart.
Pill
--radius-pill
Full · 999px
border-radius: 999px
Pille, tagi, badge, avatary (okręgi).
Zasada

Trzymamy się trzech wartości bazowych: 0 dla kontenerów i sekcji, 4px dla wszystkich elementów prostokątnych (przyciski, inputy, karty, zdjęcia, media) oraz full (999px) dla pigułek, tagów i okręgów. Jedyny wyjątek: 16px dla kart case study i dużych kafli portfolio. Bez innych wartości pośrednich (8, 12, 24px…).

0
4
16 · wyjątek
full
Blur

Rozmycie warstwy (background / layer blur) — jedna wartość: 8px. Do warstw za elementami: overlaye, modale, efekt „glass". Stan bazowy to 0px (brak rozmycia).

--blur-0 Brak 0px
--blur-100 Rozmycie 8px
Drop shadow

Jeden token cienia — dwuwarstwowy. Wszystkie cienie używają koloru neutral‑black. Do kart, dymków i modali.

--shadow-100
shadow · 100
Kolor: neutral‑black · #2F3033
Warstwa 1Blur 16·X 0·Y 0·Krycie 5%
Warstwa 2Blur 72·X 0·Y 32·Krycie 7%
box-shadow: 0 0 16px rgba(47,48,51,.05), 0 32px 72px rgba(47,48,51,.07);
06
Komponenty

Przyciski

Kanoniczny zestaw przycisków prosto z projektu (Figma) — źródło prawdy dla całej strony. Każdy typ pokazany w komplecie stanów Default · Hover · Focus · Disabled i rozmiarów. Wszystkie płaskie, radius 4px, bez cienia. Każdy odwzorowany 1:1 jako działający kod — na górze karty żywy element, obok wszystkie stany, a niżej gotowy HTML/CSS do skopiowania oraz pobranie SVG i kodu.

Przyciski tekstowe
Primary — akcja głównarc-btn--primary

Wypełnienie #FF6D2A, tekst biały, radius 4px, wysokość 44/32px (Medium/Small). Hover ciemnieje do #E25718, focus dokłada pierścień, disabled to 30% krycia. Jeden na sekcję.

Element działa — najedź kursorem, kliknij lub użyj Tab (focus). Po lewej Medium, po prawej Small.
Wszystkie stany · Medium
Default
Text
Hover
Text
Focus
Text
Disabled
Text
<button class="rc-btn rc-btn--primary">
  <svg class="rc-ic" viewBox="0 0 16 16" fill="none">
    <path d="M8 4v8M12 8H4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  </svg>
  Text
</button>

<!-- mały: dodaj klasę rc-btn--sm -->
<button class="rc-btn rc-btn--primary rc-btn--sm">Text</button>
.rc-btn{
  --h:44px; --fs:16px; --pad:16px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--h); padding:0 var(--pad);
  font-family:"Sofia Pro",system-ui,sans-serif; font-weight:500; font-size:var(--fs);
  line-height:1; border-radius:4px; border:1px solid transparent; cursor:pointer;
}
.rc-btn .rc-ic{width:16px; height:16px; flex:none}
.rc-btn--sm{--h:32px; --fs:14px; --pad:12px; gap:6px}

.rc-btn--primary{background:#FF6D2A; color:#fff; border-color:#FF6D2A}
.rc-btn--primary:hover{background:#E25718; border-color:#E25718}
.rc-btn--primary:focus-visible{outline:none; background:#E25718;
  box-shadow:0 0 0 2px #fff, 0 0 0 3px #E25718}
.rc-btn--primary:disabled{opacity:.3; pointer-events:none}
Pobierz SVG
Primary outlined — akcja drugorzędnarc-btn--outlined

Białe tło, kontur i tekst #FF6D2A. Hover podkłada #FFF8F5, focus dokłada pierścień. Do akcji wtórnej obok Primary.

Element działa — najedź, kliknij lub użyj Tab (focus).
Wszystkie stany · Medium
Default
Text
Hover
Text
Focus
Text
Disabled
Text
<button class="rc-btn rc-btn--outlined">
  <svg class="rc-ic" viewBox="0 0 16 16" fill="none">
    <path d="M8 4v8M12 8H4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  </svg>
  Text
</button>
.rc-btn--outlined{background:#fff; color:#FF6D2A; border-color:#FF6D2A}
.rc-btn--outlined:hover{background:#FFF8F5}
.rc-btn--outlined:focus-visible{outline:none; background:#FFF8F5;
  box-shadow:0 0 0 2px #fff, 0 0 0 3px #E25718}
.rc-btn--outlined:disabled{opacity:.3; pointer-events:none}

/* wymaga bazowej reguły .rc-btn (patrz karta Primary) */
Pobierz SVG
Link — akcja tekstowa z ikonąrc-btn--link

Bez tła, z ikoną i podkreśleniem. Domyślnie neutralny #696B72, na hover pomarańcz #FF6D2A. Do akcji trzeciorzędnych.

Element działa — najedź, kliknij lub użyj Tab (focus).
Wszystkie stany
Default
Text
Hover
Text
Focus
Text
Disabled
Text
<button class="rc-btn rc-btn--link">
  <svg class="rc-ic" viewBox="0 0 16 16" fill="none">
    <path d="M8 4v8M12 8H4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  </svg>
  Text
</button>
.rc-btn--link{background:transparent; color:#696B72; border-color:transparent;
  text-decoration:underline; text-underline-offset:3px; padding:0 2px}
.rc-btn--link:hover{color:#FF6D2A}
.rc-btn--link:focus-visible{outline:none; color:#FF6D2A;
  box-shadow:0 0 0 3px #FFEAD9; border-radius:4px}
.rc-btn--link:disabled{opacity:.3; pointer-events:none}
Pobierz SVG
Przyciski ikonowe
Ikonowy — Primaryrc-ibtn--primary

Kwadrat 1:1, radius 4px, sama ikona. Rozmiary Large 40 · Medium 32 · Small 24 px. Wypełnienie #FF6D2A, hover #E25718.

Element działa — najedź, kliknij lub użyj Tab. Kolejno: Large, Medium, Small.
Wszystkie stany · Large
Default
Hover
Focus
Disabled
<button class="rc-ibtn rc-ibtn--primary" aria-label="Akcja">
  <svg viewBox="0 0 20 20" fill="none">
    <path d="M5 10.5l3.5 3.5L15 6.5" stroke="currentColor"
      stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</button>

<!-- rozmiary: rc-ibtn--md (32) · rc-ibtn--sm (24) -->
.rc-ibtn{display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:4px; border:1px solid transparent; cursor:pointer}
.rc-ibtn svg{width:20px; height:20px}
.rc-ibtn--md{width:32px; height:32px} .rc-ibtn--md svg{width:16px; height:16px}
.rc-ibtn--sm{width:24px; height:24px} .rc-ibtn--sm svg{width:14px; height:14px}

.rc-ibtn--primary{background:#FF6D2A; color:#fff}
.rc-ibtn--primary:hover{background:#E25718}
.rc-ibtn--primary:focus-visible{outline:none; background:#E25718;
  box-shadow:0 0 0 2px #fff, 0 0 0 3px #E25718}
.rc-ibtn:disabled{opacity:.3; pointer-events:none}
Pobierz SVG
Ikonowy — Default (neutralny)rc-ibtn--default

Białe tło, delikatna ramka #EAEAEB, ikona neutralna. Hover podkłada #F4F5F5. Do akcji pomocniczych na jasnym tle.

Element działa — najedź, kliknij lub użyj Tab. Kolejno: Large, Medium, Small.
Wszystkie stany · Large
Default
Hover
Focus
Disabled
<button class="rc-ibtn rc-ibtn--default" aria-label="Akcja">
  <svg viewBox="0 0 20 20" fill="none">
    <path d="M5 10.5l3.5 3.5L15 6.5" stroke="currentColor"
      stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</button>
.rc-ibtn--default{background:#fff; color:#2F3033; border:1px solid #EAEAEB}
.rc-ibtn--default:hover{background:#F4F5F5}
.rc-ibtn--default:focus-visible{outline:none;
  box-shadow:0 0 0 2px #fff, 0 0 0 3px #E25718}
.rc-ibtn:disabled{opacity:.3; pointer-events:none}

/* wymaga bazowej reguły .rc-ibtn (patrz karta Primary) */
Pobierz SVG
Odnośnik tekstowy (inline)
Odnośnik tekstowyrc-tlink

Link wewnątrz akapitu. Neutralny #696B72 w spoczynku, pomarańczowy #FF6D2A z podkreśleniem na hover, tło podświetlenia na focus, wyszarzony gdy disabled.

Tworzymy oprogramowanie szyte na miarę — zobacz nasze realizacje i przekonaj się sam.
Odnośnik działa — najedź, kliknij lub użyj Tab (focus).
Wszystkie stany
Default
odnośnik
Hover
odnośnik
Focus
odnośnik
Disabled
odnośnik
<a class="rc-tlink" href="#">zobacz nasze realizacje</a>
.rc-tlink{font-family:"Sofia Pro",system-ui,sans-serif; font-weight:500; font-size:16px;
  color:#696B72; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.rc-tlink:hover{color:#FF6D2A}
.rc-tlink:focus-visible{outline:none; color:#FF6D2A;
  background:#FFEAD9; border-radius:4px; box-shadow:0 0 0 3px #FFEAD9}
Pobierz SVG
✓ Rób
  • Jeden przycisk Primary na sekcję (akcja główna).
  • Zachowuj hierarchię: Primary → Outlined → Link.
  • Czasownik akcji w etykiecie: „Contact", „See our work".
  • Widoczny focus (pierścień) — dostępność.
✗ Nie rób
  • Dwóch przycisków Primary obok siebie.
  • Cienia ani gradientu (przyciski są płaskie).
  • Innego promienia niż 4px.
  • Mieszania Medium i Small w jednym rzędzie akcji.
Przyciski ze strony selleo.com

Realne przyciski i linki CTA strony www (kod 1:1, Tailwind). Pierwszy w parze = domyślny, drugi = hover; kod pod przyciskiem Kod.

Przyciski i linki CTA sekcji.button · .contact-button · .linked-button

„View full portfolio” (pełny), „See our work” (link ze strzałką), „Test our team” (pełny), „Share this offer” (obramowany).

—
Przyciski formularza — stany.submit-button · .popup-button

„Send message” i „Prefer a call?”: domyślny / hover / focus-visible / disabled oraz „Attach File”. Górny blok na białym, dolny na ciemnym tle.

—
07
Biblioteka UI

Komponenty

Komponenty interfejsu z projektu Selleo — pola formularzy, kontrolki wyboru, nawigacja i elementy aplikacji. Każda kategoria to osobna podstrona w menu po lewej. Każdy wariant i stan jako gotowy plik do pobrania: najedź na kafel → strzałka, albo pobierz całą kategorię. Warianty ciemne prezentowane są na ciemnym tle. Pliki: folder assets/components/.

Podkategorie
07
Komponenty · Pola tekstowe

Pola tekstowe

Pole tekstowe w dwóch rozmiarach — Medium (48 px) i Small (36 px) — w pełnym zestawie stanów. Kolejność stanów: spoczynek → interakcja → walidacja.

Pole tekstowerc-inp

Etykieta + pole z ikoną wiodącą. Rozmiary Medium 48px / Small 36px, radius 4px. Obrys: spoczynek #EAEAEB → hover #BFC0C4 → focus #FF6D2A; błąd #E81B2F; disabled tło #EAEAEB.

Pole działa — kliknij i wpisz tekst; obrys zmienia się na pomarańczowy (focus).
Wszystkie stany · Medium
Default
Hover
Focus
Wypełniony
Błąd
Disabled
<label class="rc-field">
  <span class="lb2">Adres e-mail</span>
  <span class="rc-inp">
    <svg class="rc-lead" viewBox="0 0 20 20" fill="none">
      <rect x="2.5" y="4.5" width="15" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/>
      <path d="M3 6l7 4.5L17 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
    </svg>
    <input type="email" placeholder="jan.kowalski@firma.pl">
  </span>
</label>

<!-- mały: <span class="rc-inp rc-inp--sm"> · błąd: dodaj is-error -->
.rc-inp{display:flex; align-items:center; gap:10px; height:48px; padding:0 14px;
  background:#fff; border:1px solid #EAEAEB; border-radius:4px; transition:border-color .15s}
.rc-inp .rc-lead{width:20px; height:20px; color:#BFC0C4}
.rc-inp input{flex:1; border:0; outline:0; background:none; font-size:15px; color:#2F3033}
.rc-inp input::placeholder{color:#95979D}
.rc-inp:hover{border-color:#BFC0C4}
.rc-inp:hover .rc-lead{color:#4C4D52}
.rc-inp:focus-within{border-color:#FF6D2A}
.rc-inp:focus-within .rc-lead{color:#4C4D52}
.rc-inp--sm{height:36px}
.rc-inp.is-error{border-color:#E81B2F}
.rc-inp.is-disabled{background:#EAEAEB; border-color:#BFC0C4; pointer-events:none}
Pobierz SVG
Pole tekstowe ze strony selleo.com

Realne pole formularza kontaktowego (etykieta nad polem, placeholder w polu). Kod 1:1.

Pole tekstowe — stany.form-input + label

Pusty · focus (placeholder znika) · wypełniony · błąd walidacji. Jasne i ciemne tło.

—
07
Komponenty · Checkbox

Checkbox

Cztery stany (Domyślny, Hover, Focus, Błąd) w dwóch rozmiarach. Wariant jasny — na jasne tła; wariant ciemny — na ciemne tła (jaśniejszy obrys).

Checkboxrc-check

Kwadrat 22px (base) / 16px (small), radius 3px, obrys 2px. Spoczynek #4C4D52, zaznaczony i hover/focus #FF6D2A, błąd #E81B2F. Znacznik biały.

Checkboxy działają — kliknij, aby przełączyć zaznaczenie.
Wszystkie stany
Domyślny
Zaznaczony
Hover
Focus
Błąd
<label class="rc-check">
  <input type="checkbox">
  <span class="bx">
    <svg viewBox="0 0 16 16" fill="none">
      <path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </span>
  Zgadzam się na warunki
</label>
.rc-check{display:inline-flex; align-items:center; gap:10px; font-size:15px;
  color:#2F3033; cursor:pointer; position:relative}
.rc-check input{position:absolute; opacity:0; width:22px; height:22px; margin:0}
.rc-check .bx{width:22px; height:22px; border-radius:4px; border:2px solid #4C4D52;
  display:inline-flex; align-items:center; justify-content:center; background:#fff; transition:.15s}
.rc-check .bx svg{width:14px; height:14px; color:#fff; opacity:0}
.rc-check input:checked + .bx{background:#FF6D2A; border-color:#FF6D2A}
.rc-check input:checked + .bx svg{opacity:1}
.rc-check:hover .bx{border-color:#FF6D2A}
.rc-check input:focus-visible + .bx{box-shadow:0 0 0 3px #FFEAD9; border-color:#FF6D2A}
.rc-check.is-error .bx{border-color:#E81B2F}
Pobierz SVG
Checkbox ze strony selleo.com

Realny checkbox formularza kontaktowego. Kod 1:1.

Checkbox — stanylabel:has(input[type=checkbox])

Niezaznaczony · zaznaczony · hover. Jasne i ciemne tło.

—
07
Komponenty · Radio button

Radio button

Przełącznik jednokrotnego wyboru — cztery stany na trzech typach tła. Rozmiar 24 × 24 px.

Radio buttonrc-radio

Wybór jednokrotny, koło 22px, obrys 2px. Spoczynek #4C4D52, zaznaczony/hover/focus #FF6D2A (kropka 11px), błąd #E81B2F. Jedna opcja aktywna w grupie.

Grupa działa — kliknij opcję, zaznaczenie przechodzi między pozycjami.
Wszystkie stany
Domyślny
Zaznaczony
Hover
Focus
Błąd
<label class="rc-radio">
  <input type="radio" name="plan" checked>
  <span class="rd"></span>
  Plan miesięczny
</label>
<label class="rc-radio">
  <input type="radio" name="plan">
  <span class="rd"></span>
  Plan roczny (−20%)
</label>
.rc-radio{display:inline-flex; align-items:center; gap:10px; font-size:15px;
  color:#2F3033; cursor:pointer; position:relative}
.rc-radio input{position:absolute; opacity:0; width:22px; height:22px; margin:0}
.rc-radio .rd{width:22px; height:22px; border-radius:50%; border:2px solid #4C4D52;
  display:inline-flex; align-items:center; justify-content:center; background:#fff; transition:.15s}
.rc-radio .rd::after{content:""; width:11px; height:11px; border-radius:50%;
  background:#FF6D2A; transform:scale(0); transition:transform .12s}
.rc-radio input:checked + .rd{border-color:#FF6D2A}
.rc-radio input:checked + .rd::after{transform:scale(1)}
.rc-radio:hover .rd{border-color:#FF6D2A}
.rc-radio input:focus-visible + .rd{box-shadow:0 0 0 3px #FFEAD9; border-color:#FF6D2A}
.rc-radio.is-error .rd{border-color:#E81B2F}
Pobierz SVG
07
Komponenty · Select i rozwijane

Select i rozwijane

Pole wyboru ze stanami, otwarte menu rozwijane oraz listy wielokrotnego wyboru (od 2 do 6 pozycji).

Select — pole wyborurc-sel

Zwinięte pole z chevronem, wysokość 40px, radius 4px. Obrys spoczynek #EAEAEB → hover #BFC0C4 → otwarte/focus #FF6D2A. Chevron obraca się po otwarciu.

Product discovery
Custom software
UX / UI design
Quality assurance
Pole działa — kliknij, aby rozwinąć/zwinąć menu poniżej.
Stany pola
Domyślny
Wybierz…
Hover
Wybierz…
Otwarty
Wybierz…
Wybrany
Custom software
Otwarte menu
Lista opcji · z zaznaczeniem
Product discovery
Custom software
UX / UI design
Quality assurance
<button class="rc-sel" aria-haspopup="listbox">
  <span class="ph">Wybierz usługę…</span>
  <svg class="chev" viewBox="0 0 16 16" fill="none">
    <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</button>

<div class="rc-menu">
  <div class="rc-opt is-sel">Custom software <svg class="ck" .../></div>
  <div class="rc-opt">UX / UI design</div>
</div>
.rc-sel{display:inline-flex; align-items:center; justify-content:space-between; gap:10px;
  min-width:200px; height:40px; padding:0 12px; background:#fff; border:1px solid #EAEAEB;
  border-radius:4px; font-size:15px; color:#2F3033; cursor:pointer}
.rc-sel .chev{width:16px; height:16px; color:#4C4D52; transition:transform .15s}
.rc-sel:hover{border-color:#BFC0C4}
.rc-sel.is-open,.rc-sel:focus-visible{border-color:#FF6D2A; outline:none}
.rc-sel.is-open .chev{transform:rotate(180deg)}
.rc-menu{width:240px; background:#fff; border:1px solid #EAEAEB; border-radius:4px;
  box-shadow:0 10px 30px rgba(20,22,30,.12); padding:6px}
.rc-opt{display:flex; align-items:center; justify-content:space-between; padding:10px;
  border-radius:4px; cursor:pointer}
.rc-opt:hover{background:#F4F5F5}
.rc-opt.is-sel{color:#FF6D2A; font-weight:500}
.rc-opt .ck{width:16px; height:16px; color:#FF6D2A; opacity:0}
.rc-opt.is-sel .ck{opacity:1}
Pobierz SVG
07
Komponenty · Obszar wgrywania

Obszar wgrywania

Pole „przeciągnij i upuść" do wgrywania plików — stany spoczynku, najechania, aktywności i błędu.

Obszar wgrywania (drag & drop)rc-up

Strefa „przeciągnij i upuść", obrys przerywany #BFC0C4, radius 8px. Hover/aktywny #FF6D2A + tło #FFF8F5; błąd #E81B2F + tło #FEF2F2.

Kliknij, aby wgrać lub przeciągnij pliki
PNG, JPG, PDF — do 10 MB
Strefa działa — najedź lub użyj Tab (focus); obrys zmienia się na pomarańczowy.
Wszystkie stany
Domyślny
Wgraj plik
Hover
Upuść tutaj
Focus
Wgraj plik
Błąd
Zły format
<div class="rc-up" tabindex="0" role="button">
  <svg class="ic" viewBox="0 0 24 24" fill="none">
    <path d="M12 15V4m0 0L8 8m4-4l4 4M5 17v2a2 2 0 002 2h10a2 2 0 002-2v-2"
      stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
  <div><b>Kliknij, aby wgrać</b> lub przeciągnij pliki</div>
  <div class="hint">PNG, JPG, PDF — do 10 MB</div>
</div>
.rc-up{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:120px; padding:24px; border:1.5px dashed #BFC0C4; border-radius:4px; background:#fff;
  text-align:center; color:#696B72; font-size:14px; cursor:pointer; transition:.15s}
.rc-up .ic{width:30px; height:30px; color:#BFC0C4}
.rc-up b{color:#FF6D2A; font-weight:600}
.rc-up:hover{border-color:#FF6D2A; background:#FFF8F5}
.rc-up:hover .ic{color:#FF6D2A}
.rc-up:focus{outline:none; border-color:#FF6D2A; box-shadow:0 0 0 3px #FFEAD9}
.rc-up.is-error{border-color:#E81B2F; background:#FEF2F2; color:#E81B2F}
Pobierz SVG
07
Komponenty · Kalendarz

Kalendarz

Wybór daty — pojedynczy dzień, zakres oraz stan z podpowiedzią. Do formularzy rezerwacji i filtrów.

Kalendarz / date pickerrc-cal

Wybór daty w karcie 300px, radius 4px. Zaznaczony dzień: tło #FF6D2A, tekst biały. Zakres podświetlony #FFEAE0. Do formularzy rezerwacji i filtrów.

Wrzesień 2026
PnWtŚrCzPtSoNd 31123456 78910111213 14151617181920 21222324252627 2829301234
Kalendarz działa — kliknij dowolny dzień, aby go zaznaczyć.
Wybór zakresu
Zakres dat (od–do)
Wrzesień 2026
PnWtŚrCzPtSoNd 31123456 78910111213 14151617181920 21222324252627 2829301234 
<div class="rc-cal">
  <div class="rc-cal-hd">
    <span class="mo">Wrzesień 2026</span>
    <span class="rc-cal-nav"><button>‹</button><button>›</button></span>
  </div>
  <div class="rc-cal-grid">
    <span class="dow">Pn</span> … <span class="dow">Nd</span>
    <span class="d">1</span> … <span class="d sel">12</span> …
    <!-- zakres: rs (start) · rng (środek) · re (koniec) -->
  </div>
</div>
.rc-cal{width:300px; background:#fff; border:1px solid #EAEAEB; border-radius:4px; padding:16px}
.rc-cal-hd{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.rc-cal-hd .mo{font-weight:700; color:#2F3033}
.rc-cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.rc-cal-grid .dow{font-size:11px; font-weight:700; color:#95979D; text-align:center; padding:4px 0}
.rc-cal-grid .d{aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#2F3033; border-radius:4px; cursor:pointer}
.rc-cal-grid .d:hover{background:#F4F5F5}
.rc-cal-grid .d.mut{color:#BFC0C4}
.rc-cal-grid .d.sel{background:#FF6D2A; color:#fff; font-weight:600}
.rc-cal-grid .d.rng{background:#FFEAE0; color:#E25718; border-radius:0}
.rc-cal-grid .d.rs{background:#FF6D2A; color:#fff; border-radius:4px 0 0 4px}
.rc-cal-grid .d.re{background:#FF6D2A; color:#fff; border-radius:0 4px 4px 0}
Pobierz SVG
07
Komponenty · Tagi

Tagi

Etykiety kategorii treści. Dwa rozmiary (Large / Small) w stanach Domyślny → Hover → Aktywny oraz gotowe tagi tematyczne.

Tag / chiprc-tag

Pigułka kategorii, radius 999px. Rozmiary Large 40px / Small 29px. Spoczynek: obrys #95979D, tekst #696B72; hover tło #FFEAE0; aktywny tło #FF6D2A, tekst biały.

Tagi działają jak przełączniki — kliknij, aby aktywować/dezaktywować.
Stany · Large
Domyślny
Tag
Hover
Tag
Aktywny
Tag
Stany · Small
Domyślny
Tag
Hover
Tag
Aktywny
Tag
<button class="rc-tag" aria-pressed="false">Business insights</button>
<button class="rc-tag" aria-pressed="true">HR</button>

<!-- mały: dodaj klasę rc-tag--sm -->
<button class="rc-tag rc-tag--sm">Project management</button>
.rc-tag{display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 18px;
  border-radius:999px; border:1px solid #95979D; background:transparent; color:#696B72;
  font-family:"Sofia Pro",system-ui,sans-serif; font-weight:500; font-size:15px; cursor:pointer; transition:.15s}
.rc-tag--sm{height:29px; padding:0 14px; font-size:13px}
.rc-tag:hover{background:#FFEAE0}
.rc-tag.is-active,.rc-tag[aria-pressed="true"]{background:#FF6D2A; border-color:#FF6D2A; color:#fff}
Pobierz SVG
Tagi ze strony selleo.com

Lista tagów technologii z kafelka case study. Kod 1:1.

Lista tagów technologii.project-item ul

„LMS | SaaS | ROR | React”. Domyślna · hover.

—
07
Komponenty · Awatary

Awatary

Grupy awatarów z licznikiem „+N" — w układzie poziomym (trzy rozmiary) i pionowym.

Awataryrc-av

Okrągły awatar, trzy rozmiary: Small 48px · Regular 64px · Big 96px. Ze zdjęciem lub inicjałami (fallback). Grupa nakłada awatary z białym obrysem i licznikiem „+N".

Maciej Marysia Dawid MK
Grupa (stack)
Zespół · nakładające się awatary
+5 
<span class="rc-av rc-av--md"><img src="avatar.png" alt="Imię"></span>
<span class="rc-av rc-av--md">MK</span>  <!-- inicjały -->

<span class="rc-avstack">
  <span class="rc-av rc-av--md"><img src="a.png"></span>
  <span class="rc-av rc-av--md"><img src="b.png"></span>
  <span class="rc-av rc-av--md rc-avmore">+5</span>
</span>
.rc-av{display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  overflow:hidden; background:#EAEAEB; color:#696B72; font-weight:600; flex:none}
.rc-av img{width:100%; height:100%; object-fit:cover}
.rc-av--sm{width:48px; height:48px; font-size:16px}
.rc-av--md{width:64px; height:64px; font-size:20px}
.rc-av--lg{width:96px; height:96px; font-size:30px}
.rc-avstack{display:inline-flex}
.rc-avstack .rc-av{border:2px solid #fff; margin-left:-12px}
.rc-avstack .rc-av:first-child{margin-left:0}
.rc-avmore{background:#FF6D2A; color:#fff}
Pobierz SVG
07
Komponenty · Zakładki (Tabs)

Zakładki (Tabs)

Nawigacja zakładkami — pojedyncza zakładka w stanach Domyślny → Hover → Aktywny, w trybie jasnym i ciemnym, oraz gotowy pasek zakładek.

Zakładki (Tabs)rc-tabbar

Segmentowy przełącznik widoków, wysokość 32px, radius 8px. Aktywna zakładka: tło #FFF8F5, tekst #FF6D2A. Nieaktywna: tekst #696B72.

Zakładki działają — kliknij, aby zmienić aktywną.
Stany zakładki
Domyślny
Zakładka
Hover
Zakładka
Aktywny
Zakładka
<div class="rc-tabbar" role="tablist">
  <button class="rc-tabbtn is-active" role="tab" aria-selected="true">Przegląd</button>
  <button class="rc-tabbtn" role="tab" aria-selected="false">Zespół</button>
  <button class="rc-tabbtn" role="tab" aria-selected="false">Technologie</button>
</div>
.rc-tabbar{display:inline-flex; gap:4px; background:#fff; padding:4px;
  border:1px solid #EAEAEB; border-radius:4px}
.rc-tabbtn{padding:8px 16px; border:0; border-radius:4px; background:none;
  font-family:"Sofia Pro",system-ui,sans-serif; font-weight:500; font-size:15px;
  color:#696B72; cursor:pointer; transition:.15s}
.rc-tabbtn:hover{background:#FFF8F5; color:#2F3033}
.rc-tabbtn.is-active,.rc-tabbtn[aria-selected="true"]{background:#FFF8F5; color:#FF6D2A}
Pobierz SVG
07
Komponenty · Nagłówek aplikacji

Nagłówek aplikacji

Górny pasek aplikacji (app bar) — wersja desktop i mobile, w trybie jasnym i ciemnym.

Nagłówek aplikacjirc-hdr

Górny pasek: logo + nawigacja + akcja. Wysokość 64px, radius 10px. Warianty jasny (na jasne tła) i ciemny (na ciemne). Linki hover → #FF6D2A.

Selleo
Nagłówek działa — najedź na linki nawigacji (zmieniają kolor na pomarańczowy).
Warianty tła
Jasny
Selleo
Ciemny
Selleo
<header class="rc-hdr">
  <span class="brand"><img src="selleo-logo.svg" alt="Selleo"></span>
  <nav><a href="#">Usługi</a><a href="#">Realizacje</a><a href="#">Blog</a></nav>
  <span class="sp"></span>
  <button class="rc-btn rc-btn--primary rc-btn--sm">Kontakt</button>
</header>

<!-- ciemny: <header class="rc-hdr rc-hdr--dark"> -->
.rc-hdr{display:flex; align-items:center; gap:20px; height:64px; padding:0 20px;
  background:#fff; border:1px solid #EAEAEB; border-radius:4px}
.rc-hdr .brand img{height:22px}
.rc-hdr nav{display:flex; gap:22px; margin-left:8px}
.rc-hdr nav a{color:#4c4d52; text-decoration:none; font-size:14px; font-weight:500}
.rc-hdr nav a:hover{color:#FF6D2A}
.rc-hdr .sp{margin-left:auto}
.rc-hdr--dark{background:#2F3033; border-color:#4C4D52}
.rc-hdr--dark nav a{color:#BFC0C4}
Pobierz SVG
07
Komponenty · Menu boczne

Menu boczne

Boczna nawigacja aplikacji w trybie jasnym i ciemnym. Podgląd przeskalowany — pełny plik SVG dostępny do pobrania.

Menu bocznerc-side

Pionowa nawigacja z ikonami. Pozycja aktywna: tło #FFF1EA, tekst/ikona #FF6D2A. Hover podkłada #F4F5F5. Warianty jasny i ciemny.

Menu działa — najedź na pozycje; aktywna jest podświetlona na pomarańczowo.
Wariant ciemny
Na ciemnym tle
<nav class="rc-side">
  <a href="#" class="is-active"><svg class="ic" .../>Pulpit</a>
  <a href="#"><svg class="ic" .../>Projekty</a>
  <a href="#"><svg class="ic" .../>Zespół</a>
</nav>

<!-- ciemny: <nav class="rc-side rc-side--dark"> -->
.rc-side{width:230px; background:#fff; border:1px solid #EAEAEB; border-radius:4px; padding:12px}
.rc-side a{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:4px;
  color:#4c4d52; text-decoration:none; font-size:14px; font-weight:500; transition:.12s}
.rc-side a .ic{width:18px; height:18px; color:#95979D}
.rc-side a:hover{background:#F4F5F5; color:#2F3033}
.rc-side a.is-active{background:#FFF1EA; color:#FF6D2A}
.rc-side a.is-active .ic{color:#FF6D2A}
.rc-side--dark{background:#2F3033; border-color:#4C4D52}
.rc-side--dark a{color:#BFC0C4}
.rc-side--dark a.is-active{background:rgba(255,109,42,.16); color:#FF6D2A}
Pobierz SVG
08
Zasoby

Ikonografia

Wszystkie 345 ikon z folderu icons (wraz z podfolderami), posegregowane na kategorie. Ikony konturowe ujednolicono do 1,5 px i koloru marki; ikony wypełnione (bez obrysu) trafiły do osobnej kategorii bez zmian; cztery ikony stanowe o odrębnym stylu — do własnej kategorii. Najedź na ikonę, aby pobrać pojedynczy SVG, albo pobierz całą grupę jednym przyciskiem.

Ikony konturowe — ujednolicone

#FF6D2A24 × 24 pxstroke 1,5px @ 24 Ikony konturowe z folderu icons, sprowadzone do jednego standardu: jeden kolor marki, jeden rozmiar i obrys 1,5 px (kolor i grubość dziedziczone z <svg>). Posegregowane tematycznie.

Nawigacja i strzałki 45
Status i alerty 15
Pliki i dokumenty 9
Komunikacja 12
Użytkownicy i ludzie 8
Biznes i finanse 21
Czas i projekt 4
Loga i technologie 2
Technologia i kod 37
Urządzenia 11
Multimedia i design 9
Nauka i edukacja 10
Zdrowie 7
Bezpieczeństwo 8
Miejsca i mapy 7
Różne 1
Ikony wypełnione (bez obrysu)

fill · bez konturu Ikony wypełnieniowe — zbudowane z samego wypełnienia. Zgodnie z ustaleniem nie dorabiamy im konturu i zostawiamy w oryginale (zachowują własne kolory). Podzielone na te same kategorie tematyczne; brandy i loga (React, Ruby, GraphQL, TypeScript, Dribbble, Behance, Medium…) zebrane w Loga i technologie.

Nawigacja i strzałki 16
Status i alerty 4
Pliki i dokumenty 1
Komunikacja 2
Użytkownicy i ludzie 11
Biznes i finanse 26
Czas i projekt 7
Loga i technologie 17
Technologia i kod 18
Urządzenia 5
Multimedia i design 4
Nauka i edukacja 7
Zdrowie 4
Bezpieczeństwo 2
Miejsca i mapy 9
Różne 2
Wyróżnione — ikony stanowe

#4C4D52#EAEAEB#FF6D2A 4 ikony o odrębnym, trójkolorowym stylu (ciemna ramka + jasne tło + pomarańczowy symbol) — ikony stanowe (dalej / błąd / sukces / uwaga), zostawione bez zmian.

09
Zasoby

Elementy graficzne

Kształty, akcenty i grafiki używane na stronie i w materiałach Selleo. Część A — pojedyncze elementy bez tła, gotowe pliki SVG do pobrania (najedź na kafel → strzałka). Część B — propozycje layoutów pokazujące, jak te elementy stosować. Pliki: folder assets/graphics/.

System kolorów elementów

Każdy element występuje w trzech wariantach marki: pomarańcz, ciemny i biały (na ciemne tła). Elementy „AI" dodatkowo używają pomarańczowego gradientu.

RolaPodglądWartości
Pomarańcz#FF6D2A · #FF905D
Ciemny#2F3033 · #4C4D52
Biały / jasny#F4F5F5 · #EAEAEB
Gradient AI#FF6D2A → #F79606
A · Elementy graficzne — do pobrania (SVG)
Rainbow — motyw przewodni

Sygnaturowy „wachlarz" z łuków sygnetu — akcent w rogach, tłach i okładkach. Dostępny bez tła (do nakładania) oraz jako gotowy kafel z tłem.

bez tła
rainbow pomarańcz
Rainbow · pomarańcz
#FF905D
rainbow ciemny
Rainbow · ciemny
#4C4D52
rainbow biały
Rainbow · biały
Na ciemne tła. #EAEAEB
z tłem
rainbow kafel pomarańcz
Rainbow z tłem · pomarańcz
Gotowy kafel + kropki.
rainbow kafel ciemny
Rainbow z tłem · ciemny
Gotowy kafel + kropki.
rainbow kafel biały
Rainbow z tłem · biały
Gotowy kafel + kropki.
Rainbow AI · wyraźne iskry

Rainbow z wyraźnymi iskrami (kontrastowe akcenty) — do materiałów o produktach AI.

bez tła
AI wyraźne pomarańcz
AI wyraźne · pomarańcz
Rainbow + iskry.
AI wyraźne ciemny
AI wyraźne · ciemny
Rainbow + iskry.
AI wyraźne biały
AI wyraźne · biały
Na ciemne tła.
z tłem
AI wyraźne tło pomarańcz
AI wyraźne z tłem · pomarańcz
Gotowy kafel.
AI wyraźne tło ciemny
AI wyraźne z tłem · ciemny
Gotowy kafel.
AI wyraźne tło biały
AI wyraźne z tłem · biały
Gotowy kafel.
Rainbow AI · subtelne iskry

Rainbow z subtelnymi iskrami (ton w ton) — delikatniejszy akcent AI.

bez tła
AI subtelne pomarańcz
AI subtelne · pomarańcz
Rainbow + iskry.
AI subtelne ciemny
AI subtelne · ciemny
Rainbow + iskry.
AI subtelne biały
AI subtelne · biały
Na ciemne tła.
z tłem
AI subtelne tło pomarańcz
AI subtelne z tłem · pomarańcz
Gotowy kafel.
AI subtelne tło ciemny
AI subtelne z tłem · ciemny
Gotowy kafel.
AI subtelne tło biały
AI subtelne z tłem · biały
Gotowy kafel.
Sygnet

Sam znak (sygnet) jako element dekoracyjny — bez tła do nakładania oraz z pełnym, kolorowym tłem.

bez tła
sygnet pomarańcz
Sygnet · pomarańcz
Gradient marki.
sygnet ciemny
Sygnet · ciemny
#2F3033
sygnet biały
Sygnet · biały
Na ciemne tła.
z tłem
sygnet tło pomarańcz
Sygnet z tłem · pomarańcz
Gotowy kafel 1:1.
sygnet tło ciemny
Sygnet z tłem · ciemny
Gotowy kafel 1:1.
sygnet tło biały
Sygnet z tłem · biały
Gotowy kafel 1:1.
Kropki i akcenty

Siatki kropek i pojedyncze punkty — lekki akcent rytmizujący układ. Kropki zawsze w kolorze pomarańczowym.

dots 3x3
Dots · 3×3
Siatka 9 kropek.
dots 6
Dots · 3×2
Siatka 6 kropek.
dots rząd
Dots · rząd
Pojedynczy rząd.
pojedyncza kropka
Single dot
Pojedyncza kropka.
Asterisk i badge

Znak * (asterisk) jako akcent tekstu oraz badge — asterisk na kwadratowym tle. Dostępne bez tła i z tłem.

bez tła
asterisk pomarańcz
Asterisk * · pomarańcz
6‑ramienny. #FF905D
asterisk ciemny
Asterisk * · ciemny
#4C4D52
asterisk biały
Asterisk * · biały
Na ciemne tła. #EAEAEB
z tłem (badge)
badge pomarańcz
Badge * · pomarańcz
* na kwadratowym tle.
badge ciemny
Badge * · ciemny
* na kwadratowym tle.
badge biały
Badge * · biały
* na kwadratowym tle.
Gwiazdki i iskry

Pojedyncza gwiazdka (4‑ramienna) oraz iskry (sparkles) sygnalizujące funkcje AI. Wariant 9‑elementowy używa pomarańczowego gradientu AI.

gwiazdka
Gwiazdka · pojedyncza
4‑ramienna. #FF6D2A
iskry 3
Iskry AI · 3
Rząd iskier.
iskry 6
Iskry AI · 6
Siatka 3×2.
iskry 9
Iskry AI · 9
Siatka 3×3 z gradientem AI.
Strzałki

Strzałki kierunkowe — CTA, nawigacja, wskazywanie relacji. W kolorze pomarańczowym.

strzałka pozioma
Strzałka pozioma
Kierunek / „dalej".
strzałka 45
Strzałka 45°
Akcent / „w górę".
B · Przykłady zastosowania

Jak elementy graficzne działają w realnych układach strony — gotowe sekcje i nagłówki. To wyjaśnienie, nie pliki do pobrania. Najedź na kafel i kliknij ⤢, aby zobaczyć grafikę w pełnym rozmiarze.

Layouty sekcji strony elementy w realnym kontekście
przykład — sekcja hero
Sekcja hero
Wielki nagłówek + sygnet w tle jako akcent.
przykład — sekcja Why Selleo
Sekcja „Why Selleo"
Treść wsparta rainbow, kropkami i asteriskiem.
przykład — formularz kontaktowy
Formularz kontaktowy
Sygnet / elementy budujące tło sekcji.
Nagłówki i wielki tekst grafiki tekstowe łączące typografię z marką
nagłówek ciemny
Nagłówek · ciemny
Grafika tekstowa na jasne tła.
nagłówek biały
Nagłówek · biały
Grafika tekstowa na ciemne tła.
nagłówek AI ciemny
Nagłówek AI · ciemny
Z akcentem gradientu AI.
nagłówek AI biały
Nagłówek AI · biały
Na ciemne tła.
blok tekstowy
Blok tekstowy
Duży układ tekstowy (layout).
Zasady w skrócie
✓ Rób
  • Dobieraj wariant koloru do tła: pomarańcz/ciemny na jasne, biały na ciemne.
  • Traktuj rainbow i sygnet w tle jako akcent — nie zaśmiecaj nimi układu.
  • Elementy „AI" stosuj tylko w kontekście funkcji AI.
  • Do pobrania używaj pojedynczych elementów z części A (SVG).
✗ Nie rób
  • Nie zmieniaj kolorów elementów poza paletą marki.
  • Nie obracaj ani nie deformuj sygnetu/rainbow.
  • Nie umieszczaj jasnych elementów na jasnym tle (mały kontrast).
  • Nie łącz zbyt wielu akcentów naraz.
10
Zasoby

Zdjęcia

Biblioteka zdjęć marki: pojedyncze sylwetki, zespół oraz zdjęcia website (kafle usług i branż, hero, landingi, życie firmy). Każde zdjęcie występuje w wersji oryginalnej i z pomarańczowym gradientem marki — gradient nakładany jest na żywo w przeglądarce, więc możesz nim objąć nawet zdjęcia, które go nie mają. Pobieraj pojedynczo, całą kategorią lub wszystko naraz. Pliki źródłowe: folder assets/photos/.

A · Gradient marki na zdjęciach

Efekt to dwa kroki: (1) zdjęcie na czarno‑biało (odbarwienie), (2) nałożony pomarańczowy gradient #FF6D2A w trybie mieszania Color (Kolor). Tryb Color zachowuje jasność (luminancję) zdjęcia, a podmienia barwę na pomarańczową — dlatego biel pozostaje biała, a sylwetka zyskuje spójny, markowy ton. Gradient od 0% (przezroczysty) do 100% (pełny) — steruj kątem i intensywnością poniżej.

Z gradientem
Podgląd gradientu

Ustawienia gradientu

Kąt i intensywność sterują całą biblioteką poniżej oraz plikami przy pobieraniu. Podmień zdjęcie testowe, aby zobaczyć efekt na sylwetce, zespole czy zdjęciu z życia firmy.

B · Biblioteka zdjęć
Przełącznik zmienia podgląd wszystkich kafelków oraz to, co pobierasz. Pojedynczy kafelek przełączysz przyciskiem ◐. Kąt i intensywność ustawisz w sekcji A powyżej.
C · Przykłady zastosowania

Jak zdjęcia z gradientem żyją w realnych układach — karty ekspertów, kroki procesu i sekcje z zespołem. To wyjaśnienie, nie pliki do pobrania. Kliknij ⤢, aby powiększyć.

karta eksperta — pozioma
Karta eksperta · pozioma
Sylwetka z gradientem + peachy tło.
karta eksperta — pionowa
Karta eksperta · pionowa
Portret nad treścią karty.
proces z zespołem
Sekcja procesu · zespół
Sylwetka w sekcji „Build the right team".
krok procesu 01
Krok procesu · 01
Zdjęcie zespołu jako akcent kroku.
krok procesu 02
Krok procesu · 02
Gradient stopniowo wtapiający tło.
Zasady w skrócie
✓ Rób
  • Gradient stosuj spójnie w obrębie jednej sekcji (wszystkie zdjęcia albo żadne).
  • Sylwetki trzymaj na białym tle — biel zostaje bielą w trybie Color.
  • Do kart i sekcji „ludzie + treść" używaj wersji z gradientem.
  • Zawsze #FF6D2A i tryb Color — bez zmiany barwy.
✗ Nie rób
  • Nie mieszaj w jednej siatce zdjęć z gradientem i bez.
  • Nie nakładaj gradientu bez wcześniejszego odbarwienia (traci spójność).
  • Nie używaj innego pomarańczu ani trybu Overlay/Multiply zamiast Color.
  • Nie rozciągaj i nie deformuj sylwetek — zachowaj proporcje.
Pakowanie…
07
Komponenty · strona selleo.com

Nawigacja strony

Kod 1:1 ze strony selleo.com (Tailwind). Stany :hover/:focus działają na żywo i są dostępne jako klasy .is-hover/.is-focus. W parach podglądów: pierwszy = domyślny, drugi = hover. Kod pod przyciskiem Kod, HTML/CSS kopiują do schowka, Pobierz zapisuje plik .html. Cały nagłówek we wszystkich stanach oraz jego pojedyncze klocki.

Stany nagłówka

Nagłówek — domyślny (interaktywny)header.page-header

Najedź na pozycje menu — mega-menu i stany działają jak na stronie. Szare tło = tło hero.

—
Hover: Services (mega-menu).nav-item.is-hover

Kolumny Services · Technology · AI for Business + panel CTOs / Founders.

—
Hover: Industries.nav-item.is-hover

Siatka 2-kolumnowa grup branż z ikonami.

—
Hover: About us.nav-item.is-hover

—
Hover: Blog.nav-item.is-hover

—
Po przewinięciu strony (.is-fixed).page-header.is-fixed

Półprzezroczyste białe tło.

—
Mobile — zwinięte< 992px

Logo + hamburger, 64px.

—
Mobile — menu otwarte (Services rozwinięte).header-nav.is-open

Szuflada (na stronie fixed 100vh — tu w przepływie).

—

Klocki nagłówka

Logo, pozycja menu, przycisk Contact, pozycja i kolumna mega-menu, panel promo.

Przycisk „Contact” w nagłówkuheader a.bg-brand-primary-500

Domyślny · hover.

—
Pozycja mega-menu z ikoną.dropdown-block li

Domyślna · hover.

—
Kolumna mega-menu („Services”).dropdown-block .services

Nagłówek kolumny + siatka pozycji z ikonami.

—
Panel promo w mega-menu (CTOs / Founders).dropdown-block astro-island

Dwa boksy CTA: pełny i obramowany. Widoczny od 992px.

—
07
Komponenty · strona selleo.com

Nagłówki i bloki tekstowe

Kod 1:1 ze strony selleo.com (Tailwind). Stany :hover/:focus działają na żywo i są dostępne jako klasy .is-hover/.is-focus. W parach podglądów: pierwszy = domyślny, drugi = hover. Kod pod przyciskiem Kod, HTML/CSS kopiują do schowka, Pobierz zapisuje plik .html. Wzorce „kicker + nagłówek + opis/CTA” oraz blok hero — gotowe do składania sekcji.

Hero

Blok nagłówka hero (H1 + lead + CTA)#home-hero .horizontal-content

H1 z akcentem kolorystycznym, lead i link „See our work”.

—
Pasek „Trusted by” (loga klientów)#home-hero .mt-8

Etykieta + loga Alyne, Humly, Defined Learning, BrandActif.

—

Nagłówki sekcji

Nagłówek sekcji z linkiem CTA.section-content

„CASE STUDY / Our Work / View full portfolio →”.

—
Nagłówek sekcji z opisem.section-content

„Validated by Industry. Trusted by Clients.” + akapit. (Dekoracyjna siatka kropek z sekcji pominięta.)

—
Nagłówek sekcji bloga.section-content

—

Bloki tekstowe sekcji

Blok „Why Selleo” (kicker + 2×H2 + opisy)#why-selleo .section-content

—
Blok oferty (tekst + lista + CTA)#try-selleo-developers-for-free .section-content

—
Blok tekstowy z CTA (sekcja AI, ciemne tło)#artificial-intelligence .section-content

Kicker, H2 i akapity w kolorze białym — wariant dla sekcji na #2F3033.

—
Blok tekstowy na ciemnym tle#design-that-drives-business .section-content

Wersja na #2F3033.

—

Drobne

Lista tagów technologii.project-item ul

„LMS | SaaS | ROR | React” — separatory z pseudo-elementu. Domyślna · hover.

—
07
Komponenty · strona selleo.com

Karty

Kod 1:1 ze strony selleo.com (Tailwind). Stany :hover/:focus działają na żywo i są dostępne jako klasy .is-hover/.is-focus. W parach podglądów: pierwszy = domyślny, drugi = hover. Kod pod przyciskiem Kod, HTML/CSS kopiują do schowka, Pobierz zapisuje plik .html. Każda karta pojedynczo: pierwszy egzemplarz domyślny, drugi z wymuszonym hoverem.

Kafelek case study (Our Work).project-item

Dwa realne kafelki: z wideo (góra) i ze zdjęciem (dół); w każdym rzędzie: domyślny · hover.

—
Karta artykułu (blog)article.article-card

Miniatura, kategoria, tytuł, meta. Lewa: domyślna, prawa: hover.

—
Karta wyróżnienia (Awards)#awards .section-grid > *

—
Karta opinii klienta#ratings .border-neutral-200

Cudzysłów, zdjęcie, imię, stanowisko, gwiazdki, cytat.

—
Kafelek statystyki.home-widgets > div > div

„100+ Talented People” z paska liczb pod hero. Na stronie kafelki stykają się (1px szara linia siatki) — tu rozsunięte.

—
Kafelek osoby (zdjęcie w masce).person-item

Zdjęcie czarno-białe w organicznej masce (CSS mask-image), na stronie pojawia się animacją (klasa opacity-0 zdjęta do podglądu).

—
07
Komponenty · strona selleo.com

Formularz kontaktowy

Kod 1:1 ze strony selleo.com (Tailwind). Stany :hover/:focus działają na żywo i są dostępne jako klasy .is-hover/.is-focus. W parach podglądów: pierwszy = domyślny, drugi = hover. Kod pod przyciskiem Kod, HTML/CSS kopiują do schowka, Pobierz zapisuje plik .html. Zhydratowana wersja formularza z żywej strony, we wszystkich stanach. Pojedyncze pola i przyciski: Pola tekstowe · Checkbox · Przyciski.

Domyślny (interaktywny)form.contact-form

Name, E-mail, Project description, Attach File, checkboxy, zgody, „Send message” / „Prefer a call?”. Kliknij w pole, najedź na przycisk.

—
Focus na polu „Name”.is-focus

Placeholder ukryty, tekst w kolorze aktywnym.

—
Wypełniony (checkboxy zaznaczone)value · :checked

—
Błędy walidacji.text-danger · .!border-danger

Stan po wysłaniu pustego formularza: czerwone linie i „This field is required”.

—
Wariant na jasnym tlebez .dark-bg

—
07
Komponenty · strona selleo.com

Opinie i oceny

Kod 1:1 ze strony selleo.com (Tailwind). Stany :hover/:focus działają na żywo i są dostępne jako klasy .is-hover/.is-focus. W parach podglądów: pierwszy = domyślny, drugi = hover. Kod pod przyciskiem Kod, HTML/CSS kopiują do schowka, Pobierz zapisuje plik .html. Komponenty sekcji „Trusted by teams that ship under pressure”.

Nagłówek sekcji opinii + box ocen#ratings > div:first-child

Kicker, H2, opis i box Clutch/Google w jednym układzie.

—
Box ocen (Clutch / Google)#ratings .bg-neutral-50

Ocena, gwiazdki, lista kategorii ocen.

—
Przyciski filtrów (aktywny / domyślny)#ratings button

Pierwszy aktywny (pomarańczowy), pozostałe obramowane; hover działa.

—
Karta opinii#ratings .border-neutral-200

Domyślna · hover (także w „Karty”).

—
07
Komponenty · strona selleo.com

Stopka

Kod 1:1 ze strony selleo.com (Tailwind). Stany :hover/:focus działają na żywo i są dostępne jako klasy .is-hover/.is-focus. W parach podglądów: pierwszy = domyślny, drugi = hover. Kod pod przyciskiem Kod, HTML/CSS kopiują do schowka, Pobierz zapisuje plik .html. Cała stopka i jej części.

Części stopki

11
Archiwum

Legacy · Design System 1.0

Poprzednia wersja systemu — obowiązywała do 2025 roku i jest już nieaktualna. Zebraliśmy tu jej wytyczne w jednym miejscu: typografię 1.0, tekst tła, font uzupełniający, rytm pionowy oraz komponenty z dawnego portalu. Nowe projekty budujemy w aktualnym systemie (zakładki 00–10).

Nieaktualny · do 2025

Ten system nie jest już rozwijany

Design System 1.0 obowiązywał do 2025 roku i został zastąpiony aktualną wersją. Jeśli utrzymujesz produkt zbudowany na starym systemie i nie chcesz go teraz migrować, znajdziesz tu wszystkie potrzebne wytyczne — wartości pozostają dokładnie takie, jakie były. Do nowych projektów, landingów i komponentów zachęcamy do używania nowego systemu: ma spójną skalę typografii, jednolite promienie i komponenty z kodem 1:1.

Otwórz stary portal ↗
Okres
do 2025
Zastąpiony aktualnym systemem (v0.3, zakładki 00–10).
Fonty
Sofia Pro + Poppins
Sofia Pro w produktach i na stronie, Poppins jako font uzupełniający (e‑mail, papier firmowy, prezentacje).
Komponenty
Tailwind CSS · CDN
Arkusz selleo-ds.css podpinany przez CDN, snippety HTML i React w portalu.
Źródła
Portal + repozytorium
designsystem.selleo.com · github.com/Selleo/design-system
A · Typografia 1.0 — rodzina i skala

Jedna rodzina: Sofia Pro w trzech wagach — Regular 400, Bold 700 i Black 800 (Black wyłącznie w kickerze). Rozmiary były stałe, bez wariantów na widoki (Full HD / laptop / tablet / mobile), z interlinią podawaną w procentach i trackingiem w procentach rozmiaru.

Aa
Sofia Pro
Aa
Regular400
Aa
Bold700
Aa
Black800
Hero

Hero

Font size: 72 pxWeight: Bold | 700Line height: 125%Letter spacing: 1%
Headers

H1 header

Font size: 56 pxWeight: Regular | 400Line height: 125%Letter spacing: 0%

H2 header

Font size: 40 pxWeight: Bold | 700Line height: 125%Letter spacing: 1%

H3 header

Font size: 32 pxWeight: Bold | 700Line height: 125%Letter spacing: 1%

H4 header

Font size: 24 pxWeight: Bold | 700Line height: 125%Letter spacing: 1%

H5 header

Font size: 16 pxWeight: Bold | 700Line height: 150%Letter spacing: 1%

H6 header

Font size: 14 pxWeight: Bold | 700Line height: 21 px
Paragraphs
Body

Body — podstawowy tekst akapitowy Design Systemu 1.0. Sofia Pro Regular 18 px z interlinią 175% i trackingiem 1%.

Font size: 18 pxWeight: Regular | 400Line height: 175%Letter spacing: 1%
Body bold

Body bold — wyróżniony tekst akapitowy Design Systemu 1.0. Sofia Pro Bold 18 px z interlinią 175% i trackingiem 1%.

Font size: 18 pxWeight: Bold | 700Line height: 175%Letter spacing: 1%
Body medium

Body medium — średni tekst akapitowy Design Systemu 1.0. Sofia Pro Regular 16 px z interlinią 175% i trackingiem 1%.

Font size: 16 pxWeight: Regular | 400Line height: 175%Letter spacing: 1%
Body medium bold

Body medium bold — średni wyróżniony tekst Design Systemu 1.0. Sofia Pro Bold 16 px z interlinią 175% i trackingiem 1%.

Font size: 16 pxWeight: Bold | 700Line height: 175%Letter spacing: 1%
Body small

Body small — mały tekst pomocniczy Design Systemu 1.0. Sofia Pro Regular 14 px z interlinią 150% i trackingiem 1%.

Font size: 14 pxWeight: Regular | 400Line height: 150%Letter spacing: 1%
Kicker
Kicker

Kicker — krótka etykieta nad nagłówkiem, Sofia Pro Black 14 px, wersaliki, tracking 15%.

Font size: 14 pxWeight: Black | 800Line height: 125%Letter spacing: 15%Case: UPPERCASE
B · Background Text — tekst tła

Dekoracyjny tekst w tle sekcji: Sofia Pro Bold w bardzo jasnym odcieniu szarości (Neutral 100 #F4F5F5 na białym tle), tak aby pozostawał tylko fakturą i nie konkurował z treścią. Stosowany w trzech skalach — od pełnej szerokości sekcji po niewielki podpis. W aktualnym systemie tę rolę pełni duży numer sekcji w tle nagłówka.

C · Complementary fonts — font uzupełniający

Poppins Regular & Bold — używany tam, gdzie Sofia Pro nie była dostępna: e‑mail, papier firmowy (letterhead) i prezentacje Google. W aktualnym systemie font uzupełniający nie występuje — wszędzie stosujemy Sofia Pro.

Aa
Poppins Regular · 400
Tekst wiadomości e‑mail, treść pism, slajdy prezentacji.

Poppins Regular — tekst podstawowy w e‑mailach, papierze firmowym i prezentacjach Google.

Aa
Poppins Bold · 700
Nagłówki i wyróżnienia w tych samych nośnikach.

Poppins Bold — nagłówki i wyróżnienia w e‑mailach, papierze firmowym i prezentacjach Google.

D · Vertical rhythm — rytm pionowy

Stałe odstępy między elementami bloku tekstowego, oparte na wielokrotnościach 8 px: 32 px przed kickerem, 8 px między kickerem a nagłówkiem, 16 px między nagłówkiem a treścią i między akapitami, 32 px przed kolejnym nagłówkiem.

Kicker
Header
Body text
Next body text
Next Header
32 pxodstęp nad kickerem — oddziela blok od poprzedniej treści
8 pxkicker → nagłówek — kicker „przykleja się” do swojego nagłówka
16 pxnagłówek → treść — pierwszy akapit pod nagłówkiem
16 pxakapit → akapit (paragraph spacing)
32 pxtreść → kolejny nagłówek — zamyka blok i otwiera następny
E · Komponenty 1.0 — portal designsystem.selleo.com

Biblioteka komponentów aplikacyjnych zbudowana na Tailwind CSS. Każdy komponent miał w portalu podgląd oraz gotowe snippety HTML i React; style dołączano jednym arkuszem przez CDN. Poniżej pełna lista z podglądem — kliknij „Otwórz w portalu”, aby zobaczyć wszystkie stany i kod źródłowy.

<link rel="stylesheet" href="https://designsystem.selleo.com/selleo-ds.css" />
Design System 1.0 — przycisk
Button
Primary, Primary Outlined, Link i Ghost · rozmiary Small / Medium / Large · warianty z ikoną · Upload Area.
Otwórz w portalu ↗
Design System 1.0 — pole tekstowe
Input
Pole tekstowe z etykietą, ikony na początku/końcu, stany disabled i error, wariant Small oraz pole wyszukiwania.
Otwórz w portalu ↗
Design System 1.0 — checkbox
Checkbox
Pole wyboru z etykietą i stanami zaznaczenia.
Otwórz w portalu ↗
Design System 1.0 — select
Select
Lista rozwijana z etykietą i ikoną rozwinięcia.
Otwórz w portalu ↗
Design System 1.0 — nawigacja
Navigation
Górny pasek aplikacji: logo, inicjały i nazwa użytkownika z menu.
Otwórz w portalu ↗
Design System 1.0 — menu boczne
Sidebar
Menu boczne aplikacji z pozycjami i stanem aktywnym.
Otwórz w portalu ↗
Design System 1.0 — zakładki
Tab
Zakładki poziome z podkreśleniem aktywnej pozycji.
Otwórz w portalu ↗
Design System 1.0 — awatar
Avatar
Awatar użytkownika: zdjęcie lub inicjały, kilka rozmiarów.
Otwórz w portalu ↗
Design System 1.0 — opinia
Testimonial
Karta opinii klienta: cytat, autor i firma.
Otwórz w portalu ↗
Design System 1.0 — tekst
Text
Paragraph (Large / Medium / Small, Regular i Bold), Hero, Kicker oraz nagłówki H1–H6 — kod skali z sekcji A.
Otwórz w portalu ↗
Design System 1.0 — ikony
Icon
Zestaw ikon liniowych używanych w komponentach 1.0.
Otwórz w portalu ↗
F · Co się zmieniło — 1.0 → aktualny system

Skrót różnic, który pomaga zdecydować o migracji. Wartości aktualnego systemu podane dla widoku Full HD — pełne skale znajdziesz w zakładkach 03 Typografia, 05 Promienie i cienie i 06 Przyciski.

ObszarDesign System 1.0Aktualny system
Hero72 px · Bold 700 · lh 125%H0 200 px · Light 300 + Bold 700 · lh 1.0 (mobile 56 px)
H156 px · Regular 40096 px · Light 300 + Medium 500 · lh 0.9
H2 – H640 / 32 / 24 / 16 / 14 px · Bold 70048 / 40 / 36 / 32 / 24 px · Medium 500 + Bold 700 (bez Black)
Tekst18 / 16 / 14 px · lh 175% / 150%20 / 16 / 14 px · lh 150% · Medium 500 tylko w przyciskach
Kicker14 px · Black 800 · wersaliki · tracking 15%bez zmian koncepcji — Black 800 wyłącznie w kickerze, tracking .15em
Responsywnośćjeden rozmiar dla wszystkich ekranów4 widoki: Full HD 1920 · Laptop 1440 · Tablet 768 · Mobile 390
PrzyciskiPrimary · Primary Outlined · Link · Ghost · Small / Medium / LargePrimary · Primary Outlined · Link · Small / Medium · Medium 500, 16 px, radius 4 px
Promieniezróżnicowane (klasy Tailwind rounded-*)tylko 0 · 4 px · pill — bez wartości pośrednich
Font uzupełniającyPoppins Regular & Bold (e‑mail, letterhead, prezentacje)brak — Sofia Pro na każdym nośniku
Tekst tłaBackground Text w trzech skalach, Neutral 100duży numer sekcji w tle nagłówka (znak wodny, 5% krycia)
TechnologiaTailwind CSS · arkusz przez CDN · snippety HTML / Reactkomponenty z Figma odwzorowane w HTML / CSS 1:1, kopiowanie CSS i pobieranie SVG