Regios Design System
Offizielle Markenfarben und Designrichtlinien für die Regios Energiegenossenschaft.
Markenfarben
Weiß
rgb(254, 249, 235)
#FEF9EB
Grün
rgb(112, 255, 77)
#70FF4D
Gelb
rgb(248, 194, 58)
#F8C23A
Lila
rgb(156, 105, 255)
#9C69FF
Schwarz
hsl(0, 0%, 38.43%)
#626262
/* CSS Variablen */
--white: rgb(254, 249, 235);
--green: rgb(112, 255, 77);
--yellow: rgb(248, 194, 58);
--purple: rgb(156, 105, 255);
--black: hsl(0, 0%, 38.43%);
Typografie
/* Fluide Typografie - skaliert mit Viewport */
html { font-size: calc(13.25px + 0.375vw); }
/* 14px @ 320px → 20px @ 1920px */
/* Überschriften (h1, h2, h3, h4) */
font-family: "Gilroy";
font-weight: 900; /* black - am fettesten! */
text-transform: uppercase;
margin: 2rem 0;
/* Fließtext (p, etc.) */
font-family: "Raleway";
font-weight: 300; /* light */
line-height: 1.4;
H1 — Gilroy Black · 4.5rem (72px) · Großbuchstaben · line-height: 0.86
Der schnelle braune Fuchs
H2 — Gilroy Black · 3.5rem (56px) · Großbuchstaben · line-height: 0.9
Der schnelle braune Fuchs springt
H3 — Gilroy Black · 2.2rem (35px) · Großbuchstaben · line-height: 0.95
Der schnelle braune Fuchs springt über
H4 — Gilroy Black · 1.4rem (22px) · Großbuchstaben · line-height: 0.98
Der schnelle braune Fuchs springt über den faulen Hund
Fließtext (p) — Raleway Light · 1.25rem (20px) · line-height: 1.4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Großer Text (.text-large) — Raleway Light · 2.2rem (35px) · line-height: 1.4
Großer Text für Hervorhebungen und Callouts.
Kleiner Text (.text-small) — Raleway Light · 0.95rem (15px) · line-height: 1.4
Kleiner Text für Bildunterschriften und Meta-Informationen.
Text-Hervorhebungen
Lila Hervorhebung / Grüne Hervorhebung / Gelbe Hervorhebung
Icons
/* Icon Sprite einbinden (einmal im HTML) */
<div style="display:none">
/* Inhalt von sprite.svg hier einfügen */
</div>
/* Icon verwenden */
<svg class="icon"><use href="#icon-id"></use></svg>
/* CSS Klassen */
.icon { width: 4.9rem; height: 4.9rem; } /* Standard */
.icon-sm { width: 1.5rem; height: 1.5rem; }
.icon-md { width: 2.5rem; height: 2.5rem; }
.icon-lg { width: 4.9rem; height: 4.9rem; }
.icon-xl { width: 6rem; height: 6rem; }
/* Sprite URL */
https://regios-static-assets.fra1.cdn.digitaloceanspaces.com/icons/sprite.svg
Citizen
citizen-capable
citizen-fair
citizen-independent
Bank
bank-powerful
bank-profitable
bank-stable
Energy
energy-efficient-usage
energy-unique-process
energy-diverse-stakeholders
Community
community-integrating
community-people-centered
community-regional
Property
property-long-term
property-sustainable-investment
property-future-oriented
Development
development-multi-use
development-long-term
development-reliable-partner
Green Energy
green-energy-local-production
green-energy-low-risk
green-energy-secure-supply
Company
company-clear
company-action-oriented
company-reliable
Auf dunklem Hintergrund
citizen-independent
bank-profitable
community-regional
Brand Bubbles
Dekorative Blob-Formen für Hintergründe und Akzente. Verwende die CSS-Klassen, um die Farbe anzupassen.
/* Bubble verwenden */
<div class="bubble-1 bubble-purple"></div>
/* Verfügbare Farben */
.bubble-purple /* Regios Purple */
.bubble-green /* Regios Green */
.bubble-yellow /* Regios Yellow */
.bubble-white /* Weiß */
.bubble-black /* Schwarz */
/* Verfügbare Bubble Formen */
.bubble-1, .bubble-2, .bubble-3, .bubble-4, .bubble-5
Bubble Formen
bubble-1
bubble-2
bubble-3
bubble-4
bubble-5
Farbvarianten
bubble-purple
bubble-green
bubble-yellow
bubble-white
bubble-black
OÖE Shapes
Dekorative Formen mit fließender Linie und Logo-Akzent. Füllfarbe und Strichfarbe können unabhängig voneinander angepasst werden.
/* OÖE Shape verwenden */
<div class="ooe-shape ooe-shape-fill-green ooe-shape-stroke-purple">
<svg viewBox="0 0 385.82 362">
<path class="shape-line" d="..."/>
<path class="shape-logo" d="..."/>
</svg>
</div>
/* Verfügbare Füllfarben */
.ooe-shape-fill-green /* Regios Green */
.ooe-shape-fill-yellow /* Regios Yellow */
.ooe-shape-fill-purple /* Regios Purple */
.ooe-shape-fill-white /* Weiß */
.ooe-shape-fill-black /* Schwarz */
/* Verfügbare Strichfarben */
.ooe-shape-stroke-purple /* Regios Purple */
.ooe-shape-stroke-green /* Regios Green */
.ooe-shape-stroke-yellow /* Regios Yellow */
.ooe-shape-stroke-white /* Weiß */
.ooe-shape-stroke-black /* Schwarz */
/* Linienstärke (fließende Linie) */
.ooe-shape-line-hairline /* 0.1rem - Sehr fein */
.ooe-shape-line-extra-thin /* 0.15rem - Extra dünn */
.ooe-shape-line-thin /* 0.2rem - Dünn */
.ooe-shape-line-normal /* 0.3rem - Standard */
.ooe-shape-line-thick /* 0.5rem - Dick */
.ooe-shape-line-bold /* 0.75rem - Fett */
/* Logo-Strichstärke (Blitz-Umrandung) */
.ooe-shape-logo-stroke-thin /* 0.25rem */
.ooe-shape-logo-stroke-normal /* 0.4rem - Standard */
.ooe-shape-logo-stroke-thick /* 0.6rem */
.ooe-shape-logo-stroke-bold /* 0.85rem */
Beispiele
Grüne Formen + Lila Strich auf Lila Hintergrund
ooe-shape-fill-green ooe-shape-stroke-purple
Gelbe Formen + Weißer Strich auf Weißem Hintergrund
ooe-shape-fill-yellow ooe-shape-stroke-white
Weitere Varianten
fill-purple + stroke-green
fill-white + stroke-purple
fill-yellow + stroke-black
fill-green + stroke-yellow
Linienstärke
Die Linienstärke der fließenden Linie kann mit Modifier-Klassen angepasst werden.
hairline
extra-thin
thin
normal
thick
bold
OÖE Shape 2 (Footer Variante)
Größere Variante mit anderem Design, ideal für Footer-Hintergründe.
Grüne Füllung + Lila Strich (Footer Standard)
ooe-shape-2 ooe-shape-fill-green ooe-shape-stroke-purple
Lila Füllung + Grüner Strich
ooe-shape-2 ooe-shape-fill-purple ooe-shape-stroke-green
Logos
Regios Logos in verschiedenen Farbvarianten. Jedes Logo kann auf unterschiedlichen Hintergründen verwendet werden.
Regios Logo
Das Hauptlogo der Regios Energiegenossenschaft mit dem charakteristischen "O" mit Blitz-Symbol.
Weiß auf Lila
Grün auf Lila
Lila auf Weiß
Schwarz auf Weiß
Weiß auf Schwarz
Gelb auf Schwarz
Komponenten
/* Karten-Stile */
padding: 6%;
border-radius: 0; /* eckige Ecken */
/* Verfügbare Varianten */
.card /* weißer Hintergrund */
.card-purple /* lila Hintergrund */
.card-green /* grüner Hintergrund */
.card-yellow /* gelber Hintergrund */
.card-black /* schwarzer Hintergrund */
.card-with-image /* Karte mit Bild oben */
Einfarbige Karten
Standard-Karte
Karte mit weißem Hintergrund.
Lila Karte
Karte mit lila Hintergrund.
Grüne Karte
Karte mit grünem Hintergrund.
Gelbe Karte
Karte mit gelbem Hintergrund.
Karte mit Link
Karte mit Bild
Solarenergie
Erneuerbare Energie für die Region.
Windkraft
Nachhaltige Windenergieprojekte.
Gemeinschaft
Gemeinsam sind wir stärker.
Benefit Box
/* Benefit Box Stile */
padding: 12%;
min-height: 280px;
text-align: left;
vertical-align: center;
/* Text-Klassen */
.benefit-light /* Helle Markenfarbe */
.benefit-highlight /* Weiß - wichtiger Text */
/* Farbvarianten */
.benefit-box-green /* Grüner Hintergrund */
.benefit-box-yellow /* Gelber Hintergrund */
.benefit-box-purple /* Lila Hintergrund */
.benefit-box-black /* Schwarzer Hintergrund */
/* Alternative Website-Farben */
.benefit-box-green-alt /* hsl(108.89, 55%, 48%) */
.benefit-box-yellow-alt /* hsl(42.95, 93.14%, 60%) */
.benefit-box-purple-alt /* hsl(260.4, 100%, 70.59%) */
Markenfarben
Eine Investition für die
wirtschaftliche
Stabilität der
Region
Keine hohen
Energiekosten
mehr
Als Alternative zu
Schwer zugänglichen
Fördermitteln und
Unterstützungen
Alternative Website-Farben (-alt)
Eine Investition für die
wirtschaftliche
Stabilität der
Region
Keine hohen
Energiekosten
mehr
Als Alternative zu
Schwer zugänglichen
Fördermitteln und
Unterstützungen
Secondary Hero
/* Secondary Hero Stile */
min-height: 100vh; /* Vollbild */
background-size: cover;
background-position: center;
/* Content Positionierung */
left: 8%;
bottom: 7.5%;
width: 100%; /* Volle Breite */
/* Struktur */
.hero-secondary /* Container mit Hintergrundbild */
.hero-secondary-content /* Positionierter Inhalt */
.hero-highlight /* Grüner Hervorhebungstext */
.hero-text /* Größerer Absatz für Hero */
/* Hero Text Stile */
font-size: 1.5rem; /* Mobile */
font-size: 2rem; /* Desktop (md:) */
max-width: 66.666%; /* 2/3 Breite auf Desktop */
Deine Nachbarschaft
In einer Gemeinschaft leben
auf die du stolz sein kannst
Gemeinsam Investieren
In eine nachhaltige Zukunft
für unsere Region
Energie ist die
Schlüsselressource
der Zukunft.
Jetzt hast du die einzigartige Möglichkeit, dich an fairer erneuerbarer Energie aus dem Mühlviertel zu beteiligen.
USP Banner
/* USP Banner Stile */
padding: 4rem 2rem; /* py-16 px-8 */
max-width: max-w-4xl; /* zentrierter Inhalt */
/* Struktur */
.usp-banner /* Container */
.usp-banner-content /* Zentrierter Inhalt */
.usp-banner-icon /* Icon oben */
.usp-highlight /* Weißer Hervorhebungstext */
/* Farbvarianten */
.usp-banner-yellow /* Gelber Hintergrund */
.usp-banner-purple /* Lila Hintergrund */
.usp-banner-green /* Grüner Hintergrund */
.usp-banner-black /* Schwarzer Hintergrund */
Badges
Formularelemente
/* Input Stile */
.input /* Text-Eingabefeld */
.label /* Beschriftung */
border-radius: 10px;
Checkbox (Brand-Stil)
/* Checkbox Brand Stile */
.checkbox-brand /* Container (flex) */
.checkbox-box /* Sichtbare Box */
.checkbox-label /* Beschriftungstext */
/* Box Stile */
width/height: 1.5rem (24px);
border: 2px solid regios-purple;
border-radius: 0.375rem (6px);
/* Checked State */
background: regios-purple;
checkmark: regios-green (SVG);
/* HTML Struktur */
<label class="checkbox-brand">
<input type="checkbox">
<span class="checkbox-box"></span>
<span class="checkbox-label">Text</span>
</label>
Modal
/* Modal Stile */
.modal-overlay /* Hintergrund-Overlay */
.modal /* Modal-Fenster */
.modal-close /* Schließen-Button (SVG X) */
.form-group /* Formular-Gruppe */
/* Overlay */
background: black/60;
backdrop-filter: blur(8px);
/* Modal */
max-width: 32rem (mobile) / 40rem (desktop);
max-height: calc(100vh - 2rem/4rem);
overflow-y: auto; /* scrollbar wenn nötig */
padding: 2rem (mobile) / 2.5rem (desktop);
/* Close Button */
size: 3rem (48px);
background: regios-purple;
icon: white (hover: regios-green);
border-radius: 50% (circle);
/* Animation */
transition: opacity, visibility, backdrop-filter, scale;
duration: 0.3s ease;
/* Aktivierung */
.modal-overlay.active /* Sichtbar machen */
/* HTML Struktur */
<div class="modal-overlay" id="my-modal">
<div class="modal">
<button class="modal-close">
<svg viewBox="0 0 24 24" fill="none">
<line x1="6" y1="6" x2="18" y2="18"/>
<line x1="6" y1="18" x2="18" y2="6"/>
</svg>
</button>
<h3>Überschrift</h3>
/* Inhalt */
</div>
</div>
/* JavaScript */
// Öffnen
document.getElementById('my-modal').classList.add('active');
document.body.style.overflow = 'hidden';
// Schließen
document.getElementById('my-modal').classList.remove('active');
document.body.style.overflow = '';
Akkordeon / FAQ
/* Akkordeon-Stile */
border: 1px solid; /* Trennlinien oben und unten */
padding: 1.5rem 0; /* 24px vertikal */
/* Titel */
font-family: "Gilroy";
font-weight: 900; /* Black */
text-transform: uppercase;
/* Verfügbare Varianten */
.accordion /* Standard (lila Titel) */
.accordion-purple /* Lila Variante */
.accordion-dark /* Für dunkle Hintergründe */
Seit wann gibt es die Regios Energiegenossenschaft?
Nach einer intensiven Vorbereitungsphase wurde am 17. Juli 2024 die Regios Energiegenossenschaft SCEmbH, mit Sitz in Galgenau 28, 4240 Freistadt, gegründet. Zu den 41 Gründungsmitgliedern zählen sowohl BürgerInnen und UnternehmerInnen, als auch Gemeinden aus der Region Freistadt.
Was ist der Geschäftszweck von Regios?
Die Regios Energiegenossenschaft hat als Geschäftszweck die Finanzierung, Errichtung und den Betrieb von Fotovoltaik-Anlagen auf geeigneten Dächern und Freiflächen, sowie die Beteiligung an Windparks in der Region Freistadt.
Was ist die Mission von Regios?
Unsere Mission ist die Selbstbestimmung über die regionale Energieversorgung durch gemeinsames Eigentum zu sichern.
Wie kann ich mich bei Regios beteiligen?
Durch den Erwerb/Zeichnung von Genossenschafts-Anteilen und der Gewährung eines Genossenschafter-Darlehens.
Akkordeon auf dunklem Hintergrund
Kann ich Grünstrom von Regios beziehen?
Ja, über den Online-Marktplatz unseres Partners OurPower ist es schon jetzt möglich, direkt von Regios Grünstrom zu beziehen.
Welches Ziel verfolgt Regios?
Ziel von Regios ist es, im Zusammenwirken von Bürger:innen, Unternehmen, Gemeinden und Partnern die Umsetzung der bilanziellen Energieautonomie der Region Freistadt maßgeblich zu gestalten.
Download-Karten
/* Download-Karten-Stile */
padding: 6%;
min-height: 200px;
border-radius: 0; /* eckige Ecken */
/* Farbschema */
.download-title /* Gelb */
.download-keyword /* Lila (Schlüsselwörter) */
.download-arrow /* Gelber Pfeil */
/* Verfügbare Varianten */
.download-card /* Heller Hintergrund (weiß) */
.download-card-dark /* Dunkler Hintergrund (lila) */
Download-Karten auf dunklem Hintergrund
Gerahmte Bilder
/* Gerahmte Bilder Stile */
offset: 0.3125rem; /* 5px - nach rechts und unten versetzt */
/* Farbvarianten */
.framed-image-purple /* Lila Rahmen */
.framed-image-green /* Grüner Rahmen */
.framed-image-yellow /* Gelber Rahmen */
.framed-image-black /* Schwarzer Rahmen */
.framed-image-purple
.framed-image-green
.framed-image-yellow
.framed-image-black
Personen-Karten
/* Personen-Karten Stile */
padding: 12%; /* Inhaltsbereich */
aspect-ratio: 3 / 2; /* Bildverhältnis (10.5cm x 7cm) */
/* Struktur */
.people-card /* Inhalt links, Bild rechts → Name links */
.people-card-reversed /* Bild links, Inhalt rechts → Name rechts */
/* Overlay-Position manuell überschreiben */
.overlay-left /* Name links positionieren */
.overlay-right /* Name rechts positionieren */
/* Farbvarianten */
.people-card-yellow /* Gelb */
.people-card-purple /* Lila */
.people-card-green /* Grün */
.people-card .people-card-yellow (Inhalt links, Bild rechts → Name links)
Je mehr ich die globalen Zusammenhänge beobachte, umso wichtiger ist es mir - dort wo es leicht möglich ist - unsere regionalen Ressourcen und Potentiale zu nutzen.
Thomas Schmitzberger
.people-card-reversed .people-card-purple (Bild links, Inhalt rechts → Name rechts)
Die Energiewende beginnt vor unserer Haustür. Gemeinsam können wir nachhaltige Lösungen entwickeln, die unserer Region zugutekommen.
Maria Beispiel
.people-card .people-card-green (Inhalt links, Bild rechts → Name links)
Erneuerbare Energie ist nicht nur gut für die Umwelt, sondern stärkt auch unsere lokale Wirtschaft und schafft Arbeitsplätze in der Region.
Josef Muster
Icon-Leiste
/* Icon-Leiste Stile */
icon-height: 6rem; /* 96px */
text-align: center;
title-color: grün; /* immer grün */
/* Struktur */
.icon-bar /* Container (responsive grid) */
.icon-bar-item /* Einzelnes Element */
.icon-bar-icon /* Icon-Container */
/* Varianten */
.icon-bar-dark /* Für dunkle Hintergründe (weißer Text) */
Auf dunklem Hintergrund (.icon-bar-dark)
Lila Section Beispiel
Unsere Mission ist die Selbstbestimmung über die regionale Energieversorgung.
Helle Section Beispiel
Du bist Grundbesitzer:in oder eine Gemeinde?
Schwarze Section Beispiel
Wird für Header- und Footer-Bereiche verwendet.