Task · Custom themes

Install a whole look at once

Change your palette, fonts and shapes together, from a file somebody writes once.

7 steps · About 2 minutes · Needs: A theme file, from a designer or from us

A theme is a small text file listing the colors, fonts, corner radius, shadow and motifs your public pages use. It's written in TOML, a plain-text format for settings.

Where to get one

Ask whoever does your design to write it, or ask us for a starting point you can hand them.

Installing it

1. Open Account settings then Custom themes

   Your accountSettings

2. Open New theme and give it a Name

   The name is what every event uses to say it's based on this look, so pick the one you already say out loud.

   go.tito.io/acme/admin/looks

3. Paste the whole file into Colors and fonts (optional)

   There's nothing else to fill in by hand.

4. Select Add theme

5. Put an event on it

   On that event's Customize screen, the Based on block at the top of the Look tab lists every theme you have. Or make this one your account default, and every event that hasn't chosen for itself follows it.

   A file with a mistake in it is refused.

   Your look doesn't change, and the page keeps what you pasted so you can fix that line and try again.

Taking one back out

1. Open the theme and go to Colors and fonts

2. Select download as TOML

   You get a file back, named after the theme.

   Keep it as a backup, or paste it into another account to put the same look on both.

What a theme file can set

A theme file has four groups of settings. Each group starts with its name in square brackets, like [palette], and each setting is one line under it. Below, every setting is written with its group in front, so palette.link is the line link = "#1a56db" under [palette].

If a file has a setting that isn't on this list, Tito refuses the whole file and names the setting. Where a real setting is close, you're told which one you probably meant.

Colors

Every color is a hex value like #1a56db, and all seven are required.

• palette.background is the page behind everything.
• palette.card is the box your event's details are in. Borders are worked out from it.
• palette.text is body text.
• palette.heading is headings.
• palette.link is links.
• palette.button_bg is the background of buttons.
• palette.button_text is the text on buttons.

Shape

• shape.radius is how round corners are, in pixels, from 0 to 40.
• shape.shadow is none, soft or raised.
• shape.buttons is rounded or pill.

Fonts

type.body and type.heading are required. Each one names a font we host:

• inter
• schibsted-grotesk
• space-grotesk
• newsreader
• fraunces
• host-grotesk
• manrope
• source-serif-4
• instrument-serif
• ibm-plex-mono
• big-shoulders-display
• nunito
• source-sans-3

The font settings:

• type.body is body text.
• type.heading is headings.
• type.scale is compact, regular or airy, and sets the size of the event page's title and text.

Your own font

A font you host yourself goes under [type.custom], with one [[type.custom.face]] group for each file, up to 12.

• type.custom.family is the font's name. It can have letters, numbers, spaces and hyphens.
• type.custom.apply is off, headings, body or both. Leave it out and it's off.
• type.custom.face.weight is a weight from 100 to 900 in quotes, like "400", or a range for a variable font, like "400 700".
• type.custom.face.style is normal or italic.
• type.custom.face.src is the file's address, starting https://.

Motifs

• motif.band is a colored band across the top of the page: none, stripe or gradient.
• motif.band_colors is the band's colors, at least two, like ["#1a56db", "#f5a623"].
• motif.section_wash is a colored square before each heading: none or pastel.
• motif.wash_color is the square's color. Leave it out and the square uses the band's second color.