Dokumentacja

Design System

Przegląd typografii, kolorów, komponentów i ich wariacji używanych na stronie RS Moto Concierge.

Typografia

Fonty, skala tekstu, style

Fonty

--font-serif

Playfair Display

Nagłówki, cytaty, elementy dekoracyjne.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

--font-sans

Inter

Treść, przyciski, nawigacja, interfejs.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Nagłówki (Playfair Display)

text-6xl / 3.75rem / font-serif font-bold

Ciągłość. Dyskrecja. Gotowość.

text-5xl / 3rem / font-serif font-bold

Mobilność wymaga nadzoru.

text-4xl / 2.25rem / font-serif font-bold

Standard nie wynika z marki pojazdu.

text-3xl / 1.875rem / font-serif font-bold

Nadzór formalny i ochrona

text-2xl / 1.5rem / font-serif font-bold

Zabezpieczenie wartości

text-xl / 1.25rem / font-serif font-bold

Eksploatacja i serwis

text-lg / 1.125rem / font-serif font-bold

Aspekt finansowy

Tekst body (Inter)

text-2xl / font-serif italic (cytat)

Pojazd to nie tylko środek transportu. To aktywo.

text-lg / leading-relaxed

Tworzymy prywatne struktury zarządzania mobilnością — uporządkowane, przewidywalne i dostosowane do standardu.

text-base / leading-relaxed

Współpracę rozpoczynamy od rozmowy. Pracujemy z właścicielami pojazdów nie starszych niż 5 lat — już od jednej sztuki w garażu.

text-sm / leading-relaxed

Kontrola terminów polis i zobowiązań. Analiza oraz optymalizacja ochrony.

text-xs / leading-relaxed

Minimalny okres współpracy wynosi 12 miesięcy.

Eyebrow

text-[11px] sm:text-xs / tracking-[0.2em] uppercase font-semibold

Struktura operacyjna

Palety

Kolory

Brand (niebieski)

brand-50

#EEF2FA

brand-100

#D6DFEF

brand-200

#B3C3E0

brand-300

#8BA3CC

brand-400

#5E80B8

brand-500

#1F5BB5

brand-600

#0A3797

brand-700

#082E7D

brand-800

#062564

brand-900

#0C1D3F

brand-950

#0B1526

Raw (szarość)

raw-50

#FAFAFA

raw-100

#F5F5F5

raw-200

#E5E5E5

raw-300

#D4D4D4

raw-400

#A3A3A3

raw-500

#737373

raw-600

#525252

raw-700

#404040

raw-800

#262626

raw-900

#171717

raw-950

#0A0A0A

Warm (szarość + złoto)

lux-50

#FAFAFA

lux-100

#E8E8E4

lux-200

#C8C8C2

lux-300

#C9B878

lux-400

#B8A460

lux-500

#9C8B4C

lux-600

#80733C

lux-700

#3D3D3D

lux-800

#282828

lux-900

#1A1A1A

lux-950

#111111

Komponenty

Przyciski (ButtonLink)

Warianty

variant="default" Default

variant="cta" size="cta" Umów konsultację

variant="cta" size="cta-lg" Umów konsultację

variant="outline" Outline

variant="secondary" Secondary

variant="ghost" Ghost

variant="link" Link

variant="link-arrow" size="link" Zobacz więcej

Warianty na ciemnym tle

variant="hero" Hero CTA

variant="outline-light" Outline Light

variant="cta" size="cta-nav" Nav CTA

Rozmiary

xs

sm

default

lg

cta

cta-lg

Komponenty

Karty (Card)

variant="icon" — jasny

Nadzór formalny

Kontrola terminów polis, analiza ochrony, monitoring wartości pojazdu.

Eksploatacja i serwis

Koordynacja serwisów i napraw, optymalizacja kosztów eksploatacyjnych.

Zabezpieczenie wartości

Organizacja powłok ceramicznych, folii PPF i zabezpieczeń antykradzieżowych.

variant="icon" — ciemny

Aspekt finansowy

Wsparcie w rozliczeniach, współpraca z biurem księgowym.

Kompetencja

Organizacja szkoleń z doskonalenia techniki jazdy.

Concierge

Pełna obsługa i koordynacja w każdym aspekcie mobilności.

variant="step" — badge

01

Konsultacja

Rozpoznanie potrzeb, oczekiwań i kontekstu decyzji.

02

Ustalenie zakresu

Określenie modelu działania oraz obszarów nadzoru operacyjnego.

03

Stały nadzór

Ciągłość, kontrola i bieżące decyzje w ramach ustalonej struktury.

variant="step" stepStyle="overlay"

01

Konsultacja

Rozpoznanie potrzeb, oczekiwań i kontekstu decyzji.

02

Ustalenie zakresu

Określenie modelu działania i nadzoru.

03

Stały nadzór

Ciągłość, kontrola i bieżące decyzje.

variant="checklist"

Kontrola terminów polis i zobowiązań

Analiza oraz optymalizacja ochrony (OC, AC, GAP)

Monitoring wartości pojazdu

Rekomendacje w zakresie utrzymania wartości rezydualnej

Rozmiary padding

small

padding="small"

compact

padding="compact"

default

padding="default"

large

padding="large"

Layout

Sekcje (Section)

Komponent Section obsługuje 5 wariantów tematycznych. Poniżej prezentacja każdego z nich.

Wariant

Light

Jasne tło z subtelnymi gradientami brand. Domyślny wariant.

Przykładowa karta

Treść na jasnym tle.

01

Krok

Opis kroku.

Element listy kontrolnej

Wariant

Raw (szary)

Neutralne szarości. Industrialny, surowy charakter.

Przykładowa karta

Treść na szarym tle.

01

Krok

Opis kroku.

Element listy kontrolnej

Wariant

Dark (niebieski)

Granatowe tło brand-950 z niebieskim glow.

Przykładowa karta

Treść na granatowym tle.

01

Krok

Opis kroku.

Element listy kontrolnej

Wariant

Lux (szarość + złoto)

Ciemny charcoal ze złotymi akcentami. Luksusowy wariant.

Przykładowa karta

Treść na ciemnym tle ze złotem.

01

Krok

Opis kroku.

Element listy kontrolnej

Padding sekcji

none
brak paddingu

compact
py-10 sm:py-10 lg:py-14

default
py-20 sm:py-20 lg:py-28

large
py-20 sm:py-24 lg:py-32

Layout

Hero

Komponent Hero obsługuje 4 warianty kolorystyczne. Poniżej każdy z nich w wersji kompaktowej.

variant="brand"

Brand (domyślny)

Granatowy overlay z niebieskimi akcentami. Domyślny wariant Hero.

variant="light"

Light

Jasny overlay, ciemny tekst. Subtelny wariant na jasne tła.

variant="raw"

Raw (szary)

Ciemne szarości z neutralnymi akcentami. Industrialny charakter.

variant="lux"

Lux (szarość + złoto)

Charcoal overlay ze złotymi akcentami. Luksusowy wariant.

Komponenty

Ikony

ShieldIcon

WrenchIcon

GemIcon

LayersIcon

GaugeIcon

CrownIcon

SparklesIcon

HeartIcon

UsersIcon

TruckIcon

WarehouseIcon

BadgeCheckIcon

CheckIcon

ArrowRightIcon

InstagramIcon

YouTubeIcon

Narzędzia

Efekty i klasy pomocnicze

Glass divider

.glass-divider

Glass card

.glass

Karta ze szklanym efektem — blur + nasycenie + subtelny border.

Glass subtle

.glass-subtle

Subtelniejsza wersja glass card z lżejszym blur i mniejszą opacity.

Glow border (hover)

.glow-border — najedź kursorem

Karta z gradientowym border widocznym po najechaniu.

Animated gradient line

.animated-gradient-line

Noise overlay

.noise-overlay — subtelna tekstura na ciemnych sekcjach

Sekcja z nałożoną teksturą szumu (3% opacity).

Responsywność

Breakpointy

sm

640px

md

768px

lg

1024px

xl

1280px

2xl

1440px