Global Options: Design

The Design group of Tirenoa › Options holds the three tabs that define the look of the whole site: Colors, Typography and Custom CSS.

Go here to set up your brand colors and fonts once. Other global options, page options and Builder elements can then refer to these colors and typography sets, so a later change in one place carries through the site. These tabs contain the general settings only; colors and fonts of specific areas, such as the menu, are on the tab of that area.

In this article: Colors · Typography: Global Typography · Typography: Body Typography · Typography: Heading Typography · Typography: Custom Fonts · Custom CSS · Related

Colors

The Colors tab holds the global color palette and the main highlight color.

Option	What it does
Color Palette	Your global colors. They can be picked in other global options, in page options and in element options. For best results set the 8 colors of the core palette from lightest to darkest. You can add further colors.
Primary Color	The main highlight color throughout the website. By default it points to color 5 of the palette.

Note: If you delete a global color that other options use, those options show a default color instead. Colors are stored with a fixed counter, so a color you add after deleting one takes over the internal name of the deleted color.

Typography: Global Typography

The Typography tab is a panel with four parts. The first, Global Typography, holds the typography sets.

Option	What it does
Typography Sets	Named sets of font family, size, weight, line height and letter spacing. Other global options and element options can use a set, and each value of a set can still be overridden where it is used. Deleting a set that is in use makes those options fall back to the default font; like colors, sets are stored with a fixed counter.

Typography: Body Typography

Body Typography controls the normal text of the site and the styling of text links.

Option	What it does
Body Typography	Font family, size, weight, line height, letter spacing and color for all body text. By default it uses typography set 4 and palette color 8.
Link Color	The color of all text links.
Link Hover Color	The color of links while the pointer is over them.
Enable Link Text Decoration	Turns on text decoration, such as underlines, for general links. Default: off. The eight decoration options below are only shown when it is on.
Exclude Elements From Link Decoration	Areas that keep undecorated links: Breadcrumbs, Buttons, Headings, Menus, TOC Elements, Tabs & Toggles, Off Canvas. By default all except breadcrumbs and headings are excluded.
Link Text Decoration Line / Link Hover Text Decoration Line	The line for the normal and the hover state: No Style (default), Overline, Underline, Line Through or Overline & Underline.
Link Text Decoration Style / Link Hover Text Decoration Style	Solid (default), Double, Dotted, Dashed or Wavy. Only shown when the matching line is not No Style.
Link Text Decoration Thickness / Link Hover Text Decoration Thickness	Thickness of the line in px, em or rem. Default: 1px. Only shown when the matching line is not No Style.
Link Text Decoration Underline Offset / Link Hover Text Decoration Underline Offset	Distance between text and underline. Default: auto. Only shown when the matching line includes an underline.

Typography: Heading Typography

Heading Typography sets the six heading levels and the titles of posts. All of them use typography set 1 and palette color 8 by default.

Option	What it does
H1 Headings Typography to H6 Headings Typography	One block per heading level with font family, size, weight, line height, letter spacing, color, top and bottom margin and text transform. Default sizes: H1 64px, H2 the size of typography set 1, H3 36px, H4 24px, H5 20px, H6 16px.
Post Title Typography	Typography of all post titles, on archive pages and on single posts. Default size: 48px. On archive pages and in blog elements, linked post titles use the link color.
Post Title Extras Typography	Typography of the extra titles on single posts, such as the comments, related posts or projects, and author titles. Default size: 20px.

Typography: Custom Fonts

Custom Fonts is where you add fonts of your own. Uploaded fonts are stored on your website. Adobe Fonts are loaded from Adobe, so the site connects to Adobe when you use them.

Option	What it does
Custom Fonts	Upload your own font files. Each entry has a Font Name, which appears in the font family dropdown, and upload fields for WOFF2, WOFF, TTF, EOT and SVG. Not every file is necessary, but more files give wider browser support. Click the add button for further fonts; up to 50 are possible.
Adobe Fonts ID	The Web Project ID of your Adobe Fonts project. Save and reload the page afterwards.
Adobe Fonts Reset Cache	Lists the Adobe fonts that were found. The Refresh Adobe Fonts Cache button reads the project again; use it after you change the fonts of the project.

Note: After you upload a custom font, save the options and reload the page in your browser. The new font then appears at the top of the font list in the typography controls.

Custom CSS

The Custom CSS tab has one field for style rules of your own.

Option	What it does
CSS Code	Enter CSS only, without tags or HTML. Rules entered here override the theme styles; in some cases a rule needs `!important` to win. Do not URL-encode image or SVG paths; the content of the field is encoded automatically.