Styles
Set site-wide colors, font pairs, responsive type sizes, buttons, cards, badges, and section backgrounds.
Use the style guide to make the whole website feel like one brand. Start with site-wide choices, then use section and text controls for exceptions.
At a Glance
| Area | What it changes | Scope |
|---|---|---|
| Colors | Brand palette and derived text/background colors | Whole site |
| Typography | Heading and body fonts and responsive type scale | Whole site |
| Buttons, Badges, Cards | Reusable component designs | Matching components |
| Section Style | Default section background pattern | Whole site |
| Spacing | Section padding and side gutters | Whole site |
Open the Style Guide
Return to site-wide controls
Choose a group
Check more than one page
Colors and Palettes
The palette identifies its category and palette number. Randomize colors tries another palette without regenerating your page copy.
| Control | What it does | Notes |
|---|---|---|
| Main | Sets the main brand color | Open its swatch to edit the color |
| Background | Sets the palette background | Check text contrast after changing it |
| Accent | Sets the supporting brand color | Useful for highlights |
| Extra colors | Adds supporting colors | The current picker provides Extra 1 and Extra 2, not unlimited slots |
| Light and dark icons | Switch the palette theme | These are site palette choices, not responsive device controls |
| Color picker | Gradient/hue selection and hex entry | Previously used colors are available in the picker |
The palette also derives related text, background, shade, and utility colors. A palette change can therefore affect more than the three visible swatches. The separate CSS Tokens inspection panel is not currently shown.
Font Pair and Typography
Open Typography. Heading and Body keep separate choices. Click the font preview to open the font picker, use Search, preview a result, and choose it. Randomize fonts changes the heading/body pairing together.
| Control | What it does | Values or behavior |
|---|---|---|
| Font preview | Chooses a font for the current role | Heading and body are independent |
| Size | Chooses a responsive size step | XS, S, M, L, XL; M is the default |
| Weight | Changes the font weight | Choose from the weights shown |
| Case | Changes text presentation | Sentence case, Title Case, ALL CAPS |
| Letter spacing | Adjusts spacing between letters | -0.05 to 0.2 em, step 0.005 |
| Line height | Adjusts line spacing | 0.85 to 2, step 0.01 |
The type scale gives headings and body text reusable size slots. A selected text element can use Auto or one of these slots in its own Size field. That keeps local sizes responsive as the site scale changes.
Buttons
Click the Primary or Secondary preview in Buttons. Choose the design preview you want, then adjust the controls below. The style is site-wide; it does not rewrite button labels or destinations.
| Control | Options | What it changes |
|---|---|---|
| Size | S, M, L | Default button proportions |
| Corner radius | Square 0 px, Slight 6 px, Rounded 12 px, Pill | Shape of button corners |
| Label color | Auto, Light, Dark | Button text ink; Auto preserves contrast-derived ink |
| Icon | Yes, No | Whether button icons are displayed |
| Design previews | Choose a visible preview | Fill, border, and shadow treatment |
| Randomize buttons | Dice control in the style guide | Tries another style combination |
The current full picker renders nine button design previews. Shadows are part of button design presets. There is no separate general-purpose shadow blur or opacity slider in this picker. Inspect the preview before selecting a style.
To make one button primary, secondary, or a link-style action, select its text and use the Type control in the Button panel. Apply to section applies that choice to buttons in the selected section. This is different from changing the site-wide button design.
Cards and Shadows
Click either preview in Cards to open the full picker.
| Option | What it does |
|---|---|
| Corner radius | Square 0 px, Slight 10 px, Rounded 20 px, XL 30 px |
| Flat | Clean card without a border or shadow treatment |
| Bordered Solid | Bordered solid treatment |
| Bordered (white) | White bordered treatment |
| Hard Shadow | Offset hard shadow treatment |
| Hard Shadow Soft | Alternative hard-shadow treatment |
| Randomize cards | Tries another card design and corner radius |
Card styles change the card treatment, not the section's content or the number of cards. Choose a different section layout to change the arrangement. Shadows belong to the selected card style; there is no independent card shadow slider here.
Badges and Fields
Badges styles the small labels often placed above headings. Click its preview to open the badge picker. It is editable in the current code, not a Coming Soon feature. You can also select a badge and use its individual Design choice or Apply to section.
The style guide also provides a Fields picker for form field treatments. As with buttons and cards, choose the visual preset rather than assuming a free-form CSS editor.
Section Style
Open Section Style, then click the preview to open Section Background. The current choices are Clean Light, Light + Dark Footer, and Pure Zigzag. Randomize style tries another section background pattern.
This sets the site's starting background pattern. A selected section's Theme, background color, and image overlay are more specific controls. Read Background and Overlay before changing image contrast.
Spacing and Safe Experimentation
Spacing has Vertical and Horizontal controls. They change responsive section padding rather than arbitrary gaps between every element. See Vertical Spacing for all values.
Use Undo and Redo if an experiment does not work. Randomizing a visual style is not the same as an AI generation request.