renovero.ch styleguide

1 · Foundations

Everything not listed here is stock Tailwind. The full delta from a default install: one font, eight brand colors, navy as the text color, and a 2px button radius.

2 · Colors

Measured usage: navy is the text color for ~85% of elements; white and light gray-blue carry the surfaces; yellow is reserved for CTAs and social icons. None of these map to Tailwind default colors — define them as theme tokens.

Tailwind v4 theme block — together with text-navy as the base text color, this is the entire configuration delta from a stock install:

@theme {
  --font-sans: "Encode Sans", sans-serif;

  --color-navy: #203768;
  --color-navy-hover: #162850;
  --color-yellow: #F9B415;
  --color-yellow-hover: #FFC84A;
  --color-gray-blue: #DBDFE7;   /* 50% via bg-gray-blue/50 */
  --color-slate: #637395;
  --color-muted: #818BA1;
  --color-dark-slate: #27455C;
}

3 · Type scale (Tailwind)

The live site's two overlapping typography generations (text-1…5/h1…h5 and text-base…/v2-heading-*) collapse onto nine Tailwind steps. All type is navy with no letter-spacing except the uppercase labels; headings are font-semibold. Heading specs include their mobile step (measured at 390px, using Tailwind's built-in md: breakpoint); body text needs no responsive variants. Samples render at the desktop Tailwind values.

text-4xl md:text-6xl font-semibold → 36/40 · 60px/leading-none (measured 36/42 mobile, 64/68 desktop)

text-3xl md:text-5xl font-semibold → 30/36 · 48px/leading-none (measured 28/36 mobile, 48/56 desktop)

text-2xl md:text-3xl font-semibold → 24/32 · 30/36 (mobile 24/32 exact) · desktop measured 32/40 · exact for heading-big (30/36)

text-xl md:text-2xl font-semibold → 20/28 · 24/32 (desktop exact) · mobile measured 22/28 · also the FAQ question size

text-xl font-semibold → 20px / 28px (exact for h5) · absorbs heading-emphasis (21/28)

text-lg leading-6 font-semibold → 18px / 24px (exact)

Text large (text-lg) — Erhalten Sie kostenlos mehrere Offerten von Handwerkern aus Ihrer Region und wählen Sie das beste Angebot.

text-lg → 18px / 28px (measured 18/30)

Text base (text-base) — Erhalten Sie kostenlos mehrere Offerten von Handwerkern aus Ihrer Region und wählen Sie das beste Angebot. Main article copy.

text-base → 16px / 24px (exact for text-base 16/24) · absorbs text-1 (16/26 — use leading-relaxed for exact 26px) and text-2 (15px — retired)

Text small (text-sm) — Erhalten Sie kostenlos mehrere Offerten von Handwerkern aus Ihrer Region. Button labels, nav and footer links.

text-sm → 14px / 20px (measured 14/21–22 across text-3, text-5, text-small)

Text tiny (text-xs) — Erhalten Sie kostenlos mehrere Offerten von Handwerkern. Captions and meta text.

text-xs → 12px / 16px (exact for text-4) · absorbs text-tiny (12/18)

Uppercase label small — zwölf pixel

text-xs leading-5 font-semibold uppercase tracking-wider → 12px / 20px / .05em (measured 12/20/600/+0.5px — tracking .042em ≈ wider)

Uppercase label base — fünfzehn pixel

text-base font-bold uppercase tracking-wide → 16px / 24px / .025em (measured 15/24/700/+0.5px)

4 · Mapping: renovero classes → Tailwind

Full translation table for the live site's typography-* utilities. Heading rows show mobile → desktop (measured at 390px and 1440px); "exact" means Tailwind's pair equals the measured pair.

5 · Links

Links in content are underlined — the underline is the affordance. Chrome links (header, footer) are plain navy/white but always underline on hover. Yellow is used for links on dark surfaces.

6 · Buttons

One button component with color variants. Label is always text-sm font-semibold; flat, 2px radius, color-only hover. Hover any button below to see the hover colors.

default: bg-navy text-white hover:bg-navy-hover · .yellow: bg-yellow text-navy hover:bg-yellow-hover · .gray: bg-gray-blue/50 text-navy

search: py-4 px-10 (home hero) or py-4 px-6 (directory) · compact: py-1 px-2.5 min-h-9

7 · Forms

The signature pattern is a borderless, square input inside a translucent gray holder, usually paired with a yellow search button. No visible borders or radii on text inputs. The key dimensions land exactly on the Tailwind spacing scale.

holder: flex items-center h-14 bg-gray-blue/50 rounded-none — input: h-12 px-5 text-sm font-medium text-navy bg-transparent border-none (56px, 48px, 20px all exact on the spacing scale)

8 · Surfaces & sections

Pages alternate white with light gray-blue bands; navy and dark slate are used for high-contrast promo sections. Content sits flat on these bands — no borders or shadows on standard sections.

9 · Header, breadcrumbs & footer

The header is transparent/white with text-sm navy links and no border or shadow: 104px tall on desktop (h-26), 48px on mobile (h-12), where the nav collapses to "Anmelden" + a burger menu. The footer is two-tone (navy top block, gray-blue legal bar) and structurally identical at both viewports. Measured at 390px and 1440px.

breadcrumbs: text-base text-navy · separators text-muted · desktop-only (hidden md:flex — the live site hides them on mobile)

FAQ question: text-2xl font-semibold (exact) · group titles: text-3xl font-semibold

footer top: bg-navy · text-sm text-white hover:underline links · yellow circular social buttons (size-10 rounded-full bg-yellow text-navy) — footer bottom: bg-gray-blue text-navy text-sm, links hover:underline

10 · Notes for anyone building against this