SOLCOM Brand Kit

Lebende Design-System-Referenz für den SOLCOM-Drupal-Stack: Brand-Tokens, Typografie, Komponenten-Optik und das SDC-Inventar — gemessen aus theme.brand.css, main.css und den 43 Single-Directory-Components des byte_theme.

Datenstand 2026-06-19 · abgeleitet von /elemente-bersicht · Werte-Autorität: Repo (theme-Files + MCP) · Design-Autorität: Figma

01

Farben

Dunkelblaue Bühne, Lime als einziger Signal-Akzent. shadcn-Slot in Klammern.

Dominant · tragende Flächen

Background Blue
#011C53
--brand-bg-blue → --background · Page-BG
Dark Blue
#001F46
--brand-dark-blue → --primary-foreground · CTA-Text
Lime
#BEDC00
--brand-lime → --primary, --ring · CTA & Fokus

Supporting · Akzente, States, Flächen

Teal
#00AAAA
--brand-teal · Gradient-Mitte, Active-State
Gradient Blue
#0050A0
--brand-gradient-blue · Card-Border, Gradient-Ende
Hover Blue
#00459D
--brand-hover-blue · Nav-Hover-Text
Lime Tint
#F4FFAB
--brand-lime-tint · Button/Nav-Hover
Cream
#FDFBF4
--brand-cream · Nav-Flyout, Expanded-Pill
White
#FFFFFF
--brand-white → --card, --foreground
Light Gray
#EBEBEB
--brand-light-gray → --secondary, --accent, --muted
Dark Gray
#828282
--brand-gray → --muted-foreground, --border @15%
Gray Dark
#5C5C5C
--brand-gray-dark · Disabled-Badge-BG (WCAG AA)
Disabled Blue
#28468C
--brand-disabled-blue
Disabled Text
#C3C3C3
--brand-disabled-text
Error (Salmon)
#F59678
--brand-error → --destructive

Gradients

--brand-gradient-1 · 135° lime → teal → blue
--brand-gradient-2 · 45° lime → teal → blue
--brand-gradient-3 · ↑ blue → teal → lime (Card-Stroke)
02

Typografie

Montserrat ExtraBold (Display, UPPERCASE) + ScalaSansWeb (Body). Fluid via clamp().

Heading H1

--text-h1
40px (mobil 36) · Montserrat 800
UPPERCASE · lh 1.1

Heading H2

--text-h2
40px (mobil 36, dann Scala) · Montserrat 800
UPPERCASE · lh 1.35

Heading H3 — Scala Regular

--text-h3
32px · ScalaSans 400 · lh 1.35

1.500+

--text-numbers
45px (mobil 32) · Montserrat 800 · lh 1

Subheadline — 24px Bold

--text-subheadline
24px · ScalaSans 700 · lh 1.35

Body — Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur weil er Schmerz ist.

--text-body
19px (mobil 17) · ScalaSans 400 · lh 1.35

Label — 15px Regular

--text-label-brand
15px · ScalaSans · lh 1.2
03

Komponenten-Optik

Render-Wahrheit der zentralen SDCs (button, badge, card-frame, big-number, divider, meta-row, …).

Buttons · Pill (ADR-0004)
Jetzt bewerben Mehr erfahren Disabled
Button-Link
Badges · 5 Styles
Lime Dark Disabled Lined MP 85%
AWSTerraformSpring Boot
Card-Frame · Gradient-Stroke

Heading H2

Brand-Gradient-Border (lime → teal → blue), dunkler Card-Body, optionaler Notch unten-rechts für die CTA-Pille.

Big Number · Stat
178,2 M€
Umsatz 2024
1.500+
Experten im Netzwerk
Meta-Row · Eckdaten
Stellentyp:Festanstellung
Einsatzort:Stuttgart
Auslastung 85 %
04

Page-Mockups

Zwei öffentliche Seiten-Muster — komponiert aus den SDCs (Brand-Kit-Board-Prinzip).

SOLCOMKarriere · Projektpartner · Über unsLogin
FÜR FREIBERUFLER

Dein nächstes IT-Projekt wartet

Zugang zu exklusiven Projekten bei führenden Unternehmen — passgenau vermittelt.

Projekte ansehen
Homepage · hero-billboard + navbar + button

Senior Cloud Architect (m/w/d)

92%
Remote / Münchenab sofort
Remote-Anteil 80 %

DevOps Engineer (m/w/d)

78%
StuttgartFestanstellung
Projektliste · card-frame + badge(matching) + meta-row + utilisation-slider
05

SDC-Inventar · 43 Komponenten

Bau-Bausteine, nach Zweck gruppiert. Live-Props: tool_api_list_sdc_components include_metadata:true.

Layout & Struktur

Seiten-Skelett: Grid-Spalten, Flex-Gruppen, Trenner, Sprungmarken.

sectiongroupdivideranchor

Headings & Text

Typografie-Bausteine mit Brand-Größen-Enums.

headingtextblockquote

Buttons & CTAs

Pill-Buttons, Text-Links, In-Page-Anchor, Notification-Badge, Hero-CTA.

buttonbutton-linkbutton-anchorbutton-badgecta

Cards

Echte Familie: prop-driven Card, Feature-Card, Frame (4 Border-Varianten), Meta-List, Bubble-Frame-Geometrie. Kein card-bubble-profile.

cardcard-featurecard-framecard-meta-listbubble-card-frame

Hero

Full-Bleed-Billboard, Side-by-Side, Blog-Hero.

hero-billboardhero-side-by-sidehero-blog

Navigation & Chrome

Kopf- und Fußzeile (Slot-getrieben).

navbarfooter

Media

Bild (mit Aspect/Radius), Canvas-Image-Override, Video, Icon (Phosphor + solcom-Brand).

imagecanvas-imagevideoicon

Carousel & Interactive

Slider-Container + Items, Accordion-Container + Items.

slider-containerslider-itemaccordion-containeraccordion

Numbers & Stats

Animierte Kennzahlen, Result-Counter, Display-only Auslastungs-Bar.

big-numbersbig-number-itemresult-counterutilisation-slider

Job- & Projekt-Domäne

Vacancy/Project-Offer-spezifisch: Badge, Meta-Row, Skills-Pills, Sticky-Bars, Merkliste, Downloads.

badgemeta-rowskills-pillssticky-apply-barwatchlist-barwatchlist-toggledownload-brochure-carddownload-image-card

Forms

Salesforce-Marketing-Cloud-Embed.

salesforce-marketing-form