Logo
Wortmarke und Bildmarke je in einer hellen und einer dunklen Variante. Der Punkt im Logo trägt den Signature-Gradient — er ist das identitätsstiftende Element.
Wortmarke
Bildmarke — Kurzform — für Favicons, App-Icons, kompakte Platzierungen
Bildmarke — Wortform — wenn der Markenname mit muss (Slide-Decks, Briefkopf, Social-Profiles)
Mono-Varianten — für Print, Stempel, einfarbige Anwendungen
Farbpalette
Primärpalette mit sechs Markenfarben, von warmem Pink zu kühlem Sky-Blau. Die Farben sind als Gradient gedacht — einzelne Töne können aber auch solo eingesetzt werden.
Neutrals
Abgestimmt auf die Markenfarben — leicht kühler Unterton, damit Pink und Azure auf weißem Grund sauber wirken.
Gradienten
Der Signature-Gradient (Pink → Lilac → Azure, 135°) ist das wichtigste visuelle Element der Marke. Einsatz: Hero-Flächen, CTA-Buttons, Akzent-Elemente.
Typografie
Space Grotesk für Display und Headlines (charakterstark, leicht technisch). Inter für Body (neutral, hervorragend lesbar). JetBrains Mono für Code und Token.
Komponenten
Einsatzbeispiele — Buttons, Cards, Badges. Der Primary-Button trägt den Signature-Gradient mit weichem Pink-Glow.
Buttons
Badges
Gradient-Card
Für Hero-Sektionen, Testimonials und Marketing-Highlights.
Tokens verwenden
Alle Token sind in tokens/ abgelegt. Wähle das Format, das zu deinem Stack passt.
@import "./tokens/colors.css";
.hero {
background: var(--yet-gradient);
color: white;
}
// tailwind.config.js
presets: [require("./tailwind.preset.js")]
// Klassen verwenden:
<button class="bg-yet-gradient text-white">
@use "tokens/colors" as *;
.cta {
background: $yet-gradient;
color: $yet-white;
}