Logo and colors

Settings > Your studio > Logo and colors is your brand kit: your mark, your typefaces, your palette and an opt-in that paints Hailo itself in them. It drives how your work looks to a couple on proposals, invoices, emails, inquiry forms and delivery pages. Everything here saves as you change it.

The page has two columns. Controls on the left (Logo, Square mark, Fonts), then on the right the Palette, Use this kit as your app theme and a sticky Live preview that repaints as you edit.

Logo

Surfaces on proposals, invoices, email signatures and delivery pages. SVG preferred. Up to 4 MB.

1. Click the row (it reads "Drop a logo here, or click to upload.") or drag a file onto it.
2. Pick an SVG, PNG, JPG or WEBP up to 4 MB.

Once a logo is in place the row shows the file type and its pixel size, plus:

Control	What it does
Light / Dark	Previews the logo on a light or dark background so you can check both.
Replace	Opens the picker for a new file.
Remove	Deletes the logo.

Square mark

The icon in the couple's browser tab while their delivery page is open. Square, 180 x 180 or larger. Without one, pages fall back to your logo (which is usually a wide wordmark and reads badly that small).

Same controls as the logo: click or drop to upload (SVG, PNG, JPG or WEBP up to 4 MB), then Light / Dark, Replace and Remove.

Fonts

One heading face, one body face. They power proposals, delivery pages and inquiry forms.

1. Click the Headings row or the Body row. Each shows the current face set in that face, with "Hailo default" when you have not chosen one.
2. A list opens underneath: Hailo default first (Fraunces for headings, Inter for body), then every preloaded family with what it is best for, then your uploads marked "Uploaded".
3. Click a face. It saves and the preview repaints.

Four preloaded faces are display faces and are not offered for Body: Allura, Bebas Neue, Italiana and Bodoni Moda. Body copy includes the contract a couple signs, and none of them survive a wall of small text. They stay available for Headings.

To add or remove your own typefaces, click Manage fonts or go to Fonts.

Palette

"Click a dot to pick, or type a hex from your style guide." Four rows, one per role.

Role	Used for	Default
Body text	Paragraph and title ink on your documents	#1a1d24
Page background	The page behind everything	#fcfaf6
Cards and fields	Cards, panels and form boxes	#ffffff
Buttons and links	Calls to action and link color	#FFB89A

For each row:

1. Click the colored dot. A small picker opens with eight presets chosen for that role (dark inks, light papers, saturated button colors).
2. Click a preset, or type a hex in the box on the right (three or six digits, "#" optional).
3. For anything else, click More colors to open the Mac's own color panel.

Contrast warning

Hailo checks readability as you edit. Nothing shows while a pair passes. When a pair fails, a short warning appears inline on that row:

Row	Warning
Body text	"hard to read on the page"
Cards and fields	"text hard to read on cards"
Buttons and links	"button text hard to read"

Hover the warning to see the exact contrast ratio. Page background carries no warning of its own because it is graded together with Body text.

Corner roundness

A slider from 0 to 32 px, default 10. It rounds cards, fields and buttons on every surface the kit paints. The readout on the right shows the value.

Reset colors

Puts the four colors back to their defaults. It does not touch corner roundness or fonts.

1. Click Reset colors. The button changes to Click again to reset.
2. Click it again within a few seconds to confirm. Wait, and it disarms itself.

Use this kit as your app theme

"Paints Hailo itself in the colors and fonts above. Only you see it." One tile, Custom. Click it and the app around your work takes on your palette and fonts.

Custom can only be chosen here, next to the kit it reads from. The four built-in themes, and switching back off Custom, are on Your account. See Themes.

Live preview

The right column ends in a sticky preview with a switcher: Proposal, Invoice, Email and Inquiry. Pick one surface at a time. Each shows the current logo, fonts, palette and roundness on that document:

• Proposal: the hero at the top of a proposal, with the "Accept & sign" button.
• Invoice: the invoice header.
• Email: your email signature.
• Inquiry: the inquiry form, with its "Send inquiry" button.

A caption under each preview says what it represents.

Upload limits

Upload	Formats	Size
Logo	SVG, PNG, JPG, WEBP	4 MB
Square mark	SVG, PNG, JPG, WEBP	4 MB
Proposal banner (on Proposals and invoices)	PNG, JPG, WEBP (no SVG)	10 MB
Invoice header and footer banners (on Proposals and invoices)	PNG, JPG, WEBP (no SVG)	10 MB

If it didn't work

• The status line reads "Couldn't save". Check your connection and change the value again.
• A logo upload is refused. Check the format (SVG, PNG, JPG or WEBP) and that the file is under 4 MB.
• The preview looks wrong after a color change. Look for an inline warning on the palette rows. Reset colors is the fast way back.
• You picked Custom and want the old look back. Go to Account and click one of the four built-in tiles.
• A font is missing from the Body list. Allura, Bebas Neue, Italiana and Bodoni Moda are headings only.