Principles

Eight rules every page is built on.

Phone first. The design was drawn at 390 px wide and widens for a computer from 1024 px. A rule without a condition is the phone's; wider screens add to it.
Exactly as designed. A page that has a screen in the approved design is that screen: 0 differing pixels on a phone and on a computer, in Chromium and in WebKit.
Tokens only. A type size, a space and a colour always come from the tokens. The style check refuses a value written into a component.
Readable type. Text that is read is at least 16 px. 13 and 14 px are for short supplementary data only, and nothing is under 12 px.
Nothing wraps. Navigation links, tabs, chips, buttons and the logo always stay on one line.
One accent. Red belongs to the main action and to closures, honey to seasonal events. The red háček appears once on a screen at most.
Made for a thumb. Every control on a phone or a tablet reaches at least 44 × 44 px.
Two languages, two modes. Slovak without a prefix in the address, English under /en. A light and a dark mode, following the system by default.

Logo

The red handwritten Čertovská koliba, whose háček over the Č is a pair of devil's horns. Always the supplied image.

On a light surface

On the footer's slate

Height

A phone's header: 22 px
A phone narrower than 349 px: 6.3 % of the window's width
A computer's header: 32 px
Footer: 28 px

Never typed as text, and never wrapped.
Never in a circle, on a badge or in another colour.
In the header it leads to the home page.

Colours

The colours come from the materials around the koliba: the slate of its roof, the lichen of the Devil's Rock, the spruce on the hill and the honey of its logs.

Brand

Each has its own job. The dark mode, an evening by the hearth, gives each its own value, shown beside it. Switch the mode in the header and the samples change.

Devil's red

Main buttons, links, the red háček and the closure notice. Never a large decorative fill.

--color-primary Light #B3141B, Dark #FF7A73

Spruce

The legend's band and quiet emphasis.

--color-secondary Light #24392D, Dark #24392D

Honey

Seasonal events and the "closing" or "shorter hours" state.

--color-tertiary Light #8C5A0E, Dark #E8B65A

Status green

Only the "open" state.

--color-status-open Light #1F6B41, Dark #7FD19E

Event dot

The dot by the duck feast in a computer's navigation.

--color-event-dot Light #C27803, Dark #C27803

Surfaces

Lichen

A phone's page ground, cooler than cream so the logs in the photographs read warm.

--color-background Light #ECEDE7, Dark #141916

Surface

The header and a computer's content ground.

--color-surface Light #F7F7F3, Dark #1B211D

White

Cards, menu sheets and the form.

--color-surface-container-lowest Light #FFFFFF, Dark #1B211D

Lower container

Form fields and quiet panels.

--color-surface-container-low Light #F1F2EC, Dark #1B211D

Container

The soft button, and a row under the pointer in the dark.

--color-surface-container Light #E4E6DF, Dark #232A25

Higher container

The tonal button and the consent box.

--color-surface-container-high Light #D9DCD4, Dark #2C342E

Highest container

The tonal button under the pointer.

--color-surface-container-highest Light #D0D4CB, Dark #2C342E

Slate

The footer, a phone's bottom bar and the information notice.

--color-inverse-surface Light #22262A, Dark #0F1311

Text and lines

Text

All text, icons and the focus ring.

--color-on-surface Light #22262A, Dark #ECEBE4

Quiet text

Descriptions, supplementary data and hints.

--color-on-surface-variant Light #535A5E, Dark #B4BAB2

Outline

The page's scrollbar on a computer.

--color-outline Light #7D8589, Dark #B4BAB2

Hairline

Dividing lines and the edges of fields and of the outlined button.

--color-outline-variant Light #C8CCC4, Dark #3A433C

Text on slate

Text in the footer and on the bottom bar.

--color-inverse-on-surface Light #F1F1EC, Dark #ECEBE4

Containers and states

Pale red

A notice ahead of time and the speciality badge.

--color-primary-container Light #F9DEDC, Dark #2C342E

Pale spruce

The thank-you after the form is sent, and the forest on the drawn map.

--color-secondary-container Light #DCE7DE, Dark #DCE7DE

Pale honey

The event notice and card.

--color-tertiary-container Light #F4DFB2, Dark #3B2F16

Pale status green

The river on the drawn map.

--color-status-open-container Light #DDEFE3, Dark #1B2A20

Error

An error's words under a form field.

--color-error Light #B3261E, Dark #FF7A73

Contrast

Every pair of words and ground meets WCAG 2.2 AA: text at least 4.5 : 1; large text, icons, the edges of controls and the focus ring at least 3 : 1. The ratios are computed from the design's values.

on-surface on surface: 14.18 : 1
on-surface-variant on surface: 6.54 : 1
primary on surface: 6.45 : 1
on-primary on primary: 6.92 : 1
on-primary on primary-pressed: 9.42 : 1
on-secondary on secondary: 12.37 : 1
on-tertiary-container on tertiary-container: 10.47 : 1
status-open on status-open-container: 5.41 : 1
inverse-on-surface on inverse-surface: 13.44 : 1
error on surface-container-lowest: 6.54 : 1
outline on surface: 3.50 : 1
dark-on-surface on dark-surface: 13.71 : 1
dark-on-surface-variant on dark-surface: 8.27 : 1
dark-primary on dark-surface: 6.46 : 1
on-primary on dark-primary-button: 5.85 : 1
dark-on-tertiary-container on dark-tertiary-container: 10.00 : 1
dark-status-open on dark-status-open-container: 8.23 : 1

Type

Two faces of one family: Alegreya, a warm book serif, for headings, dish names and the legend, and Alegreya Sans, its humanist sans sibling, for everything else. Both carry the full Slovak diacritics, in bold too.

Faces and files

The faces are the site's own files in resources/fonts, the very files the design renders with, split into latin and latin-ext. The site never links Google Fonts.

Alegreya

Headings, dish names and the legend. Weights 400–900, licence SIL Open Font License 1.1.

Files

alegreya-latin.woff2 43,476 B
alegreya-latin-ext.woff2 37,856 B
alegreya-italic-latin.woff2 44,456 B
alegreya-italic-latin-ext.woff2 38,316 B

Alegreya Sans

Text, navigation, buttons and forms. Weights 400, 500, 700, licence SIL Open Font License 1.1.

Files

alegreya-sans-400-latin.woff2 23,708 B
alegreya-sans-400-latin-ext.woff2 21,276 B
alegreya-sans-500-latin.woff2 23,928 B
alegreya-sans-500-latin-ext.woff2 21,500 B
alegreya-sans-700-latin.woff2 23,976 B
alegreya-sans-700-latin-ext.woff2 21,868 B
alegreya-sans-italic-400-latin.woff2 24,380 B
alegreya-sans-italic-400-latin-ext.woff2 21,900 B

Material Symbols Outlined

Icons, cut to the ones the site uses. Weights 400, licence Apache License 2.0.

Files

material-symbols-outlined.woff2 7,628 B

Scale

The design's fifteen styles. The code sets a style whole — face, size, weight, leading and tracking: type('body-md'). The computer's styles show on a computer only.

Čertovská koliba

display Alegreya, 44 px, weight 800, leading 1.02, tracking −0.01 em

The gallery's heading on a phone.
Čertovská koliba

display-desktop Alegreya, 72 px, weight 800, leading 1, tracking −0.015 em

The opening headings on a computer: home, menu, duck feast.
Menu

headline-lg Alegreya, 34 px, weight 700, leading 1.08

Page headings on a phone.
Menu

headline-lg-desktop Alegreya, 52 px, weight 700, leading 1.05

Page and section headings on a computer.
Weekly offer

headline-md Alegreya, 26 px, weight 700, leading 1.15

Section headings.
Opening hours

headline-sm Alegreya, 21 px, weight 700, leading 1.2

Card and group headings.
Bryndzové halušky with bacon

dish-name Alegreya, 18 px, weight 600, leading 1.3

Names of dishes and drinks.
Better to serve the devil than our noble lord.

story-body Alegreya, 19 px, weight 400, leading 1.7

The legend, and a page's opening lines on a computer.
Tasty home cooking in a pleasant setting.

body-lg Alegreya Sans, 18 px, weight 400, leading 1.55

A page's opening lines.
Tasty home cooking in a pleasant setting.

body-md Alegreya Sans, 16 px, weight 400, leading 1.55

Text that is read.
The food photographs are illustrative.

body-sm Alegreya Sans, 14 px, weight 400, leading 1.45

Short supplementary data.
Send feedback

label-lg Alegreya Sans, 16 px, weight 700, leading 1.2

Buttons and emphasised labels.
Name (required)

label-md Alegreya Sans, 14 px, weight 500, leading 1.2

Field labels, chips and navigation.
A: 1, 3, 7

label-sm Alegreya Sans, 13 px, weight 500, leading 1.2

Weights, allergens and badges.
360 g · €9.90 · 8:00 – 22:00

numeric Alegreya Sans, 15 px, weight 500, leading 1.3, tabular figures

Numbers that are compared: weights, prices, times.

Other sizes

Sizes the screens set outside the design's styles, each a token of its own.

The heading of the home page and of the privacy policy on a phone: 32 px
A section's heading on a phone: 24 px
Captions and supplementary lines of a phone's cards: 12 px
The privacy policy's text on a phone: 15 px
The pages in a phone's menu: 28 px
A dish's name over its detail on a computer: 20 px
The duck feast's heading on a phone: 30 px
The photo viewer's counter: 17 px
The feast offer's heading on a phone: 28 px
The feast offer's heading on a computer: 38 px

Rules

Text that is read is at least 16 px. 14 and 13 px are for short supplementary data only: allergen numbers, weights, notes, the company line and photo captions.
Numbers that are compared have tabular figures, and in the menu they line up.
The legend reads in Alegreya 19 px with a leading of 1.7.
A capital only at the start of a sentence. No all capitals and no letter-spaced eyebrows over headings.
Until a face's file arrives, the text shows in the system's face and is never invisible. An icon that has not arrived shows nothing, so its name is never seen.

Space

Every space is a multiple of 4 px. Sections are set apart by space, not by boxes.

Named steps

The design's steps. 112 px (3xl) is also the height of a computer's header, under which the content begins.

xs 4 px
sm 8 px
md 16 px
lg 24 px
xl 40 px
2xl 64 px
3xl 112 px

The scale

In the code a space is written space(n), n times 4 px. Only these steps are allowed; the build refuses a step between them.

0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 20, 24, 28, 32

The column

Margin on a phone: 20 px
Margin from 768 px wide: 48 px
The longest line of text: 680 px
The widest column: 1200 px

Layout and grid

One column on a phone, twelve columns on a computer.

Breakpoints

The widths from which the layout adds. A rule without a condition is the phone's, and no rule holds only up to a width.

sm · from 640 px: A wider phone.
md · from 768 px: A tablet: the column's margins 48 px.
lg · from 1024 px: A computer: the two-row header, twelve columns and no bottom bar.
xl · from 1280 px: A large computer.
xxl · from 1536 px: A wide screen.

The grid

On a computer 12 columns 24 px apart, in a column of 1200 px at most. On a phone one column.

The menu: 3 columns for the categories and the weekly offer, 9 for the dishes in two columns of cards.
Feedback: 5 columns for the opening and the contact, 7 for the form.
The gallery: four columns of photographs 12 px apart.

Header and bottom bar

A phone's header: one row of 60 px that stays at the top
A computer's header: a 36 px bar with the day's state and the contacts over a 76 px row with the logo and the pages
A phone's bottom bar: 64 px, three actions, 390 px wide at most

The page reaches under the iPhone's notch, and the text keeps to the safe area.

Shapes and shadows

Soft as round logs and river stones, never bubbly. Depth comes from the tones of the surfaces; the shadows are gentle.

Radii

--radius-none 0 px

A photograph across a phone's whole width.

--radius-sm 6 px

Form fields and small tags.

--radius-md 10 px

Buttons.

--radius-lg 16 px

Cards, photographs and sheets.

--radius-xl 24 px

The top corners of the sheet that overlaps a photograph on a phone.

--radius-full 9999 px

Chips and status pills.

Shadows

The shadows the screens draw, from the gentlest.

--shadow-header

A computer's header.

--shadow-bar

The sticky band of categories.

--shadow-sm

Cards, chips and buttons.

--shadow-soft

The form's card on a phone.

--shadow-base

The duck feast's and the directions' cards.

--shadow-md

The form's card on a computer and raised cards.

--shadow-lg

The drawn map, the directions and the main button in a phone's menu.

--shadow-xl

Large opening photographs.

--shadow-popover

A dish's detail on a computer.

--shadow-2xl

Windows over the page and the bottom bar.

--shadow-inner

The legend's pressed disc.

--shadow-header: 0 1px 8px rgb(0 0 0 / 4%)
--shadow-bar: 0 2px 8px 0 rgb(0 0 0 / 3%)
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%)
--shadow-soft: 0 4px 20px rgb(26 28 25 / 5%)
--shadow-base: 0 1px 3px 0 rgb(0 0 0 / 10%) 0 1px 2px -1px rgb(0 0 0 / 10%)
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%) 0 2px 4px -2px rgb(0 0 0 / 10%)
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%) 0 4px 6px -4px rgb(0 0 0 / 10%)
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%) 0 8px 10px -6px rgb(0 0 0 / 10%)
--shadow-popover: 0 20px 40px -15px rgb(0 0 0 / 22%)
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%)
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%)

Components and rules

The manual's second part: buttons, cards, chips, forms, icons, photographs, pattern, motion, accessibility and copy.

Design manual: components The manual's second part: buttons, cards, chips, forms, icons and photographs, and the rules of motion, accessibility and copy. The foundations are in the first part.