Design Briefing v1.0 · April 2026

Tischlerei Albani — Branding & Design System

The binding visual system for gestaltung-in-holz.com. This page is linked only internally (floating button) and is not part of the main navigation.

1. Brand Colours

Two brand core colours (Albani Green & Red) plus a neutral system for text, backgrounds and accents. No brown, no amber, no gold.

#036038

Albani Green

Primary colour, CTAs, links, icons, accents

Brand core colour

#BB1821

Albani Red

Secondary accent, badges, warnings

Use sparingly

#024A2B

Dark Green (Hover)

Hover state for buttons and links

Derived from Green

#E8F5EE

Light Green (Background)

Highlight boxes, AEO answer box

10% opacity of Green

#1A1A1A

Text Black

Body copy, headings

Never pure black

#595959

Text Grey

Secondary text, meta info, captions

—

#F7F5F2

Background Warm

Section background, alternating

Warm tone, never cold grey

#FFFFFF

White

Default background, cards

—

2. Typography

Source Serif 4 (H1/H2 headings) for craftsmanship and authority. Source Sans 3 (body, H3–H6, UI) for clear legibility. Both from the Adobe Source super-family — GDPR-compliant when self-hosted.

H1Source Serif 4 · 600 Semibold · Desktop clamp(2rem, 1.5rem + 2.2vw, 3rem) · Mobile ≈ 32 px · Colour #1A1A1A

Craftsmanship in Wood — H1 Example

H2Source Serif 4 · 600 · Desktop clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem) · Mobile ≈ 24 px · Colour #1A1A1A

Trust is built in the details — H2

H3Source Sans 3 · 600 · Desktop clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem) · Mobile ≈ 20 px · Colour #1A1A1A

Workshop, Showroom & Service — H3

H4Source Sans 3 · 600 · Desktop clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem) · Mobile ≈ 18 px · Colour #1A1A1A

Example Heading H4

H5Source Sans 3 · 600 · Desktop clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem) · Mobile ≈ 17 px · Colour #1A1A1A

Example Heading H5

H6Source Sans 3 · 600 · UPPERCASE · Desktop clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem) · Mobile ≈ 15 px · Colour #1A1A1A

Example Label H6

BodySource Sans 3 · 400 Regular · Desktop clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem) · Mobile ≈ 17 px · Colour #1A1A1A

Tischlerei Albani builds custom furniture in the Rhein-Kreis Neuss region. We craft fitted wardrobes, living-room walls and bedroom furniture made to measure — from on-site survey to installation, all from one source.

Body BoldSource Sans 3 · 600 · Desktop Body size · Mobile Body size · Colour #1A1A1A

Fixed price after on-site survey. Personal consultation with Daniel Albani and the team.

Body Small / MetaSource Sans 3 · 400 · Desktop clamp(0.9375rem, 0.9rem + 0.15vw, 1rem) · Mobile ≈ 15 px · Colour #595959

Meta information · 4 min read · Updated April 2026

ButtonSource Sans 3 · 600 · Desktop 16–17 px · Mobile 15 px · Colour #FFFFFF

NavigationSource Sans 3 · 500 Medium · Desktop 16–17 px · Mobile 15 px · Colour #1A1A1A

Custom Furniture

3. Components

The reusable building blocks used on every service and city page.

3.1 AEO Answer Box

Sits directly below H1. Background #E8F5EE, left border 4px #036038, padding 24px.

3.2 Trust Block

Background #F7F5F2 · padding 32px · checkmarks in Albani Green.

Why Tischlerei Albani?

Master craftsman workshop since 1999
Fixed price after on-site survey — no hidden costs
Own workshop in Grevenbroich, showroom in Korschenbroich
Personal consultation with the owner

3.3 Buttons

Border-radius 4px · padding 14px 28px · hover #024A2B

4. Page Templates

Service Page (Money)

H1 → AEO Box → Intro → Audience → Service detail → Inline CTA → Cost factors → Process → Trust → Projects → FAQ → Related → Closing CTA

City Page (Regional)

H1 city+service → Local intro → Service overview → Local projects → Directions to showroom → CTA → Related cities

Project Page (Detail)

H1 project name+city → Hero image → Brief & solution → Materials & partners → Gallery → Related service → CTA

5. Technical Specs

Fonts

Self-hosted as WOFF2. No Google Fonts CDN.

Images

WebP with JPG fallback · width/height set · lazy loading from the 3rd image

Alt text

Descriptive + keyword + location where meaningful

Core Web Vitals

LCP < 2.5 s · CLS < 0.1 · INP < 200 ms

Only essential cookies without consent · GA/GTM after opt-in

Schema

RankMath: FAQ, Breadcrumb, LocalBusiness automatically

6. Image Style

Real work, real materials, real rooms. Workshop, detail shots, showroom, portraits. Warm, natural, never over-saturated. No stock photos, no AI imagery, no lifestyle staging. No kitchen photography.

7. Container & Radius

Container

max-width: 1400px · padding: 1rem (md: 2rem)

Border Radius

--radius: 0.5rem (buttons 4px per briefing)