Coffee Elements
Design-Referenz und Brand Kit
Extrahiert von coffee-elements.de · März 2026
Tooling
Foundations
Design Rules
Übergreifende Regeln für alle Komponenten
Typografie
Pressura, Pressura Mono, Inter – 13 Zeichenformate
Farben
9 Neutral-Abstufungen, Accent Red, Tabellen-Farben
Logo
Wortmarke, SVG, Varianten
Icons & SVGs
Marken-Logos, Kategorie-Icons, UI-Icons
Bilder
Alle Fotos mit Einordnung und Aspect Ratios
Grid-System
Responsive Grid, Container Queries, Breakpoints
Komponenten
Brand Logos
Partner- und Marken-Logos mit Filter
Buttons
Primary, Outline, Icon – alle States
Cards
7 Card-Typen: Kategorie, Produkt, Team, Service, Menu, Kontakt, Kurs
Category Filter
Horizontaler Kategorie-Filter mit Scroll
Formulare
Inputs, Selects, Radio, Checkbox – alle States
Image
Bild-Komponente, Caption-Variante, Bild mit Banner
Interaktiv
Accordion, Tabs, Modal
Markenfilter
Marken-Dropdown und Filter-Logik
Navigation
Breadcrumb, Pagination, Anchor-Links
Slider
Hero Slider, Produkt-Karussell
Tabellen
Specs-Tabelle, Speisekarte
Tags & Badges
Brand Tags, Kategorie-Count, Sale/Neu
USP Bar
Horizontale USP-Leiste mit Icons
Sections
Seiten
Home
Startseite mit Hero, Kategorien, Produkten
Köln
Standortseite Köln
Münster
Standortseite Münster
Café
Café-Bereich mit Speisekarte
Service
Service-Angebote und Wartung
Kurse
Barista-Kurse und Workshops
Shop Layout 1
Shop-Übersicht Variante 1
Shop Layout 2
Shop-Übersicht Variante 2
Produktseite
Einzelne Produktseite (PDP)