Styleguide

Color System

Primary Green: #009472

HEX: #009472
RGB: rgb(0, 148, 114)
HSL: hsl(166, 100%, 29%)

Usage: Main brand color, used in primary buttons (`.x-btn-1`), accents, section headings (`.x-title-small`), gradients.

When to use: Action buttons, active links, elements requiring user attention.

Combinations: Works well with white (#FFFFFF) on text, black (#000000) on background, and with Dark Green (#013B2D) in gradients.

Dark Green: #013B2D

HEX: #013B2D
RGB: rgb(1, 59, 45)
HSL: hsl(166, 97%, 12%)

Usage: Used in gradients (e.g. `.x-content-box-5`), section backgrounds, decorative elements.

When to use: Section backgrounds with gradient, auxiliary elements requiring deeper color.

Combinations: Used in gradients with black (#000000) and Primary Green (#009472).

Dark Blue: #09153A

HEX: #09153A
RGB: rgb(9, 21, 58)
HSL: hsl(225, 73%, 13%)

Usage: Used in mobile menu (`.menu-rsp`, `.header-rsp`), navigation elements.

When to use: Mobile menu backgrounds, navigation elements requiring contrast.

Combinations: Works well with white (#FFFFFF) on text.

Black: #000000

HEX: #000000
RGB: rgb(0, 0, 0)
HSL: hsl(0, 0%, 0%)

Usage: Main text (body), section backgrounds (`.x-content-box-2`, `.x-content-box-4`), contrast elements.

When to use: Text on light backgrounds, section backgrounds requiring contrast.

Combinations: Used with white (#FFFFFF) on text, Primary Green (#009472) on accents.

White: #FFFFFF

HEX: #FFFFFF
RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)

Usage: Text on dark backgrounds, section backgrounds, secondary buttons (`.x-btn-1-1`).

When to use: Text on dark sections, buttons on dark backgrounds, box backgrounds.

Combinations: Used with black (#000000) on text, Primary Green (#009472) on accents.

Grey: #F6F6F6

HEX: #F6F6F6
RGB: rgb(246, 246, 246)
HSL: hsl(0, 0%, 96%)

Usage: Section backgrounds (`.z-bg-1`), boxes (`.x-box-3`, `.x-boxes-3a`), auxiliary elements.

When to use: Section backgrounds requiring subtle contrast, content boxes.

Combinations: Used with black (#000000) on text.

Styleguide

Typography

Rodzina fontów: Silka

Weight 400 (Regular) - base text
Used in: paragraphs, lists, continuous text (body text).

Weight 500 (Medium) - accents
Used in: dates (`.data-rsp`), small accents, auxiliary elements.

Weight 600 (SemiBold) - headings, accents
Used in: section headings (`.x-title h2`), titles (`.x-title-small`), buttons (`.x-btn-1`).

Weight 700 (MonoBold) - strong accents
Used in: strong highlights, CTA, elements requiring attention.

Rozmiary i hierarchia

Base (16px): Base text - used in body, paragraphs, lists.

Small (11px): Auxiliary text - used in `.data-rsp`.

H2 (20px): Standard headings - used in `body h2`.

H1/Large (48px): Main headings - used in `.x-title h2`.

Subtitle (24px): Subtitles - used in `.x-content-box-3 .txt`, `.text h3`.

Line-height

Standard: 150% (1.5) - used in body, paragraphs, most text elements.

Przykłady typografii

H1 - Main heading (48px, SemiBold)

H2 - Standard heading (20px, SemiBold)

H3 - Subtitle (24px, SemiBold)

Body text - Base text (16px, Regular, line-height 150%). Used in paragraphs, lists and continuous text.

Small text - Auxiliary text (11px, Medium)

Styleguide

Spacing System

Padding

Container: 40px (mobile), 30px (desktop) - `.container`
Section padding: 90px - `.x-padding-1`
Button padding: `0 20px`, height `44px` - `.x-btn-1`
Box padding: Różne w zależności od kontekstu:
- 15px - `.x-boxes-2a .row-box .col-box`
- 20px - `.x-boxes-1 .row-box .col-box`
- 25px - `.x-boxes-2 .row-box .col-box`, `.x-boxes-3 .row-box .col-box`
- 30px - `.x-boxes-3a .row-box .col-box .x-box-3a`

Margins

Section margins: 90px - `.x-mt-1`, `.x-mb-1`
Paragraph margin-bottom: 25px - `body p`
Title margin-bottom: 60px - `.x-title`
Title-small margin-bottom: 20px - `.x-title-small`
List padding-left: 16px (ul), 20px (ol)
Button margin-right: 30px (w grupie) - `.x-content-box-1 .x-button-box a`

Gaps between elements

Box margin w row-box: -20px, -25px (z padding 20px, 25px w col-box)

Styleguide

Layout Grid

Container

Width: 1220px (max-width 100%)
Padding: 40px (mobile), 30px (desktop)
Klasa: `.container`

Breakpoints

System oparty na Bootstrap:
- Mobile: < 1199px
- Desktop: ≥ 1199px

Column System

Row: `.row-box` - flex container
Column: `.col-box` - flex item

Warianty:
- `.cols3` - 3 kolumny (33.3333%)
- `.cols4` - 4 kolumny (25%)
- `.cols5` - 5 kolumn (20%)

Domyślnie: 2 kolumny (50%) w `.z-content-box-1-1`

Styleguide

Border Radius

Zaokrąglenia

Buttons: 22px - `.x-btn-1` (border-radius)
Images: 10px - niektóre obrazy (border-radius)
Boxes: 10px - `.x-box-2 figure img`, `.x-box-3`, `.x-boxes-3a .x-box-3a`

Styleguide

Transitions & Animations

Transitions

Duration: `0.15s linear` - standardowe przejścia
Używane w: `.logo, img, a, button`

Hover Effects

Buttons: `translateY(-5px)` z `opacity: 0.9` - `.x-btn-1:hover`
Images/Links: `translateY(-5px)` z `opacity: 0.9` - `.x-content-box-1 .x-button-box a:hover`
Social icons: `translateY(-2px)` - `.social-box a:hover`

Box-shadow

Header mobile: `0 0 7px rgba(0, 0, 0, 0.5)` - `.header-rsp`

Z-index hierarchy

Header: z-index 10 - `body header`
Menu mobile: z-index 100-101 - `.menu-rsp`, `.header-rsp`
Content: standardowy flow