Shopware Design

Typography

One typeface, applied consistently, carries a product's voice further than any single style choice. Everything here is available as CSS custom properties and via the Text component.

Font family

Inter is loaded via @shopware-ag/meteor-component-library/font.css. Import this stylesheet to ensure the font is available. If you manage fonts independently, make sure Inter is available under the name Inter.

Size

Meteor uses a named scale from 2xs to 3xl. Always pair a --font-size-* token with its matching --font-line-height-* token; the line heights are tuned to each step.

Weight

Reserve --font-weight-semibold and --font-weight-bold for headings, labels, and key emphasis. Body copy should be --font-weight-regular.

Hierarchy

Create hierarchy through size and weight, not decoration. A clear hierarchy guides the reader's eye without requiring color or additional visual treatments.

  • Use one prominent size per section. Combining multiple large sizes on a single screen competes for attention rather than directing it.
  • Increase weight before increasing size. Stepping up from regular to semibold at the same size creates sufficient contrast for labels, headings, and interactive elements.
  • Reserve 3xl and 2xl for page-level titles and major section headers. Use xl and l for subsections. Use m and s for card and section headlines. Use xs for body copy, supporting labels, and metadata.
  • Secondary information should use --color-text-secondary-default, not a smaller size. Reducing size too aggressively harms legibility.

Line length

Keep body copy between 60 and 80 characters per line. Use max-width: 65ch on the container to enforce this. This does not apply to labels or UI strings.

Usage

To render text, prefer the Text component over applying these tokens directly. It maps the size, weight, and color tokens to props and pairs each size with the correct line height automatically. See its page for the full API and examples.

Do
  • Use font-size and line-height tokens together from the same scale step.
  • Use --font-weight-semibold or --font-weight-bold only for headings and labels.
Don't
  • Mix a token font-size with a hardcoded line-height, or use raw px values.
  • Apply bold weight to long-form body text. It reduces readability.

Accessibility

  • Ensure sufficient contrast between text and background. Use --color-text-primary-default on --color-elevation-surface-default as your baseline.
  • Do not set font sizes below --font-size-2xs (12px). Below this threshold legibility degrades significantly.
  • Avoid setting line-height below 1.4 for body copy. The token line heights already meet this.

For broader accessibility guidance, including contrast requirements, see the Accessibility page.

Border Radius

A two-layer set of border radius tokens, with element-scoped tokens for specific components and semantic tokens for general use.

Icons

Meteor's icon set, built for consistency, clarity, and legibility across all sizes and themes.