Seasonal offer
Traditional autumn specialities
Duck feast
Roast duck leg with lokše (potato flatbread) and braised red cabbage, duck broth with liver dumplings. Every day from 21 September.
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.
Buttons
A button is a link or a form's button in one of seven colourings. Its corners are 10 px and its words always stay on one line. The place it stands in gives it its size.
The design's main button
- Height
- 52 px
- Either side
- 20 px
- Type
- label-lg, 16 px bold
- Corners
- 10 px
- Icon
- 20 px, 8 px from the words
Colourings
The tokens of the ground and the words
- Primary
--color-primary-button--color-on-primary- Outlined
--color-surface-container-lowest--color-on-surface- Tonal
--color-surface-container-high--color-on-surface- Soft
--color-surface-container--color-on-surface- Honey
--color-tertiary--color-on-tertiary- Primary on dark
--color-primary-button--color-inverse-on-surface- On dark
--color-dark-surface-container-high--color-inverse-on-surface
Rules
- On a phone every button reaches at least 44 px, even where it is drawn smaller.
- Keyboard focus: a 2 px ring in the text's colour, 3 px off the button.
- A button is never greyed out. A form says what is wrong in words.
- A link to another page is always an <a href>, which opens in a new tab too.
Cards
Cards are white sheets on the lichen with 16 px corners. The menu reads like a well-set printed menu; its dishes are not one to a card.
The form's card
White; on a phone 20 px in with a soft shadow, on a computer 40 px in and 640 px wide at most.
Thank you, we have your message.
We value every piece of feedback: it helps us do better under the Devil's Rock.
A menu card
On a computer white, 24 px in, with the sm shadow. On a phone no card: the heading, the note and the dishes' rows divided by a hairline.
The event card
Pale honey, the photograph on top, the heading, the dates and the honey button. In season only.
Chips and badges
Short states and choices, always on one line and fully rounded.
The day's state
A dot and words: green open, honey closing or shorter hours, red closed. The kitchen joins when it closes before the koliba.
Open today until 22:00 Kitchen until 21:00
Closing at 22:00
Closed today – deep cleaning
Category chips
On a phone a row of chips under the header that scrolls sideways and stays at the top: a fully rounded pill of the container, drawn 28.8 px tall, reaching 44.8 px for a thumb, 14 px either side. The chip of the category being read is slate.
Badges
The speciality badge on a menu card and the duck feast's "On now" badge: small, rounded 6 px or fully.
Forms
The label above the field, a 52 px field, a required field marked in words and an error in words under the field.
Leave us your e-mail if you would like an answer.
Field
- Label
- label-md 14 px, a required field "(required)"
- Field
- 52 px, 6 px corners, the lower container, a hairline on a phone
- Text in the field
- 16 px, so an iPhone does not zoom in while typing
- Hint
- 16 px on a phone, 13 px on a computer
- Error
- 16 px in the error's red, the field marked for a screen reader
An error, a message sent and the windows over the page are shown on the page Alerts and windows.
Icons
The icons are glyphs of Material Symbols Outlined, cut to the icons the site uses. An icon says nothing on its own: text or a control's label carries its meaning.
- Instance
- fill 0, weight 400, grade 0, optical size 24
- Icons
- 64
- Sizes
- 12, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30 px
- A new icon arrives with its name in a view, <x-icon name="…" />, and a new cut of the font, which icon-font.mjs proves against Google's whole font.
Photographs
Real photographs of the koliba carry the atmosphere, large and unframed. The dishes are illustrative, all in one style.
- The building, the terrace, the interior, the surroundings and the Devil's Rock are real photographs of the koliba only, never generated or stock.
- A dish from 45°, on glazed brown stoneware on a honey wooden table, in soft daylight from the left, sharp before a blurred wall of logs. No text, no hands, no people.
- By the dishes stands the line "The food photographs are illustrative."
- 16 px corners. A photograph across a phone's whole width has none.
- WebP, 2400 px at most, with variants of 480, 900 and 1500 px. Every photograph has its words in both languages and keeps its place while it loads.
Pattern and ridge
The only ornaments besides the red háček.
The pattern
A folk rosette after the carvings of Čičmany and Podpoľana, in honey. It lies behind every page's content, and cards, sheets, bars and the footer cover it. It stands still in the window while the page scrolls, and where motion is welcome it rises at a fifth of the speed.
- Tile
- 320 px
- Strength
- 7 % of honey, in the dark of the light honey
The ridge
The top edge of the slate bands, the footer and a phone's bottom bar, cut into peaks at 45°.
- A peak on a computer
- 24 × 12 px
- A peak on a phone
- 19.2 × 9.6 px
Motion
Motion is quiet and never a condition: the page is fully drawn without it.
- Speed
- 200 ms
- Curve
cubic-bezier(0.2, 0.7, 0.3, 1)
- Switching the mode changes the colours only, over 200 ms.
- A link to a place on the page glides there, by CSS alone, and lands under the header.
- On a computer Lenis eases the mouse wheel. A phone never downloads it, and touch stays its own.
- A visitor who turns motion off in the system sees none.
- No animation library.
Accessibility
The site meets WCAG 2.2 AA. Tests check it on seven devices in Chromium and in WebKit, in the light and in the dark mode.
- Text contrast at least 4.5 : 1; large text, icons, edges and the focus ring at least 3 : 1.
- Keyboard focus is always visible, a 2 px ring in the text's colour, and a sticky bar never covers it.
- A control for a thumb reaches at least 44 × 44 px.
- A page's first link skips to its content. A page has a header, navigation, content and a footer, and exactly one h1 heading.
- Every photograph has its words in both languages; an ornament has empty ones.
- A form's error is in words by its field. Colour is never the only carrier of a state.
- A window keeps the keyboard inside it and, closed, hands it back to where it was opened.
- At 320 px wide nothing scrolls sideways.
Copy
Plain Slovak with a polite Vy. The English pages say the same in natural English.
In Slovak
- Quotation marks „…“.
- A decimal comma: 0,33 l, 7,50 €.
- A range with a spaced en dash: 8:00 – 22:00.
- A space before a unit: 150 g, 10 km.
- A 24-hour clock, dates as 21. 9.
- Vás and Vaše with a capital V.
In English
- Quotation marks “…”.
- A decimal point, and the currency before the amount: €7.50.
- A 24-hour clock too, dates as 21 September.
In both
- A capital only at the start of a sentence.
- A link names where it leads, never "more" or "click here" alone.
- No emoji, and no arrows added to links.
Notices, alerts and windows
The states the site shows, on pages of their own at their real size.