Styleguide

This style guide provides a comprehensive overview of the visual design system for the Testicular Cancer Foundation website, focusing on colors and typography.

Color Palette

The color palette is a critical component of the brand identity, creating a consistent and recognizable look and feel. The palette consists of primary, secondary, and accent colors that are used strategically throughout the website.

Primary Colors

Primary colors are the most frequently used colors in the design, representing the core brand identity.

Primary Cyan/Turquoise

HEX #00B4DB
RGB rgb(0, 180, 216)

Main brand color, used for backgrounds, buttons, and key visual elements.

Black

HEX #000000
RGB rgb(0, 0, 0)

Body text, headings on light backgrounds, and the website footer.

White

HEX #FFFFFF
RGB rgb(255, 255, 255)

Body text on dark backgrounds, backgrounds for content sections.

Secondary & Accent Colors

Secondary and accent colors are used to complement the primary colors and to draw attention to specific elements, such as buttons, links, and informational sections.

Dark Navy

HEX #0F172A
RGB rgb(15, 23, 42)

Backgrounds for statistic cards and other highlighted sections.

Slate Gray

HEX #64748B
RGB rgb(100, 116, 139)

Secondary buttons and UI elements.

Light Gray

HEX #F1F5F9
RGB rgb(241, 245, 249)

Backgrounds for cards and content modules to create visual separation.

Medium Gray

HEX #C1C1C1
RGB rgb(193, 193, 193)

Borders and subtle UI elements.

Off White

HEX #EBEEF0
RGB rgb(235, 238, 240)

Subtle background variations.

Typography

The website employs a combination of a serif font for headings and a sans-serif font for body text, creating a clear and legible typographic hierarchy.

DM Serif Display

Serif • Headings

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Inter

Sans-Serif • Body Text

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Typographic Scale

The following examples outline the font sizes and weights for various text elements on the website.

HEADING 1 (H1)
Font DM Serif Display
Size 62px
Weight 400

Bekämpfung von Hodenkrebs durch Früherkennung

HEADING 2 (H2)
Font DM Serif Display
Size 40px - 48px
Weight 400 - 800

Unsere Mission: Leben retten durch Aufklärung

HEADING 3 (H3)
Font DM Serif Display
Size 28px
Weight 400

Erfahren Sie, wie Sie eine Selbstuntersuchung der Hoden durchführen

BODY TEXT (P)
Font Inter
Size 17.5px
Weight 400

Die Testicular Cancer Foundation wurde 2009 gegründet und ist eine gemeinnützige Organisation gemäß 501(c)(3) sowie die einzige Organisation im Bereich Hodenkrebs im Land, die über Vollzeitmitarbeiter verfügt. Wir sind ein Team aus Überlebenden, Pflegekräften und Fürsprechern, die sich leidenschaftlich für die Verbesserung der Aufklärung und Sensibilisierung einsetzen.

BUTTON FONT
Font Inter
Size 0.9rem
Weight 600
Letter Spacing 0.07em
Transform Uppercase
Line Height 1.8em