Brand Guidelines

v1.0 · April 2026

Scroll
01

Logo-System

Wordmark in Venera 900. Das X trägt die grüne Raute am Kreuzungspunkt und liest sich als Person: Esteban, der Faktor X.

Wordmark

SIGNEX auf Dunkel Dark Mode (Primär) signex-logo-light-color.svg
SIGNEX auf Hell Light Mode signex-logo-dark-color.svg

X-Mark + Favicon

X-Mark Dark Mark Dark
X-Mark Light Mark Light
X-Mark Special Mark Special
Favicon Favicon

Regeln

Richtig

  • Grüne Raute in allen Varianten
  • Freiraum: Höhe des I auf allen Seiten
  • Dark Mode = Light-Color Variante
  • Light Mode = Dark-Color Variante
  • X-Mark für Favicon, Avatar, App-Icon
  • Nach Figma-Export viewBox prüfen

Verboten

  • Raute-Farbe ändern (ausser B&W)
  • Logo strecken oder verzerren
  • Einzelne Buchstaben umfärben
  • Effekte (Schatten, Glow, Gradient)
  • X-Mark ohne die Raute
  • Unruhige Hintergründe ohne Kontrast
viewBox-Hinweis

X-Mark SVGs aus Wordmark-Export extrahiert. viewBox muss auf viewBox="573 -2 126 128" zugeschnitten sein. Die äussere Raute reicht bis y=0, daher y=-2 als Start. Nach jedem Figma-Export prüfen.

02

Farbsystem

Anthrazit als Basis, #009933 als einzige Akzentfarbe. Grün = Aktion. Nie dekorativ.

Dark Mode (Default)

Background
#1E1E20
Nie reines Schwarz
Surface
#272729
Karten, erhöhte Flächen
Surface 2
#313133
Sekundäre Flächen
Accent
Accent
#009933
CTAs, Links, aktive Zustände
Hover
Accent Dark
#007A28
Hover, gedrückte Buttons
Text
Text
#F0F0F0
Primärtext
Muted
Text Muted
#888888
Sekundärtext, Labels
Border
#3A3A3C
Trennlinien

Light Mode

Background
#FAFAFA
Surface
#FFFFFF
Accent
Accent (Light)
#15803D
Dunkler für Kontrast
Text
Text (Light)
#18181B

Functional Mapping

Action
CTAs, Buttons, Links. "Das Signal."
Anchor
Hintergrund, Stabilität.
Neutral
Atemraum, Lesbarkeit.
Support
Hover, Sektions-Trennung. Grün 20-40%.
03

Typografie

Headline- und Body-Font stehen noch aus. Inter ist aktueller Platzhalter.

Logo: Venera 900 (Lost Type Co-op)
SIGNEX in Venera 900 SIGNEX in Venera 900
All Caps · Nur Wordmark · Nicht für Body oder Headlines
Headline: Exo 2 (600-700)
Von Google gefunden. Von KI zitiert.
Gesucht. Gefunden. Gebucht.
Geometrisch-futuristisch · Echoed Venera 900 · H1, H2, H3, Pricing
Body: Inter (400-500)
3.5rem / 56px
H1 Hero Von Google gefunden.
2.5rem / 40px
H2 Seiten Gesucht. Gefunden. Gebucht.
1.75rem / 28px
H3 Section SEO-Sichtbarkeit für lokale KMU
1rem / 16px
Body Ihr Signal im Vergleich zur Konkurrenz.
0.875rem / 14px
Small Lighthouse: 96 / 100 / 100 / 100

Gewichte

Regular 400Fliesstext
Medium 500Navigation, Buttons
Semibold 600Section-Titel
Bold 700Hero-Headline
04

Komponenten

Wiederkehrende UI-Patterns. Buttons, Karten, Sections. Alles folgt den Farb- und Spacing-Regeln.

Buttons
.btn--primary · Accent-bg, weiss, Shadow
.btn--outline · Accent-Border, transparent
.btn--secondary · Text-Link mit Pfeil
Section Pattern
.section padding: var(--space-xl)
.section__label Uppercase, Accent
.section__title clamp(), responsive
.section__sub max-width: 60ch
.container 1200px + 2rem pad
Card Patterns
.service-card Icon + Titel + Link
.pricing-tier Preis + Features + CTA
.blog-card Datum + Titel + Teaser
.diff-item Nummer + Titel + Text
.testimonial Zitat + Avatar + Name

Diese Seite zeigt die visuellen Assets. Brand Story, Stimme, Schmerzsprache, Copy-Regeln und Kern-Learnings liegen im Vault:

  • Brand-Seele: Admin - Wer ist SIGNEX.md
  • Stimme & NAP: Admin - Wer ist Esteban.md
  • Brand-Regeln: Admin - SIGNEX Brand Guidelines.md
  • Schmerzsprache: Sales - Schmerzsprache-Bibliothek.md
  • Kern-Learnings: Main - Learnings.md (11 Prinzipien)
  • CSS-Variablen: sgrid-website/styles.css