Change your site’s design
Updated October 15, 2026 · 6 min
Pick a look
The "Look" section at the top is the biggest lever on the tab. Each of the seven looks (Fresh, Journal, Signal, Atelier, Hearth, Confetti and Noir) is a complete design: typefaces, corners, spacing, shadows, the header, footer and hero layouts, how much the site moves, and how sections alternate between light and dark bands. Tap a card to apply it everywhere at once. The "Current:" line names your look, and shows "(customized)" once you have changed something below it; tapping the same look again puts every control back to its defaults.
Tip
The AI picked a look for you when it built the site. Switching is the fastest way to try a completely different direction. One tap, and every page follows.Match a reference site
Under the look cards, "Match a reference site (1 credit)" takes a screenshot of any site whose look you like: PNG, JPEG or WebP, up to 8 MB. The AI reads its feel (light or dark, type character, density, corners, colour temperature) and applies the closest look, palette, font pairing and layouts in one step. It is an AI call, so it costs one credit; the upload itself is free, and if the image cannot be read the credit is refunded. Nothing in the screenshot is copied, and it is deleted automatically two weeks after its last use. Like any design change, Undo takes it back.
Pick a color palette
Tap any swatch in the "Color palette" grid to recolor your whole site at once: background, text and accents. With a look applied the grid shows the palettes designed for it; "Show all palettes" reveals the rest. A "Current:" line underneath always names the palette you're on. If none of the presets are quite right, tap "Customize colors" to hand-pick each one yourself: Primary, Accent, Background, Surface, Alt surface, Text, Muted text, and Borders. The text color printed on your primary and accent colors is chosen automatically, so you can't accidentally pick a color combination that's unreadable.
Pair your fonts
The "Fonts" section lists ready-made heading-and-body typeface pairings. Tap one to apply it across every page. The pairing you choose here is consistent site-wide. Under it, "Title spacing" sets the space between letters in your titles. "Title line height" sets how closely the lines of a long title sit together. Both update the preview straight away. "Title capitals" shows titles as typed, in capitals, or with a capital on each word. "Text size" makes all text on the site Compact, Regular or Large.
Fine-tune corners, buttons, density, and shadows
These controls shape how everything else looks. "Corners" runs from Sharp to Pill and sets how rounded buttons, cards and images are. "Buttons" draws every button as Solid, Outline, Soft or a plain Link. "Card borders" puts no line, a Fine line or a Bold line around cards. "Density" (Compact, Comfortable or Airy) sets the breathing room between sections and inside cards. "Shadows" (None, Soft, Elevated or Bold) sets how much depth cards appear to have.
Tip
These are the fastest way to make a site feel calmer or bolder without touching a single section. Try Airy density with soft shadows for a quieter look, or Pill corners with bold shadows for something louder.Set backgrounds and photo treatment
Three more controls finish the look. "Backgrounds" sets the page backdrop: Flat, Tinted, Gradient, Texture or Shapes. "Imagery" applies one color treatment to every photo: Natural, Duotone, Warm, B&W or Matte. "Photo frames" sets the shape around photos: Plain, Rounded, Arch, Offset or Print. Each applies everywhere at once, so every page stays consistent.
Set motion and the page layouts
"Motion" decides how much the site moves as visitors scroll. None keeps it completely still, Subtle adds gentle reveals, and Lively adds hover lifts and scrolling logo strips. The "Layout" group below it shapes the frame around every page: "Header" and "Footer" pick from the layouts the site can render, "Sticky header" keeps the header pinned while scrolling, and "Home hero" and "Inner pages hero" choose how each page's own headline and lead photo are laid out at the top.
Style your header
Under "Header", "Logo size" makes your logo Small, Medium or Large. "Header color" paints the top bar Light, Dark or in your Brand color. "See-through over the hero" lets the header float over the first photo. The Stacked and Transparent overlay headers do not offer it. "Show your phone number" adds it to the header. "Show a button" adds a button; set its words and the page it opens under "Header button".
Style your footer
Under "Footer", "Footer color" works like the header one. Switches turn "Social links", "Opening hours" and "Newsletter signup" on or off. The map footer also offers "Map of your address". "Legal line" is the small print at the bottom. "Footer headline" and "Footer button" fill footers that end with a call to action. Text fields save when you press Save or Enter.
Style the top of each page
The page hero rows apply to every page's headline area. "Hero color" picks its background. On a full photo hero, "Photo shade" darkens the photo and "Shade from" picks where. Top keeps the menu readable. "Hero alignment" and "Hero height" set where the words sit and how tall it is. "Hero badge" is a short label some layouts show. Turn off "Show the hero button" to drop the button, even on the home page.
Tip
Want one page to look different? Open its page header in the Sections tab and pick a “Hero layout” for that page alone.Experiment freely, it’s all free
Every control on the Design tab applies instantly to the live preview and never spends a credit, so there's no reason to hold back. If a combination doesn't work, just pick something else. The one thing that asks first is applying a look while you have custom colors, because the look replaces them with its own palette.
Frequently asked
What is a look, exactly?
A look is a complete design system: type, corners, spacing, shadows, the header, footer and hero layouts, motion, and the rhythm of light and dark sections. It comes with a few palettes and font pairings chosen to suit it. It is not a template: your pages, sections and content stay exactly as they are; only the way they are drawn changes.
Does picking a look throw away my customizations?
Yes, deliberately. That is what makes re-picking a look a reliable reset. Your palette and font pairing survive when the new look supports them; custom colors are replaced, and the editor asks before doing so.
Do design changes cost AI credits?
No. Everything on the Design tab is a manual edit, and manual edits are always free. The one exception is "Match a reference site", which asks the AI to read your screenshot and costs one credit, the same as a chat edit.