Set your site's colours and fonts
Use the Design panel to set palettes, fonts, sizes, corners, spacing and shadows for the whole site.
Open the Design panel:
- Palettes and Colours: choose a palette or add a New colour token. Colour tokens appear in every colour field, so changing one updates the whole site. The contrast check shows whether text is easy to read.
- Typography: fonts for Headings, Body and Arabic, the Base size and the Type scale.
- Shape & spacing: Corner radius, Spacing unit, Content width and Shadows.
To style one element, select it and use the Style tab of the inspector. Styles can differ per breakpoint and for hover, focus and pressed states.
Was this article helpful?
Related articles
- Reuse designs with components and classesTurn an element into a component that updates everywhere, and share styles with global classes.
- Add animations and effectsMake elements appear on scroll, react to the pointer or move in loops.
- Arrange the layout for computers, tablets and phonesResize elements, use stacks, grids and free frames, and adjust each breakpoint.
Still need help?
Write to the Woosool team. Sign in with your Woosool Account and we reply by e-mail and in My requests.