United States
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)

<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>
Zobacz Brandbook Zobacz Styleguide Zobacz Media