Design System Library

Buttons

Primary Button (.x-btn-1)

Primary Button

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

Specification:

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

Usage:

Primary actions, call-to-action, navigation buttons

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

Secondary Button

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

Specification:

Background: #FFFFFF
Color: #000000
Other properties same as .x-btn-1

Usage:

Alternative actions, buttons on dark backgrounds

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>

Specification:

Display: flex
Margin-right: 30px between buttons

Design System Library

Typography Components

Title (.x-title)

Main section heading

<div class="x-title">
    <h2>Main section heading</h2>
</div>

Specification:

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

Title Small (.x-title-small)

Small section heading

<div class="x-title-small">Small section heading</div>

Specification:

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

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

Example text in section with green background. Used to highlight important messages.

<div class="x-content-box-3">
    <div class="container">
        <div class="txt">
            Example text in section with green background.
        </div>
    </div>
</div>

Specification:

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)

Build a preventive profile for free

<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">
                    Build a preventive profile for free
                </div>
            </div>
        </div>
    </div>
</div>

Specification:

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

Usage:

Cards with icons, feature list, product characteristics

Box with Image (.x-box-2)

Based on tests and interview, creates a personalized medical profile.

<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">
                    Text under image
                </div>
            </div>
        </div>
    </div>
</div>

Specification:

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

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

Wellysa is an independent company founded by experienced physicians, scientists and managers.

<div class="x-boxes-2a">
    <div class="row-box">
        <div class="col-box" style="width: 33.3333%;">
            <div class="x-box-2a">
                Box content with border
            </div>
        </div>
    </div>
</div>

Specification:

Padding: 40px 30px
Border: 1px solid #009472
Border-radius: 10px
Color: #FFFFFF (on dark background)

Content Card (.x-box-3)

Wellysa Assistant

Basic Wellysa service, supporting systematic personal prevention.

<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>Title</h3>
                    <p>Description</p>
                </div>
            </div>
        </div>
    </div>
</div>

Specification:

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

Design System Library

Layout Components

Container (.container)

Example container content

<div class="container">
    Content
</div>

Specification:

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

Row Box (.row-box)

Column 1

Column 2

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

Specification:

Display: flex
Flex-wrap: wrap
Margin: negative (compensates column padding)

Content Box Sections

Section example

Section title

<div class="x-content-box-2 x-padding-1">
    <div class="container">
        <div class="x-title-small">Small heading</div>
        <div class="x-title">
            <h2>Main title</h2>
        </div>
    </div>
</div>

Available variants:

.x-content-box-1 - Hero section with background
.x-content-box-2 - Black background (#000000)
.x-content-box-3 - Green background (#009472)
.x-content-box-4 - White background
.x-content-box-5 - Gradient (black → green)
.x-content-box-6 - White background
.x-content-box-7 - Black background with image
.x-content-box-8 - White background
.x-content-box-9 - Grey background (#F6F6F6) with image
.z-content-box-1 - White background (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>