The global design system

The global design system is where your design decisions live once instead of on every block. Set a colour or a type scale here and it is available everywhere, and changing it later updates every block that uses it.

It holds:

• Global colours, your palette, named and reused rather than typed in by hex each time.
• Global typography, your type scale and font choices.
• Global classes, named sets of styles you apply to blocks, like a button style or a card, so a change to the class reaches every block wearing it.
• Stylesheets, your own CSS kept with the design system rather than scattered across blocks.
• Design tokens, values imported from Penpot or Figma that land here as editable globals.

Setting these up before you build means everything you place afterwards starts from them.