Buttons

Unsere Buttons sind in verschiedenen Stilen verfügbar, jeweils abgestimmt auf den jeweiligen Anwendungskontext.

Primary Button

Unsere Buttons folgen einem klaren visuellen System: Primary und Secondary Buttons unterscheiden sich in Gewichtung und Farbgebung, unterstützen aber gemeinsam eine konsistente Nutzerführung. Ihre definierten Größen sorgen für ein ausgewogenes Gesamtbild über alle Bildschirmformate hinweg.

Shapes

Standard large

.btn--primary

I am a buttonI am a link

Standard default

.btn--default

I am a buttonI am a link

Standard small

.btn--small

I am a buttonI am a link

Circular default

Circular small

States

Default

Hovered

Focused

Disabled

I am a button

Secondary Button

Secondary Buttons unterstützen die Nutzerführung, ohne sich in den Vordergrund zu drängen. Sie kommen zum Einsatz, wenn eine Handlung weniger Priorität hat oder als ergänzende Option zum Primary Button dient. Mehrere Secondary Buttons können nebeneinander platziert werden.

Farben

Die hier gezeigte Farbpalette wurde speziell für die grundlegenden UI-Elemente der Marke MALMEDIE entwickelt. Durch den konsistenten Einsatz dieser Farben schaffen wir ein einheitliches Erscheinungsbild und stärken den Wiedererkennungswert über alle Touchpoints hinweg.

Primäre Farben

Kobaltblau, Lichtblau und Weiß sind die primären Markenfarben von MALMEDIE. Sie prägen den visuellen Auftritt maßgeblich und sorgen für Konsistenz und Wiedererkennung in digitalen wie analogen Anwendungen. Im UI-Design kommen sie gezielt und einheitlich zum Einsatz.

Kobaltblau

HEX

#1A3E70

CMYK

3597C (tbc)

Pantone

#1A3E70

Lichtblau

HEX

#009FE3

CMYK

100 | 0 | 0 | 0

Pantone

2382C

Weiß

HEX

#FFFFFF

CMYK

0 | 0 | 0 | 0

Pantone

–

Sekundäre Farben

Gelb wird ausschließlich für Störer verwendet oder wichtige, hervorzuhebende Hinweise. Weiß und Schwarz kommen hauptsächlich für Texte zum Einsatz oder in räumlichen Anwendungen, wenn keine andere Farbe möglich ist. Lichtgrün wird in digitalen Anwendungen verwendet, um Akzente zu setzen und bestimmte Elemente hervorzuheben.

Lichtgrün

HEX

#1A3E70

CMYK

3597C (tbc)

Pantone

#1A3E70

Gelb

HEX

#009FE3

CMYK

100 | 0 | 0 | 0

Pantone

2382C

Schwarz

HEX

#000000

CMYK

100 | 80 | 30 | 10

Pantone

–

Weiß

HEX

#FFFFFF

CMYK

0 | 0 | 0 | 0

Pantone

–

Typografie

Unsere Typografie prägt maßgeblich den visuellen Charakter der Marke und sorgt für Klarheit und Wiedererkennbarkeit in allen Anwendungen. Die GT America Expanded verleiht unserem Auftritt Ausdruck und Selbstbewusstsein, während die Aktiv Grotesk als ergänzende Schrift eine flexible und funktionale Basis für digitale Inhalte bildet.

GT America

Display

Die größte Schriftgröße im Layout wird gezielt für kurze, prägnante Aussagen oder aussagekräftige Ziffern eingesetzt – sie zieht sofort die Aufmerksamkeit auf sich und verleiht wichtigen Inhalten maximale Wirkung.

Display 1

--d1 / --d1--l

56 / 104

Display Headline 1 Light L 104/100%

Display 1 Bold

--d1 / --d1--b

56 / 104

Display Headline 1 Bold L 104/100%

Display 2

--d2 / --d2--l

48 / 80

Display  Headline 2 Light L 80/100%

Display 2 Bold

--d2 / --d2--b

48 / 80

Display  Headline 2 Bold L 80/100%

Display 3

--d3 / --d3--l

34 / 64

Display  Headline 3 Light L 64/100%

Display 3 Bold

--d3 / --d3--b

34 / 64

Display  Headline 3 Bold L 64/100%

Headings H1-H6

Wird genutzt, um Inhalte in Abschnitte zu gliedern und eine klare Informationshierarchie zu schaffen.

Label

Kurze Textelemente, die Kontext oder Zusatzinformationen zu einem bestimmten Inhaltsblock liefern.

Label 1

--label1

16 / 16 / 100%

Label 1
Bold L
16/100%

Label 2

--label2

14 / 14 / 100%

Label 2
Bold L
14/100%

Paragraph

Wird für textbasierte Inhalte wie Fließtexte oder Zitate verwendet.

Paragraph 1

var name

32 / 36

Paragraph 1 Regular L 36/160%

.text--3xl

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Paragraph 1 Bold L 36/160%

Paragraph 2 Regular L 28/140%

Paragraph 2 Bold L 28/140%

Paragraph 3 Regular L 24/130%

Paragraph 3 Bold L 24/130%

Paragraph 4 Regular L 20/160%

Paragraph 4 Bold L 20/160%

Paragraph 5 Regular L 16/140%

Paragraph 5 Bold L 16/140%

Paragraph 6 Regular L 14/130%

Paragraph 6 Bold L 14/130%

Tag Regular L 14/130%

.text--tag

Tag Bold L 14/130%