Design System Library

Buttons

Primary Button (.x-btn-1)

Primary Button

<a href="#" class="x-btn-1">Primary Button</a>

Specyfikacja:

Padding: 0 20px
Height: 44px
Border-radius: 22px
Background: #009472
Color: #FFFFFF
Font-weight: 600 (SemiBold)
Hover: translateY(-5px), opacity: 0.9

Zastosowania:

Główne akcje, call-to-action, przyciski nawigacyjne

Secondary Button (.x-btn-1-1)

Secondary Button

<a href="#" class="x-btn-1 x-btn-1-1">Secondary Button</a>

Specyfikacja:

Background: #FFFFFF
Color: #000000
Pozostałe właściwości jak .x-btn-1

Zastosowania:

Alternatywne akcje, przyciski na ciemnych tłach

Button Group (.x-button-box)

Button 1 Button 2

<div class="x-button-box">
    <a href="#" class="x-btn-1">Button 1</a>
    <a href="#" class="x-btn-1 x-btn-1-1">Button 2</a>
</div>

Specyfikacja:

Display: flex
Margin-right: 30px między przyciskami

Design System Library

Typography Components

Title (.x-title)

Główny nagłówek sekcji

<div class="x-title">
    <h2>Główny nagłówek sekcji</h2>
</div>

Specyfikacja:

Font-size: 48px
Font-weight: 600 (SemiBold)
Margin-bottom: 60px

Title Small (.x-title-small)

Mały nagłówek sekcji

<div class="x-title-small">Mały nagłówek sekcji</div>

Specyfikacja:

Font-size: 16px
Font-weight: 600 (SemiBold)
Color: #009472
Margin-bottom: 20px

Content Text (.x-content-box-3 .txt)

Przykładowy tekst w sekcji z zielonym tłem. Używany do wyróżnienia ważnych komunikatów.

<div class="x-content-box-3">
    <div class="container">
        <div class="txt">
            Przykładowy tekst w sekcji z zielonym tłem.
        </div>
    </div>
</div>

Specyfikacja:

Font-size: 24px
Font-weight: 600 (SemiBold)
Background: #009472
Color: #FFFFFF
Text-align: center

Design System Library

Cards / Boxes

Box with Icon (.x-box-1)

Bezpłatnie zbuduj profil prewencyjny

<div class="x-boxes-1">
    <div class="row-box">
        <div class="col-box" style="max-width: 250px;">
            <div class="x-box-1">
                <figure><img src="img/icons/01.svg" alt=""></figure>
                <div class="txt">
                    Bezpłatnie zbuduj profil prewencyjny
                </div>
            </div>
        </div>
    </div>
</div>

Specyfikacja:

Font-size: 20px
Font-weight: 600 (SemiBold)
Text-align: center
Line-height: 150%

Zastosowania:

Karty z ikonami, lista funkcji, cechy produktu

Box with Image (.x-box-2)

Na podstawie badań i wywiadu tworzy spersonalizowany profil medyczny.

<div class="x-boxes-2">
    <div class="row-box">
        <div class="col-box" style="width: 33.3333%;">
            <div class="x-box-2">
                <figure><img src="img/files/01.png" alt=""></figure>
                <div class="txt">
                    Tekst pod obrazem
                </div>
            </div>
        </div>
    </div>
</div>

Specyfikacja:

Image border-radius: 10px
Image margin-bottom: 30px

Box with Border (.x-box-2a)

Wellysa to niezależna firma założona przez doświadczonych lekarzy, naukowców i menedżerów.

<div class="x-boxes-2a">
    <div class="row-box">
        <div class="col-box" style="width: 33.3333%;">
            <div class="x-box-2a">
                Treść boxa z obramowaniem
            </div>
        </div>
    </div>
</div>

Specyfikacja:

Padding: 40px 30px
Border: 1px solid #009472
Border-radius: 10px
Color: #FFFFFF (na ciemnym tle)

Content Card (.x-box-3)

Wellysa Asystent

Podstawowa usługa Wellysa, wspomagająca systematyczną prewencję osobistą.

<div class="x-boxes-3">
    <div class="row-box">
        <div class="col-box" style="width: 33.33333%;">
            <div class="x-box-3">
                <figure><img src="img/files/04.png" alt=""></figure>
                <div class="description">
                    <h3>Tytuł</h3>
                    <p>Opis</p>
                </div>
            </div>
        </div>
    </div>
</div>

Specyfikacja:

Background: #F6F6F6
Border-radius: 10px
Description padding: 25px 30px
H3 color: #009472

Design System Library

Layout Components

Container (.container)

Przykładowa zawartość kontenera

<div class="container">
    Zawartość
</div>

Specyfikacja:

Width: 1220px (max-width 100%)
Padding: 40px (mobile), 30px (desktop)
Margin: 0 auto (centrowanie)

Row Box (.row-box)

Kolumna 1

Kolumna 2

<div class="row-box" style="margin: 0 -15px;">
    <div class="col-box" style="padding: 0 15px; width: 50%;">
        Kolumna 1
    </div>
    <div class="col-box" style="padding: 0 15px; width: 50%;">
        Kolumna 2
    </div>
</div>

Specyfikacja:

Display: flex
Flex-wrap: wrap
Margin: ujemny (kompensuje padding kolumn)

Content Box Sections

Przykład sekcji

Tytuł sekcji

<div class="x-content-box-2 x-padding-1">
    <div class="container">
        <div class="x-title-small">Mały nagłówek</div>
        <div class="x-title">
            <h2>Główny tytuł</h2>
        </div>
    </div>
</div>

Dostępne warianty:

.x-content-box-1 - Hero section z tłem
.x-content-box-2 - Czarne tło (#000000)
.x-content-box-3 - Zielone tło (#009472)
.x-content-box-4 - Białe tło
.x-content-box-5 - Gradient (czarny → zielony)
.x-content-box-6 - Białe tło
.x-content-box-7 - Czarne tło z obrazem
.x-content-box-8 - Białe tło
.x-content-box-9 - Szare tło (#F6F6F6) z obrazem
.z-content-box-1 - Białe tło (subpage)

Design System Library

Icons

Functional Icons

01.svg

02.svg

03.svg

04.svg

05.svg

06.svg

07.svg

<img src="img/icons/01.svg" alt="">

Social Media Icons

<div class="social-box">
    <a href="#"><img src="img/icons/facebook.svg" alt=""></a>
    <a href="#"><img src="img/icons/instagram.svg" alt=""></a>
    <a href="#"><img src="img/icons/linkedin.svg" alt=""></a>
    <a href="#"><img src="img/icons/yt.svg" alt=""></a>
</div>

App Store Badges

<div class="x-button-box">
    <a href="#"><img src="img/icons/app-store.png" alt=""></a>
    <a href="#"><img src="img/icons/google-play.png" alt=""></a>
</div>