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;
  --color-light-gray: #F8F8F8;
}

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 and carry no margins except h1 (mb-4). Headings switch at the built-in lg: breakpoint, and the rebuild renders desktop headings one Tailwind step smaller than the live site — a deliberate choice from the visual-parity work, not an approximation error. Samples render at the desktop values.

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.

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.

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.

10 · Components (src/components/ui)

Shared UI primitives composed by the Storyblok blocks and page templates instead of being re-hand-rolled per page. Each entry is one component in src/components/ui/; the running list is in the repo's styleguide CHANGELOG.md.

Container

The page/section width wrapper. Centralizes the shell that was hand-rolled ~30× across templates, blocks, and chrome.

Canonical page width is max-w-6xl (1152px). A few templates still carry md:px-7 / md:px-[28px] (28px) vs the canonical md:px-6 (24px) — candidates to converge.

TabLink

Uppercase navigation tab with an underline on the active item (blog category tab bar).

SectionHeading

A heading at a named, deliberate type scale. Emits the data-heading-variant marker that sanctions non-base heading sizes. Per-use margins stay on the caller via class.

as sets the level (h1–h4) for the document outline, independent of the visual scale. One-off heading scales used on a single page are not modeled here; the compact marker is also applied inconsistently to two text-xl md:text-2xl headings that were left as-is.

Breadcrumb

The desktop-only breadcrumb trail (hidden below md). Crumbs are data; a crumb without href renders as the current page. Hover a link: the gray-blue underline turns yellow.

Singular-case variants to confirm with design: plain (FAQ breadcrumb is not bold) and semibold-sm (category-detail breadcrumb is text-sm) each occur on one page only. The author breadcrumb's one-off focus-visible:underline link style was normalized away (the global focus outline already covers it).

Carousel

A horizontally-scrolling card rail with a heading and prev/next controls; slides are passed in. One shared enhancement script drives every instance. The track below scrolls (drag or swipe); controls are static in this demo.

The full-bleed review image gallery (ReviewGallery) is a distinct component and is not built on this primitive.

card-cta (utility)

The elevated "get offers" CTA card surface, shared by the hero, task-create, and craftsmen CTA boxes. A component-layer class (like .button); per-use border, padding, and width stay inline.

StickyCtaBar

A fixed top bar that reveals once its trigger scrolls out of view (the "Jetzt Offerten einholen" bar). One shared script; the caller supplies the inner layout and bar height.

The trust checklist inside these CTA boxes was left un-merged: the task-create list (far fa-check, yellow, top-aligned) and the checklist banner (far fa-check-circle, bold, centered) are deliberately different treatments.