Theme settings and branding
Use the theme settings editor for shared visual defaults. Module Styles controls affect that module's presentation. Edit content such as company names and logos in the header/footer global content, not in a color setting.
Available theme settings
| Group | Controls provided |
|---|---|
| Brand colors | Primary technical accent, secondary ink, primary surface, subtle surface, and fine divider. |
| Typography | Body text and Heading 1 through Heading 6 font settings. Font choices are Arial, Verdana, and Georgia. |
| Links | Link and hover colors. |
| Buttons | Text font, background, hover background/text, corner radius, and vertical padding. |
| Forms | Form text, background/border, label text, input border, and submit-button text/background/hover colors. |
| Cards | Surface, border, and corner radius. |
| Layout and spacing | Maximum content width, section vertical spacing, input corner radius, and border thickness. |
| Header | Navigation font, surface/divider, and maximum logo width. |
| Footer | Text font, surface/divider, and maximum logo width. |
The default maximum content width is 1200px. This is a maximum, not a fixed width for mobile screens. Reading-width components and blog articles can remain narrower. Individual components use the settings relevant to them; a card setting is not a universal override for every content block.
A practical branding sequence
- Set your colors and typography.
- Check text and links against white, subtle, and dark backgrounds.
- Adjust buttons, forms, and header/footer styles.
- Review a short page and a long content page before changing overall spacing.
- Preview changes on desktop and mobile before publishing shared settings.
Sections use compact, standard, or spacious spacing treatments with responsive sizing. These are composition choices, not a separate global spacing system to configure. Some modules offer their own compact/standard spacing, reading width, alignment, or desktop column controls. Only the controls shown for the selected module apply.
See modules and sections for examples and accessibility for contrast checks after changing colors.