Help center/Editor
Colors, typography and borders
Set your site's palette, fonts, and corner styles.
The Colors, Typography and Borders tools in the left rail set your site's look in one place. Changes apply across every page.
Colors#
Open Colors in the left rail.
- Under Palettes, click a palette to apply a full set of colors at once.
- Below the palettes, change any single color. Click the swatch next to a role and pick a new color.
The roles are grouped like this:
| Group | Roles |
|---|---|
| Page | Background, Accent (icons, carets, FAQ markers and 3D widgets) |
| Text styles | Display, H1, H2, H3, Lead, Body, Small, Label |
| Header & footer | Header nav links, Footer links (each with a hover color), Footer text |
| Default button and Primary button | Background, Text and Border, each with a hover color |
| Cards | Background, Border |
| Tags | Background, Text, Border |
| Scrollbar | Thumb |
Picking a palette clears the individual colors you changed. Choose the palette first, then fine-tune.
When you color a single element, such as a text block or icon, you can pick from Theme Colors or save your own under Custom Colors to reuse later.
Typography#
Open Typography in the left rail.
- Under Presets, click a preset to set your fonts together.
- To change one style, click Edit next to it. Choose a font from the built-in library, then set its size and weight.
Typography has two groups. Text styles are what text is set in, largest first: Display for the one big statement on a page, H1 to H3 for headings, Lead for intro copy under a heading, Body for paragraphs, Small for notes and credits, and Label for eyebrows, numbers and metadata. Elements are the text of Button, Tag, and the header and footer links and text. The font library can be searched and filtered by Sans, Serif, Mono and Display. Uploading your own font files isn't supported.
As with colors, picking a preset clears the style changes you made.
Borders#
Open Borders in the left rail. You can set:
| Item | Settings |
|---|---|
| Cards | Border width, Border radius |
| Default button | Border width, Border radius |
| Primary button | Border width, Border radius |
| Images | Border radius |
| Tags | Border width, Border radius |
The image radius doesn't apply to logos. You can still override the radius on a single image or button from its own style settings.
Layout#
Open Layout in the left rail to choose how wide your pages are. Contained keeps your content in a centered column up to 1280 pixels wide. Full width spans the window up to 1920 pixels, with margins that grow on bigger screens, so very wide monitors don't stretch your content. Every section, the header and the footer follow it, backgrounds still fill the window, and you can change it at any time. Footer turns your site's footer On or Off; off, your pages end at their last section, and the footer keeps its content for when you turn it back on.
Long paragraphs keep a comfortable line length of about 70 characters, whichever width you choose.
Undo your changes#
Each panel shows Reset to defaults once you've changed something. It removes your changes in that panel and goes back to the current palette, preset or theme defaults. You can also use undo in the top bar.
Still need help? Email support@drome.site and we’ll get back to you.