Headings
Display Sizes
display-xxl Heading
display-xl Heading
Regular Sizes
xl - Extra Large Heading
lg - Large Heading
md - Medium Heading
sm - Small Heading
Body Copy
Text Sizes
Link Button CTA
Button Variants pro Farbbereich (Theme-Variablen aus theme.ts). Kontraste nach WCAG 2.1 AA (#2268): Primary = Markenfarbe (400) mit bereichsabhängiger Schriftfarbe (--theme-accent-contrast: schwarz, Profil weiss), Hover hellt auf die 300er auf (Profil 200er); Outline/Ghost/Link nutzen die AA-sicheren 600er (--theme-accent-dark).
Button Sizes
Buttons with Icons
Filter Tag Capsules
Single Tags
Long Labels (text-balance + max-width)
Grouped (Fachbereich + Zyklus)
Inverted (auf farbigem Container-Hintergrund: weisse Pill, dunkler Theme-Text) — pro Theme: default auf Weiss, inverted auf Theme-Hintergrund. Textfarbe = AA-sichere 600er (≥5:1 auf Weiss und den 50er-Tönungen, #2268)
Base
Teaching
Jobs
News
Profil
Typography Reference
Font Families
Roboto (Default): The quick brown fox jumps over the lazy dog
Aleo (Headings): The quick brown fox jumps over the lazy dog
Line Heights
Leading Tight: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Leading Snug: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Leading Normal: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Leading Relaxed: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Leading Loose: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Zebis Icons
General
Links & Navigation
Social
File Types
PDF
DOCX
XLSX
PPTX
ODP
ODS
ODT
TXT
HTML
MP3
MP4
ZIPKantone
AG
AI
AR
BE
BL
BS
CH
FR
GE
GL
GR
JU
LU
NE
NW
OW
SG
SH
SO
SZ
TG
TI
UR
VD
VS
ZG
ZHColor Palette
Base
Teaching
Jobs
News
Profil
Info
Neutral Colors
Grey Tints (Cool)
For UI elements, borders, and dividers
Neutral Tints (Warm)
For backgrounds and softer UI elements
Color Usage Guidelines
Primary Usage
- • Jobs (Mint Green): Job listings, career-related content
- • Base (Turquoise): General UI elements, primary actions
- • Teaching (Orange): Educational materials, courses
Secondary Usage
- • News (Pink): News articles, announcements
- • Profil (Purple): User profiles, personal settings
- • Info (Yellow): Information notices, warnings
Weight Guidelines
- • 50-100: Backgrounds, subtle highlights
- • 200-300: Borders, secondary elements
- • 400-500: Primary colors, accent surfaces (use black text, except Profil)
- • 600-700: WCAG-AA-safe (#2268): text on white/tinted surfaces, surfaces under white text; 700 for hover/active states
Neutral Color Usage
- • Grey Tints: Use for UI elements, form inputs, dividers, and technical interfaces
- • Neutral Tints: Use for page backgrounds, content areas, and warmer UI sections
- • 5-15: Light backgrounds and subtle borders
- • 30-50: Secondary text and disabled states
- • 70: Primary text on light backgrounds