Skip to content
Serre design system
Theme

Wordmark

The serre wordmark or a subbrand, exactly as the brand kit exported it from brand.json: an outlined SVG by name, never type set by an app. Every logo in the site and the apps is one of these.

Examples

The master, at each size
SerreSerreSerre
Subbrands, inline and stacked
Serre toolsSerre compass

Props

Wordmark

The serre wordmark or a subbrand, exactly as the brand kit exported it (SER-124): an outlined SVG, never type set by the app. Its accessible name is "Serre", or "Serre" and the product.

PropTypeDefaultDescription
name?"serre" | "serre-compass-inline" | "serre-compass-stacked" | "serre-flow-inline" | "serre-flow-stacked" | "serre-tools-inline" | "serre-tools-stacked" | "serre-lab-inline" | "serre-lab-stacked" | "serre-press-inline" | "serre-press-stacked" | "serre-design-inline" | "serre-design-stacked""serre"The kit's name for it: "serre", or a subbrand and lockup, such as "serre-tools-inline".
size?"sm" | "md" | "lg""md"
decorative?booleanfalseBeside text that already names the app: the image is then hidden from screen readers.

Accessibility

  • Its accessible name is "Serre", or "Serre" and the product; beside text that already names the app, mark it decorative.
  • The kit's light-on-dark artwork, so it holds its contrast on every dark surface.