Theme and default design
The colors, background, and typefaces of all your links, and the design your quotes go out with.
This feature is new and may not be enabled on your account yet. If you don’t see it, write to us.
What it is
The Quote design screen brings together two decisions for your business:
- The theme: how the link of all your quotes looks. It starts from your brand in Identity (logo, colors, and typography) and lets you go further: page layout, background, typefaces from a catalog of 20 families, corners, shadow, and motion.
- The default design: which design is used by quotes that don’t have their own or another one chosen in their editor.
Requirements
- The Settings permission in your role.
- Cord Studio enabled on your account.
Open the quote design
- Open Settings › Brand appearance › Identity.
- At the bottom of the page, click Design the quote: web page, document or card.
- Adjust the theme on the left. The preview on the right, How your client sees it, is your quote with every change, on Desktop or Mobile.
- Click Save changes (or ⌘S / Ctrl+S). Until you save, your links don’t change.
Ready-made themes
A starting point; then adjust whatever you like. Choosing one changes the page layout, colors, background, typefaces, and shape all at once.
| Theme | How it looks |
|---|---|
| Editorial | A wide document on a cream background, Fraunces headings, and Lora text. |
| Studio | A wide web page with a lilac gradient, Plus Jakarta Sans, and rounded buttons. |
| Boutique | A medium card with a radial gradient, Cormorant Garamond headings, and DM Sans text. |
| Minimal | A white card with no shadow or motion, all in Inter. |
| Technical | A document on blue-gray, Space Grotesk headings, and IBM Plex Mono text. |
| Forest | A web page with a green gradient, Instrument Serif headings, and Figtree text. |
| Your brand | Goes back to your brand from Identity, with none of the above. |
Page layout and width
- Card: the quote in a centered card, as always.
- Document: a sheet with page margins and nearly square corners, with the header across the full width on your primary color.
- Web page: no card. The header is a full-width cover on your primary color, and each section is a panel on the page background.
In Document and Web page, your logo for a dark background goes on the color. If you uploaded a logo but not the dark background one, the header is painted with a light shade of your brand so your logo stays readable. The Width can be Narrow, Medium, Wide, or Full.
Colors and background
- Colors: Primary, Accent, Surface (the quote’s background), and Text.
- Page background: Solid, with one color, or Gradient, with its From and To colors, a Linear or Radial shape, and its Angle.
- Background image and video say Coming soon.
The total is painted with your primary color. If that color isn’t readable on the surface, Cord paints it with the text color.
Typography
Choose one family for Headings and amounts and another for Body text, and the Heading weight (from 400 to 800). The catalog has 20 families, grouped into Sans serif, Serif, and Monospace:
- Sans serif: Inter, Manrope, DM Sans, Plus Jakarta Sans, Space Grotesk, Sora, Outfit, Figtree, Bricolage Grotesque, and Archivo.
- Serif: Fraunces, Playfair Display, Cormorant Garamond, Lora, EB Garamond, Instrument Serif, DM Serif Display, and Young Serif.
- Monospace: JetBrains Mono and IBM Plex Mono.
Cord serves these fonts from its own servers: your client doesn’t download anything from a third party.
Shape and motion
- Corners (from 0 to 40 px) and Buttons (from 0 to 48 px): how rounded they are.
- Spacing: Compact, Comfortable, or Spacious.
- Shadow: No shadow, Soft, Medium, or Strong.
- Motion: None, Subtle, or Expressive. Anyone who asked their system for less motion sees the quote still.
Default design
At the top of the screen, Default design chooses which design is used by quotes that don’t have their own or another one chosen in their editor:
- Cord card: the usual design, with no custom blocks.
- One of your designs: the list shows the ones you created in Your designs.
The change is saved right away and says Saved; it doesn’t need Save changes. See your designs opens Quotes › Designs.
Which links it applies to
- The theme applies to all your quote links, including those already sent, as soon as you save it. A design can change it just for itself from the editor’s Theme tab.
- The default design applies to the quotes you send from now on. The ones you already sent keep the design they went out with. With the Professional plan, a quote can go out with another design, chosen in its editor or its own: see Design a single quote.
- The theme also reaches your payment page, your invoices, the client portal, the embeds, emails, and PDFs. The next section explains how.
Where else the theme shows
The theme also dresses what your client receives after the quote. Your colors, background, typefaces, and shape apply there, but not the page layout or the blocks: each document keeps its own order.
| Where | What it takes from the theme |
|---|---|
| The quote’s payment page | Typography, corners, and colors, including in the card form. |
| Invoice and client portal | Colors, page background, typefaces, corners, spacing, width, and motion. |
| Embedded quote builder and invoice on your site | Colors, typefaces, and shape. Whatever your site sets with the Cord Elements appearance takes precedence over the theme. |
| Email for the quote and the invoice | Colors and the email typeface closest to yours, because email apps don’t load custom fonts. |
| The invoice PDF and the printed quote | Colors on a white sheet and the closest standard font: sans serif, serif, or monospace. |
- Nothing tax-related moves. The invoice number, taxes, stamps, the pro forma invoice notice, and the issuer and recipient details keep their place. If a text color isn’t readable on your surface, Cord darkens or lightens it just enough.
- When printing, the sheet comes out light even if your theme is dark.
- In the Factur-X e-invoice, a monospace typeface comes out as sans serif.
Your invoice messages
At the bottom of the screen, Invoices and portal holds two texts of up to 280 characters:
- Header message: shows under your brand on the invoice and in the portal.
- Thank-you message: shows at the bottom of the invoice and the portal.
They’re saved with Save changes. If you leave one empty, nothing is shown.
Common problems
- I don’t see the Design the quote link. Cord Studio isn’t enabled on your account yet, or your role doesn’t have the Settings permission.
- “The design couldn’t be saved: check the values and try again.” A value ended up outside what’s allowed. Choose it again and save once more.
- I changed the theme and a quote didn’t change. Its design changed the theme just for itself. Open it in the editor, Theme tab.
- The total doesn’t use my color. Your primary color isn’t readable on the surface. Darken it or change the surface.
- My invoice text isn’t the color I chose. Cord adjusts it so the invoice number, taxes, and tax details are readable on your surface. Choose a text color with more contrast.