KOE-55 · Foundation

Planeco HTML-Landingpages

Engineering-Layer für AI-First-Marketing. Astro 5 + Tailwind v4, getrieben von Brand-Tokens, abgesichert durch CI-Gates.

Lighthouse Mobile ≥95 Visual-Regression Active Brand-Lint (Skeleton, KOE-56)

Color-Tokens

Werte sind Platzhalter — KOE-56 ersetzt sie mit den finalen Planeco-Tokens via Style-Dictionary-Build.

--color-brand-coral
brand.coral

#E0805F
--color-brand-forest
brand.forest

#22403B
--color-brand-cream
brand.cream

#F5EFE6
--color-brand-ink
brand.ink

#1A1A1A

Typography-Scale

Engineering-Layer für AI-First-Marketing text-xs · 12px
Engineering-Layer für AI-First-Marketing text-sm · 14px
Engineering-Layer für AI-First-Marketing text-base · 16px
Engineering-Layer für AI-First-Marketing text-lg · 18px
Engineering-Layer für AI-First-Marketing text-xl · 20px
Engineering-Layer für AI-First-Marketing text-2xl · 24px
Engineering-Layer für AI-First-Marketing text-3xl · 30px
Engineering-Layer für AI-First-Marketing text-4xl · 36px
Engineering-Layer für AI-First-Marketing text-5xl · 48px

CI-Gates (PR-Pflicht)

lighthouse

Mobile Performance ≥95, A11y ≥95, Best-Practices ≥95, SEO ≥100
playwright-visual

Snapshot-Diff per Page (initial baseline OK)
brand-lint

Tokens-Compliance (Logik aus KOE-56)
html-validate

Strikte Validation gegen dist/**/*.html