Design system

Typography, hero sections, colours, shadows and icon partials for the Hönig theme.

Typography

Headings (mobile → xl)

H1 — 4xl/10 → xl: 7xl/none · Zalando Sans Expanded Bold

The wizard quickly jinxed the gnomes before they vaporized.

H2 — 3xl/9 → xl: 4xl/10

The wizard quickly jinxed the gnomes before they vaporized.

H3 — 2xl/8 → xl: 3xl/9

The wizard quickly jinxed the gnomes before they vaporized.

H4 — xl/6 → xl: 2xl/8 · Inter Bold

The wizard quickly jinxed the gnomes before they vaporized.

H5 — lg/7 → xl: xl/6 · Inter Extra Bold

The wizard quickly jinxed the gnomes before they vaporized.

H6 — base/6 (tight) → xl: lg/7 · Zalando Sans Expanded Bold

The wizard quickly jinxed the gnomes before they vaporized.

Body & inline styles

Lorem ipsum dolor sit amet consectetur. Tempus elementum sit ultricies suspendisse sed consectetur.

Lorem ipsum dolor sit amet consectetur. Tempus elementum sit ultricies suspendisse sed consectetur.

Lorem ipsum dolor sit amet consectetur. Tempus elementum sit ultricies suspendisse sed consectetur.

Lorem ipsum dolor sit amet consectetur. Tempus elementum sit ultricies suspendisse sed consectetur.

Lorem ipsum dolor sit amet consectetur. Tempus elementum sit ultricies suspendisse sed consectetur.

Highlighted: Lorem ipsum dolor sit amet consectetur. Tempus elementum sit ultricies suspendisse sed consectetur.

Example link

Quote / blockquote

The wizard quickly jinxed the gnomes before they vaporized.

Buttons

Atom: template-parts/01_atoms/a-button.php — pass variant classes (btn--primary, btn--secondary, btn--tertiary, btn--link) and optional btn--md / btn--sm.

Large (48px) — default

Link

Medium (40px)

Link

Small (32px)

Link

Disabled

Link

Hero

Organism: template-parts/03_organisms/o-hero.php — variants: simple, image, video (YouTube or MP4). On pages and posts, configured via the ACF Hero Section field group.

Simple Hero

Bérelhető területek

Image Hero

Sample hero image

Rólunk

A Hönig ház története

Video Hero (YouTube)

Sample hero image

Colours

Brand

brand-primary-green #315442
brand-primary-dark-green #1a3728
brand-primary-fondant #f3e5cf
brand-primary-tostada #ddc49a
brand-primary-silver #b5b0a1
tostada-50 #fcf9f5
brand-primary-black #181818
brand-primary-white #ffffff

Green

green-950 #13261c
green-900 #13261c
green-800 #1a3125
green-700 #223c2f
green-600 #294838
green-500 #315442
green-400 #577464
green-300 #7f9588
green-200 #a8b7ae
green-100 #d3dad6
green-50 #e9edea

Grey

grey-1000 #181818
grey-900 #333333
grey-800 #4d4d4d
grey-700 #808080
grey-600 #999999
grey-500 #b2b2b2
grey-300 #e5e5e5
grey-200 #f2f2f2
grey-100 #ffffff

State

success #2ca74f
warning #ffb800
error #ff003d

Alpha

transparency-black-25 rgb(0 0 0 / 25%)
transparency-black-15 rgb(0 0 0 / 15%)
transparency-white-25 rgb(255 255 255 / 25%)

Shadows

shadow-main-dark

Main dark elevation

shadow-green-l

Green accent elevation

Icons

Partial: template-parts/icons/{slug}.php — args: size (px), color (#hex or currentColor).

  • menu
  • close
  • area
  • rooms
  • floor
  • cost
  • deposit