> ## Documentation Index > Fetch the complete documentation index at: https://docs.instantcampaign.ai/llms.txt > Use this file to discover all available pages before exploring further. # Landing page themes > Give a landing page a finished look without writing CSS. Pick one of 20 themes, adjust its colours, fonts and shapes, or describe a theme and let AI build it. A theme sets a landing page's colours, fonts, corner radius and button shape. You can pick one ready-made, change any part of it, or describe what you want and have AI write it. The theme is saved into the page's **Custom CSS**, and anything you've written there yourself is kept. Open a page in the editor and click an empty part of the canvas, or click **Styles** in the toolbar. **Theme** is at the top of the panel. ## Pick a theme Click the theme menu (it says **No theme yet** on a page that doesn't have one) to see all 20 themes, each with its colours and fonts. * Type in **Search themes…** to find one by name. * Use **All**, **Light** and **Dark** to filter. * Click the shuffle button to try a random theme. Clicking a theme applies it straight away: the page's colours, fonts and buttons change on the canvas. | Theme | Look | Suits | | - | - | - | | **Midnight** | Near-black, violet and cyan glow | Developer tools, analytics, AI | | **Aurora** | White, indigo, soft colour glow | B2B software, marketing tech | | **Ledger** | White and cool grey, emerald | Finance, payments, compliance | | **Editorial** | Cream paper, serif headlines, terracotta | Agencies, food, publishing | | **Noir** | Black, champagne gold, serif | Fashion, hospitality, luxury goods | | **Sunrise** | Warm white, coral and amber | Consumer apps, events, lifestyle | | **Clinic** | White, teal and sky blue | Healthcare, wellness, non-profits | | **Terminal** | White, black ink, lime | APIs, infrastructure, security | | **Graphite** | Dark zinc greys, white accent | Developer and design tools | | **Harbor** | White, slate, royal blue | Consulting, legal, HR software | | **Ocean** | Airy white, deep sea blue | Travel, logistics, education | | **Forest** | Sage paper, deep green | Outdoor, sustainability, organic food | | **Mint** | Mint and teal, rounded type | Consumer fintech, health apps | | **Lavender** | Lilac, violet and pink | Beauty, creators, community apps | | **Citrus** | White, lime and tangerine | Fitness, drinks, youth brands | | **Rosé** | Blush paper, raspberry, serif | Weddings, florists, skincare | | **Paper** | Black and white, serif, square corners | Architecture, photography, studios | | **Espresso** | Dark brown, caramel, serif | Coffee, restaurants, craft goods | | **Royal** | Deep navy, antique gold, serif | Banking, law firms, universities | | **Neon** | Ink-violet, magenta and cyan | Gaming, music, nightlife | If your workspace has a brand colour in **Brand**, a page the AI generates uses it in place of the theme's accent. ## Change the colours, fonts and shape Below the theme menu are four tabs. Every change shows on the canvas as you make it. **Colours**: set each colour with the picker or type a hex code. | Colour | Where it's used | | - | - | | **Background** | The page and most sections | | **Alternate background** | Every other section, so the page doesn't read as one block | | **Cards** | Feature, pricing and testimonial cards | | **Borders** | Card edges and dividing lines | | **Text** | Headlines and body text | | **Secondary text** | Descriptions, captions and small print | | **Accent** | Buttons, links, icons and highlights | | **Second accent** | The second colour in gradients and charts | | **Dark panel** | The stats band and the closing call-to-action panel | A warning appears under **Text** or **Secondary text** when it's hard to read against the background, with the current contrast ratio. Text needs at least 7:1 and secondary text 4.5:1. **Use brand colours** sets the accent to your workspace's brand colour, and the second accent to its secondary colour when that shows up against the background. **Type**: choose the **Headline font** and **Body font**, and set the **Headline weight** and **Headline letter spacing**. Instrument Serif comes in one weight only, so the weight slider is off when it's the headline font. **Shape**: set the **Corner radius** of cards, images and panels (0 to 32 px), and the **Button shape**: **Pill** or **Rounded**. When you change a ready-made theme, its name shows as **customised**, for example "Aurora, customised". Click **Reset to Aurora** to go back to the original. ## Generate a theme with AI On the **Generate** tab, describe the look you want, for example "warm and earthy with a serif headline" or "fresh Scandinavian, sand background, deep green buttons". You can also click **Image** to attach a screenshot or design to take colours and type from (PNG, JPEG or WebP, up to 5 MB). Then click **Generate theme**. The AI starts from your current theme and changes what your description asks for. It only chooses colours, fonts and shapes, so the result is always a theme you can keep editing on the other tabs. If text comes back too faint to read, it is darkened or lightened until it's readable. Each generation counts toward your plan's AI text generations. ## Use a theme on a page you built yourself A theme styles blocks that carry the theme's classes. Pages made with **AI Generate** already have them. A page you built block by block doesn't, so the theme menu shows **This page's blocks don't use the theme yet**. Click **Style this page's blocks** and: * each container at the top of the page becomes a section, with alternating backgrounds * blocks placed straight on the page, with no container around them, are grouped into a new section * headings get the size for their level (H1, H2 or H3) * buttons become primary buttons in the accent colour, and keep their alignment * containers inside columns become cards * links take the accent colour and dividers the border colour * fixed text colours are cleared so text follows the theme The page also switches to **Fluid** width, because themed sections paint their background edge to edge and keep their content at a readable width themselves. To undo it, press **Undo** (⌘Z) once. ## Blocks you add later On a themed page, new blocks take the theme as you add them. A new button is a primary button in the accent colour, a heading gets its level's size, a container added at the top of the page becomes a section, and links and dividers use the theme's colours. Snippets and pasted blocks that already carry style classes keep them. If some buttons, headings, links or dividers were added before the page had a theme, the theme panel shows **Style N unstyled blocks**. Click it to bring them in line. ## Where the theme is saved The theme is written into the page's **Custom CSS** (on the **Styles** tab), in two marked parts: the theme's colours and fonts, then the rules that style sections, cards and buttons. Picking or editing a theme replaces those two parts only. Anything you write after them is kept. Don't edit between the theme's markers in **Custom CSS**. Your edits there are replaced the next time the theme changes, and the theme panel shows a warning when it finds them. Put your own rules after the design system instead. Pages that already existed look exactly as before until you pick a theme or click **Style this page's blocks**. ## Troubleshooting * **The theme changes nothing on my page**: the page's blocks don't have the theme's classes yet. Click **Style this page's blocks**. * **One button or heading doesn't match**: it was added before the theme. Click **Style N unstyled blocks**, or pick a style for it in the block's [CSS Class field](/guides/audience-and-campaigns/landing-pages#style-a-block-with-css-classes). * **A button ignores its alignment**: open the page in the editor once. Pages saved with an older version of the theme's rules are brought up to date when they're opened.