Skip to content
Design System
  • Documentation
  • Prototypes
Branding
  • Voice & tone
  • Logo
  • Farben
  • Typographie
  • Visuelle Elemente
Foundations
  • Usage
  • Global styles
  • Themes
  • Spacing
  • Viewports
  • Colors
  • Typography
  • Core utilities
Layouts
  • Usage
  • Aspect ratio
  • Auto grid
  • Content grid
  • Flex group
  • Flow
  • Multicol
  • Pile
  • Reel
  • Region
  • Repel
  • Sidebar
  • Switcher
  • Wrapper
Patterns
  • Accordion
  • Avatar
  • Avatar Group
  • Book pile
  • Brand shapes
  • Button
  • Calendar Date
  • Callout
  • Card
  • Context Switcher
  • Figure
  • Forms
  • Hero
  • Icon
  • Icon link
  • Image Bento
  • Image Grid
  • List Icon
  • Marquee
  • Modal
  • More Link
  • Pagination
  • Pill
  • Promo Card
  • Prose
  • Section Divider
  • Section Heading
  • Section Illustration
  • Show More
  • Slideout
  • Submenu bar
  • Table
  • Tabs

Global styles

Global styles reduce the amount of CSS needed to apply basic styling to semantic elements.

This system attempts to be an extension of CSS, rather than a reinvention. For this reason, the CSS contains a lot of global styles that use the css cascade and should trickle down to all frontend components, rather than all styles being defined at component level.

The idea is that with global and high-level styles, most of the work is already done for you. This means that before you even start thinking about components, most of the colors and typography will be set and working in harmony. Semantic HTML should be properly formatted without the addition of a single CSS class.

The global styles contain

  • a sensible reset and opt-in to newer browser features,
  • basic text styles, such as font sizes, leading and line length,
  • styles for HTML elements such as tables, lists, and form inputs.

The defaults can be seen here:

View full screen
Theme