forestGreen Solutions
AdminAnmelden
menuMenü
AdminAnmelden

Designsystem

Green Solutions Komponenten

Die wiederkehrenden Bausteine aus den Mockups sind hier gebündelt: Farben, Buttons, Inputs, Dropdowns, Zustände und Layout-Muster. Das ist die visuelle Basis für die weiteren Seiten.

Jetzt testenarrow_forwardRegistrierungPlaceholder-Link
palette

Tonal statt laut

Off-White, Forest Green, Earth Brown und wenige präzise Akzente. Keine Neonflächen, keine spielerischen Formen.

BausteineFarben · Typo · Controls
ZuständeDefault · Focus · Error
PrimarySecondarySuccessWarning

Farben

Farbpalette aus den Mockups

Die Palette ist bewusst ruhig gehalten: niedrige Sättigung, klare Kontraste, warme Neutraltöne.

Surface

#faf9f7

Surface Card

#ffffff

Primary

#173124

Secondary

#6c5b4e

Outline

#c2c8c2

Error

#ba1a1a

Typografie

Skalierung ohne harte Farbwechsel

Hanken Grotesk liefert die Headlines, Inter die Nutzbarkeit im UI. Die Hierarchie entsteht über Größe, Gewicht und Abstände.

Display

Entdecke deine Weiterbildung im Grünen

Kursübersicht, Formulare und Profile in einer Linie

Die Interfaces bleiben ruhig, klar und fachlich. Viel Weißraum, wenig visuelle Lautstärke und eine markante, aber nicht aggressive Primärfarbe.

Label und Microcopy

Textstufen im Alltag

Kleine Texte tragen Orientierung, nicht Dekoration. Der Unterschied liegt in Größe, Gewicht und Abstand.

Overline

12px / uppercase / Inter

Navigation, Sektionen und Status

Label

E-Mail Adresse

Formfelder und Auswahlsteuerung

Body

Hilfetexte, Status und Begleitinfos bleiben klein und präzise.

Erklärungstexte im laufenden UI

Meta

2 Tage · € 249,-

Preise, Dauer und kurze Zusatzinfos

Controls

Buttons, Felder und Dropdowns

Hier sind die wiederkehrenden Interaktionsmuster gesammelt. Links die kuratierten Grundzustände, rechts die echten Vuetify-Controls im neuen Grünton.

Buttons

Geführte Aktionen

Login RouteRegister RoutePlaceholder Route

Vuetify

Live-Komponenten

StatusKategorieBestätigt

Felder

Zustand als Matrix

mail

Standardzustand ohne Fehler.

mail

Sichtbarer Fokusring für aktive Eingaben.

lock

Bitte eine gültige Kombination eingeben.

Deaktivierte Felder bleiben grau und ruhig.

Dropdowns

Offen und geschlossen

  • Grundlagencheck
  • Fortgeschrittenearrow_outward
  • Ausgebuchtlock

Feedback

info

Information

Formulare bleiben lesbar und gelöst von reinem Dekor.

check_circle

Erfolg

Bestätigungen sollen unaufgeregt und klar wirken.

Patterns

Kurskarten und Profil-Layout

Die Karten und Strukturbausteine orientieren sich direkt an den Mockups: ruhige Flächen, klare Titel und ein enger Bezug zur Natur.

Fortgeschrittene
Wildzerlegeseminar

Wildzerlegeseminar für Fortgeschrittene

Präzise Techniken zur professionellen Wildbretverwertung unter Berücksichtigung hoher Hygienestandards.

scheduleDauer: 2 Tage
event_available2/8 Plätze belegt
personEinzelbuchung
€ 249,-
Details ansehen
personPersönliche Daten

Profil & Sicherheit

2 Aktiv
schedule

Wartungshinweis

Schaltflächen und Formfelder behalten eine niedrige visuelle Lautstärke.