Styles

How the site looks — its colours, fonts, text sizes, corners, spacing, shadows and motion, and a few choices of layout the theme leaves open — is a style you choose in the panel. The pages themselves belong to the site’s theme, which developers build; a style changes the values the theme draws with and picks among the layouts it offers. You can make as many styles as you like, try one on the real site where only you see it, and switch the whole site to it when it is right.

Everything in this chapter is administrators only, unless an administrator has given another role the style permissions (Roles).

Styles live under Settings → Site → Styles (Ustawienia → Witryna → Style), at /admin/settings/styles. The overview’s search finds them by words such as kolory, czcionki, wygląd or kontrast (colours, fonts, contrast in English).

What visitors see

Every visitor sees the active style, on every page, in the light or dark scheme they chose with the site’s colour-scheme switch (or their device’s, when they left it to the system). Two things are always theirs and no style can take them away: somebody who asked their device for more contrast gets the stronger borders and text, and somebody who asked for less motion gets none.

The pictures of blocks in the panel’s editors — a lesson’s, a page’s — are drawn in the active style too, so what an editor sees is what a visitor will see. So are the e-mails the site sends: their buttons, text and background take the active style’s colours (never the colours of a style somebody is only previewing).

The logo and the favicon are not part of a style; they stay in Branding (Identyfikacja) (Administration).

The list

Each style is a row:

Column	Shows
Name (Nazwa)	The name, with its description under it — for a built-in style, a line saying it came with the theme and cannot be changed
Kind (Rodzaj)	Built-in (Wbudowany) — it came with the theme — or Made here (Zrobiony tutaj)
Status (Stan)	Active (Włączony) for the one the site is drawn in, Not active (Wyłączony) for the rest
Updated (Zmieniony)	When it last changed

The active style comes first, then the built-in ones, then the rest by name. Above the list, Import (Importuj) takes a style from a file, New style from scratch (Nowy styl od zera) makes one from five answers, and New style (Utwórz) starts an empty one. On a row, Edit (Edytuj) opens a style you made, Open (Otwórz) opens a built-in one, and the ⋮ menu holds Activate (Włącz) — on a style that is not active — Preview (Podgląd), Export (Eksportuj), Duplicate (Duplikuj) and, where it is allowed, Delete (Usuń).

HiLMS WCAG, the built-in style

A new site has one style: HiLMS WCAG, the theme’s own values. Every pair of colours in it meets the WCAG contrast a text or a control needs, in both colour schemes, so it is a safe place to start. It is active from the first day, and it changes nothing — the site in HiLMS WCAG is the site as the theme draws it.

A built-in style cannot be changed or deleted. Its page is a short summary instead of the form: About this style (O tym stylu), What it changes (Co zmienia) — each value it sets, a colour in both schemes, or “Nothing: it draws the theme as it is” (Nic: rysuje motyw taki, jaki jest) — and the layout it picks, with Preview, Export and Duplicate beside it, and Activate while another style is active. A theme can ship more built-in styles of its own; they appear here the same way.

Making a style

The quickest way is to Duplicate (Duplikuj) a style that is close to what you want — HiLMS WCAG, or one you made — and confirm. The copy is called “HiLMS WCAG (copy)” (HiLMS WCAG (kopia)), is never active, and opens in its editor. New style (Utwórz) opens the same form, empty: anything you leave empty is the theme’s value, so a style created with nothing filled in is the same as a copy of HiLMS WCAG. Create (Utwórz) at the top of the sidebar saves it.

Neither changes the site. A style does nothing until it is activated.

A new style from scratch

New style from scratch (Nowy styl od zera) asks five things, one step at a time, and makes a whole style from them:

1. Brand colour (Kolor marki) — your organisation’s colour, typed the way designers write colours or picked with the sliders (see Colours below). The accent grows from it and keeps its hue.
2. Greys (Szarości) — what backgrounds, lines and text lean to: Plain grey (Czyste szarości), Warm (Ciepłe), Cool (Chłodne) or Toward the brand (W stronę marki).
3. Fonts (Kroje pisma) — the Text font (Krój tekstu) and the Heading font (Krój nagłówków), which can be Same as the text font (Taki sam jak krój tekstu).
4. Shape and room (Kształt i odstępy) — Corners (Narożniki): Sharp, Soft or Round (Ostre, Łagodne, Zaokrąglone); Room (Odstępy): Compact, Comfortable or Airy (Zwarta, Wygodna, Przestronna).
5. Name (Nazwa) — and, beside it, the accessibility advice for the style it is about to make.

Create style (Utwórz styl) makes it, never active, and opens its editor. Every colour it chooses meets its contrast in both colour schemes, because it is chosen to: the generator moves a colour’s lightness until the text on it, and it on its background, are far enough apart. Everything can be changed in the editor afterwards.

The editor

At the top, Details (Szczegóły): the Name (Nazwa) and a Description (Opis) for you and your colleagues — visitors never see it.

Below come three tabs.

Foundations (Podstawy) holds the site-wide values, one collapsed section per kind — click a heading to open it:

Section	What it holds
Colours (Kolory)	The page, card and well backgrounds, the text in three strengths, the dividers and control borders, the accent and its variants, the four status colours with their tints, and the focus ring
Focus ring (Obwódka fokusu)	How thick the ring around a focused control is, and the gap between it and the control
Links (Odnośniki)	How far the underline sits below a link
Corners (Zaokrąglenia)	How round cards, controls and badges are
Spacing (Odstępy)	The density of the whole site, and the space between blocks, between sections and at the page’s edge
Text sizes (Rozmiary tekstu)	Eight sizes, from extra small text to large headings, each with its line height
Reading (Czytanie)	The line height of long text
Widths (Szerokości)	The page, the reading column and the wide and narrow widths
Fonts (Kroje pisma)	The text font, the heading font and the code font
Font weights (Grubości pisma)	Regular, medium, semibold and bold
Letter spacing (Odstępy między literami)	How tightly headings are set
Shadows (Cienie)	The shadows of cards, raised elements and controls
Motion (Ruch)	How long quick and ordinary movements take
Advanced (Zaawansowane)	The header’s height, the side panel’s and the menu’s widths, the thickness of lines and the smallest a control may be — kept apart, because other parts of the page measure themselves against them. Check a page with a side panel, and the menu on a phone, after changing one

Components (Komponenty) holds the values of one part of the site at a time, so you can change a button without changing everything that shares its colour or corners: Header (Górny pasek), Buttons (Przyciski), Form fields (Pola formularzy), Cards (Karty), Badges (Plakietki), Chips (Filtry), Alerts (Komunikaty), Callouts (Ramki z uwagą), Page heroes (Banery stron), Quotes (Cytaty), Code listings (Listingi kodu), Questions (Pytania sprawdzające), Accordions (Akordeony), Images (Obrazy), Embeds (Osadzenia), Videos (Wideo), Headings (Nagłówki), Links (Odnośniki w tekście), Footer (Stopka), Rail (Panel boczny strony), Drop-down panels (Rozwijane panele), Icon buttons (Przyciski z ikoną) and Progress bar (Pasek postępu).

Layout (Układ) holds the choices of layout the theme leaves to a style (Layout below).

Every field starts empty, and empty means the theme’s value — the grey text in the field says what that value is, after “As the theme has it” (Jak w motywie). Fill in only what you want different; clear a field to go back to the theme. What you leave empty also follows the theme if developers improve it later.

Most components follow a foundation. A button’s background is the accent, a card’s corners are the box corners. Such a value has a switch, on from the start, that says what it follows — Follow Accent (Zgodnie z: Akcent) — and while it is on there is nothing to fill in: the button changes whenever the accent does. Turn the switch off to give it a value of its own; its fields appear, filled with what it followed, and a line under the switch says it no longer follows. Turn it back on to follow again.

Some spaces are counted in steps. The room inside a button or a card is a number of steps of the site’s density — “4 × step” (4 × krok) — and the line beside it says what that comes to now: “Comes to 1rem at a Density of 0.25rem, and moves with it.” Change the density and every space counted in steps changes with it. Type a length such as 12px instead, and it stays that length whatever the density.

Generate… (Wygeneruj…) in the heading of Colours, Text sizes, Spacing and Corners fills that section from a few answers: a brand colour and a tint for the greys; a body text size and a step between sizes (Gentle, Moderate, Clear or Bold — Łagodny, Umiarkowany, Wyraźny, Mocny); a room; a shape. Fill in (Wypełnij) fills the fields and opens the section — “Filled in. Nothing is saved until you save the style.” (Wypełniono. Nic nie jest zapisane, dopóki nie zapiszesz stylu.) — so you can look before you save. A value that comes out equal to the theme’s is left empty, and every component that follows a colour keeps following it.

Save changes (Zapisz) keeps them. A value that cannot be used is refused on its own field — “This value cannot be used: …” (Tej wartości nie da się użyć: …) — with the reason, and nothing is saved until it is fixed. The reason itself is given in English, as the system states it: “a length is a number followed by px, rem, em”.

When the theme has changed since a style was saved and no longer takes some of its values, a warning above the form says so — “The theme no longer takes some of this style’s values” (Motyw nie przyjmuje już części wartości tego stylu) — and names them. The site already leaves them out; saving the style drops them for good.

Colours

Each colour has a Light (Jasny) and a Dark (Ciemny) value side by side: the first for visitors in the light scheme, the second for the dark one.

Type a colour the way designers write them — #b4461e, rgb(180 70 30) or oklch(54% 0.15 39) — and leave the field: it is rewritten as oklch(…), the form the site keeps colours in. Beside it, a square shows the colour, and Hex (Hex) says it in a form other tools read. Under it, three sliders move it:

• Lightness (Jasność), from black to white. This is the one that decides contrast: text needs to be far from its background in lightness.
• Chroma (Nasycenie), from grey to the most vivid.
• Hue (Odcień), round the colour wheel — 30 is orange-red, 150 green, 250 blue.

The sliders work with the arrow keys as well. A colour you change in one scheme keeps the theme’s value in the other, so change the accent in Dark too, or dark mode keeps the old one.

Sizes, numbers and durations

• A size is a number and one of three units — px, rem or em — such as 0.75rem or 12px, or just 0. A rem is the text’s base size, 16 pixels; an em is the size of the text around it. Percentages and screen units (%, vw) are refused.
• A line height is a plain number: 1.5 means one and a half times the text’s size.
• A duration is 120ms or 0.2s.

A few values have a floor the theme holds them to — the focus ring’s width, its gap, the smallest control, the underline’s gap. Beside those fields it says At least … (Co najmniej …), and a value below it turns into a warning: “Below the theme’s floor of 2px: pages will be harder to use.” It is advice; you can still save it (see Accessibility below).

Density (Gęstość), in Spacing, says more under it: every gap and padding on the site is a multiple of it, so a small change moves the whole site. The measures under Advanced carry the same kind of warning.

Fonts and weights

A font is a choice: Instrument Sans (the font the theme is built with, loaded from the site itself), every font on the Fonts page (Fonts below), and System sans-serif, System serif, System rounded or System monospace (Systemowy bezszeryfowy, szeryfowy, zaokrąglony, o stałej szerokości) — the ones already on the visitor’s device, so they cost nothing to load. The heading font also offers Same as Text font (Taki jak: Krój tekstu). A page drawn in a system font downloads no font at all, and one drawn in a font of the Fonts page downloads only that font, from the site itself.

A weight is a choice from 100 · Thin to 900 · Black.

Shadows

A shadow is made of Layers (Warstwy); No layers means the theme’s shadow. Add a layer (Dodaj warstwę), up to four, each with a Colour (Kolor) — the same field as above, with an Opacity (Krycie) slider — how far it falls Across and Down (W poziomie, W pionie), its Blur (Rozmycie) and Spread (Rozciągnięcie), and whether it sits Inside the box (Wewnątrz ramki).

Layout

The Layout (Układ) tab picks among the layouts the theme offers. Every choice starts at As the theme has it (Jak w motywie), which says what that is.

Parts of the page (Części strony) — what every page shares:

Choice	Options
Header (Górny pasek)	Logo and menu at the start (Logo i menu na początku), Logo in the middle (Logo pośrodku), Logo at the start, menu at the end (Logo na początku, menu na końcu)
Course cards (Karty kursów)	Cover above the words (Okładka nad tekstem), Cover beside the words (Okładka obok tekstu) — a card too narrow for it puts the cover above again
Category on a course card (Kategoria na karcie kursu)	Shown (Widoczna) or Hidden (Ukryta)
Footer (Stopka)	Centred (Wyśrodkowana), At the start (Od początku), Menu in columns (Menu w kolumnach) — each top link of the footer menu heading a column with its own links under it

Blocks (Bloki) — how a kind of block looks on every page while it follows the style:

Choice	Options
Callouts (Ramki z uwagą)	Soft tint (Delikatne tło), Outlined (Obramowanie), Bold colour (Wyrazisty kolor)
Quotes (Cytaty)	Line at the side (Linia z boku), Centred (Wyśrodkowany), Large (Duży)
Page heroes (Banery stron)	Centred (Wyśrodkowany), At the start (Od początku)

A block’s own look can still choose another variant for itself (Lessons and blocks). A theme can offer other choices; they appear here the same way. Previewing shows the layout too, to you alone.

Fonts

Besides the fonts the theme brings and the ones on every device, a site can keep fonts of its own. They live under Settings → Site → Fonts (Ustawienia → Witryna → Fonty), at /admin/settings/fonts, and every style can set text in them.

The list shows each font’s name drawn in the font itself, where it came from — Catalogue (Katalog) or Uploaded (Przesłany) — and its faces in one line, such as “400, 700 · italic 400, 700 · latin, latin-ext”: the weights, the italic weights and the character sets.

Add from the catalogue (Dodaj z katalogu) searches Bunny Fonts, a European copy of Google’s free fonts:

1. Type part of a name in Family (Rodzina) and pick it: “Lora — serif” (Lora — szeryfowy).
2. Tick the Weights (Grubości), Styles (Style) — Upright (Prosty) and Italic (Kursywa) — and Character sets (Zestawy znaków) you want. Regular and bold, upright, and the character sets your site’s languages need (Latin and Latin Extended for Polish and English) are ticked for you. More character sets cost disk space, not your visitors’ time: a browser fetches only the parts a page’s text needs.
3. Download (Pobierz). A few seconds later: “Lora is ready” (Lora jest gotowy).

The files are downloaded once and kept on the site, which serves them itself: no visitor’s browser ever reaches the catalogue. Adding the same family again with more weights fetches only what is new.

Upload your own (Prześlij własny) takes a font you hold a licence for: the Family name, the Weight (Grubość), the Style (Styl) and one Font file (woff2) (Plik fontu (woff2)), at most 2 MB. One file is one weight in one style; upload the next one under the same family name. Upload only a font whose licence allows putting it on a website. A file that is not really a woff2 font — a picture renamed, say — is refused.

Delete (Usuń) removes a font and its files. A font a style uses cannot be deleted: “Lora is in use” (Lora jest w użyciu) names the styles, so you can choose another font in them first.

Accessibility

The Accessibility box (Dostępność) beside the form checks the style as you change it — each time you leave a field or let go of a slider — before anything is saved: every pair of colours that meet on the site — text on its background, a link on a card, the label of a button on its background, a field’s outline, the words in a bold callout — in the light scheme and the dark one, and every floor. The colours you give components are checked too, apart from a card’s own background, which nothing judges yet: if you give cards a colour of their own, look at a course list and a mail in both schemes.

• Every contrast pair and every floor is met in both colour schemes (Każda para kolorów i każde minimum są spełnione w obu schematach kolorów) — all is well.
• Otherwise it lists what Falls short (Nie spełnia), one line each: “Accent on Page background: 2.3 of 4.5, light” (Akcent na tle „Tło strony”: 2,3 z 4,5, jasny) means the accent on the page, in the light scheme, reaches a contrast of 2.3 where 4.5 is needed. Then it says how many pairs are fine. A broken floor is a line of its own, with the reason in English.

Its first line, above everything else, says how your site treats this:

• Advice (Porada) — the usual case: you may save and activate a style that falls short. It is your decision, and the box tells you what it costs.
• Enforced by this installation (Wymagane przez tę instalację) — whoever runs the server has promised that the site stays accessible. Then a style that falls short cannot be activated, and the active style cannot be saved into falling short; a style you are still working on saves as usual.

Previewing

Preview (Podgląd) opens the site in a new tab, drawn in that style for you alone — everybody else keeps seeing the active style. A bar across the top says “You are previewing the style …” (Oglądasz podgląd stylu …). Walk through a few pages: the home page, a course, a lesson, the course list. Switch the site to dark with its colour-scheme switch in the header to see the dark values, and narrow the window or use your phone to see it small.

The preview shows the style as last saved, so save before you preview. End preview (Zakończ podgląd) in the bar takes you back to the style in the panel.

Activating

Activate (Włącz) asks once — “Activate …?” (Włączyć styl …?) — and then the whole site is drawn in that style, for everybody, from the next page anyone opens. The style that was active before stays in the list, not active, and you can switch back to it the same way.

The active style’s editor opens with This style is live (Ten styl jest włączony): saving it changes the site for everyone at once. To try something out on a live site, duplicate the active style, change and preview the copy, and activate the copy when it is right.

Where the installation enforces accessibility, a style that falls short is refused with a message listing what falls short, and stays as it was.

Exporting and importing

A style can travel as a file in the Design Tokens format, which design tools read and write — Figma through Tokens Studio, Penpot, Claude Design.

• Export (Eksportuj) downloads the style as a file named after it — hilms-wcag.tokens.json for HiLMS WCAG — with every value of the theme as the style sets it and every layout choice it makes, so a designer sees the whole picture. Exporting HiLMS WCAG gives a designer the theme’s own values to start from.
• Import (Importuj) above the list asks for a Name (Nazwa) — leave it empty to use the name the file carries — and the Token file (Plik tokenów): open the file in any text editor, copy everything and paste it in. Up to 256 KB.

An import always makes a new style and opens it; it never changes one you have. Values equal to the theme’s are left out, so the new style keeps only what really differs, and a value or a layout choice this theme does not have is passed over — the message after the import says how many values it kept and names what it passed over. A file that is not a token file at all is refused under the field: “This file cannot be imported: …” (Tego pliku nie można zaimportować: …).

Deleting

You can delete a style you made that is not active: open it and use Delete (Usuń) at the very bottom, in Danger zone (Strefa nieodwracalna), or choose it from the row’s ⋮ menu. A built-in style is never deleted, and the active one only once another is active.

History

Every change to a style — its name, its values, which style is active — is recorded in the Activity log (Dziennik zdarzeń) with who made it and when (Administration). To go back, copy the old values from there into the style, or keep the previous version as a style of its own by duplicating it before you change it.