〇 Swiss Data Science Center
SDSC Design System Foundation
A unified design system for scientific communication, data visualization, dashboards, presentations, and web applications.
〇 Guidelines and Examples
Everything you need to build with SDSC
〇 Design Foundations
UI Kit
Colours, typography, spacing, and the components behind every SDSC interface.
〇 Visual Communication
Data Visualization
Chart palettes, colormaps, and accessibility rules for honest scientific graphics.
〇 Real-world Applications
Project Gallery
See the system applied across SDSC platforms, dashboards, and tools.
〇 UI Kit · Colors
Color Palette
The SDSC palette is built around Dark Blue and Light Blue primaries with Green as the accent. A full neutral grayscale and semantic status colors complete the system.
〇 Primary Colors
Dark Blue
#26235c
Primary brand, hover states, banners
Light Blue
#5561a6
Buttons, links, interactive elements
Green
#90ca42
Accent, highlights, CTA elements
〇 Neutral Colors
Grey
#848484
Labels, secondary text
Light Blue BG
#dddeec
Section banners, highlighted areas
Black
#000000
Headings, body text, footers
White
#ffffff
Card backgrounds, text on dark
〇 Grayscale Palette
50
100
200
300
400
500
600
700
800
900
Full colour variations, scales, and semantic colours → UI Kit · Colors
〇 UI Kit · Typography
Type System
H1 — Space Grotesk Bold 48px
Scientific Data
H2 — Space Grotesk Bold 32px
Research Results
H3 — Space Grotesk SemiBold 24px
Visualization
Body Large — Switzer 18px
Clear scientific communication for researchers and developers.
Body — Switzer 16px
Standard body text for paragraphs and descriptions.
Button — Switzer 14px Uppercase
CALL TO ACTION
Caption — Switzer 12px
version 0.0.1 · last updated June 2026
〇 UI Kit · Components
Buttons & Form Elements
Button Variants
Progress Indicators
Form Input
Checkboxes & Toggle
〇 Data Visualization · Colormaps
Continuous Data: Colormaps
For heatmaps, density plots, geospatial fields — anywhere colour represents a continuous value.
Never use rainbow/jet
Do not build colormaps from brand colours. Use established perceptually uniform, CVD-safe colormaps:
| Data type | Recommended approach | Examples |
|---|---|---|
| Sequential (zero → max) | Perceptually uniform sequential map | viridiscividisbatlow |
| Diverging (meaningful midpoint) | Perceptually uniform diverging map | vikromaRdBu |
| Cyclic (phase / angle / time-of-day) | Cyclic map | twilightromaO |
viridis — sequential
RdBu — diverging
twilight — cyclic
Full palettes, accessibility checklist, and implementation code → Data Visualization Guidelines
〇 Documentation
Ready to start building?
Use this guide alongside the live UI Kit to ensure every product you build is consistent with SDSC brand standards.