[{"data":1,"prerenderedAt":761},["ShallowReactive",2],{"help-\u002Fhelp\u002Ftheme-and-brand-colors":3,"help-related-\u002Fhelp\u002Ftheme-and-brand-colors":698},{"id":4,"title":5,"body":6,"category":686,"description":687,"extension":688,"meta":689,"navigation":690,"order":691,"path":692,"product":693,"seo":694,"stem":695,"updated":696,"__hash__":697},"help\u002Fhelp\u002Ftheme-and-brand-colors.md","Theme and brand colors",{"type":7,"value":8,"toc":669},"minimark",[9,18,23,27,30,75,86,90,93,120,150,161,164,199,205,212,216,219,236,239,277,280,290,294,301,304,312,315,318,322,325,331,368,375,379,382,399,409,413,416,431,435,438,445,477,480,484,487,494,514,521,525,528,534,554,561,565,568,577,598,601,605,608,614,631,634,638],[10,11,12,13,17],"p",{},"The ",[14,15,16],"strong",{},"Theme"," screen sets how your whole site looks: its design, colors, fonts and corner style. Every choice is designed to work with the others, so you can try anything without making your site look broken. Changes show in the preview right away.",[19,20,22],"h2",{"id":21},"pick-a-design","Pick a design",[24,25],"help-video",{"id":26,"title":22},"theme-and-brand-colors\u002Fpick-a-design",[10,28,29],{},"A design is the overall look of your site: where the logo and menu sit, and how headings, buttons and cards look. Your words, photos, pages and settings stay the same in every design, so you can switch at any time without losing anything.",[31,32,33,40,47,54,68],"ol",{},[34,35,36,37,39],"li",{},"Click ",[14,38,16],{}," in the left menu.",[34,41,42,43,46],{},"Under ",[14,44,45],{},"Design",", click a design to try it. Each card says what kind of business it suits, like \"Landscapers, garden centers, farms\". The preview shows your own site in that design. Nothing changes yet.",[34,48,49,50,53],{},"Above the preview, leave ",[14,51,52],{},"Use its colors, fonts and footer too"," checked to see the design the way it was drawn: its palette, fonts, corners, header and footer. Uncheck it to keep your own. If you made your own colors, it starts unchecked.",[34,55,36,56,59,60,63,64,67],{},[14,57,58],{},"Use"," and the design's name, like ",[14,61,62],{},"Use Grove",", to switch, or ",[14,65,66],{},"Cancel"," to keep the one you have.",[34,69,70,71,74],{},"Changed your mind? Click ",[14,72,73],{},"Undo"," under the designs. Like any change, a new design reaches your live site when you publish.",[10,76,77,78,81,82,85],{},"Your current design is marked ",[14,79,80],{},"Your design",". ",[14,83,84],{},"Classic"," suits most businesses; the others are drawn for one kind of business, from cafés and salons to roofers, gyms and nightclubs.",[19,87,89],{"id":88},"make-your-own-colors","Make your own colors",[24,91],{"id":92,"title":89},"theme-and-brand-colors\u002Fmake-your-own-colors",[10,94,95,96,99,100,103,104,107,108,111,112,115,116,119],{},"The top of ",[14,97,98],{},"Colors"," is a palette generator. It shows your five main colors, each with a job: ",[14,101,102],{},"Background",", ",[14,105,106],{},"Main"," (buttons, links and brand bands), ",[14,109,110],{},"Accent"," (small labels, stars and badges), ",[14,113,114],{},"Dark"," (dark bands and the footer) and ",[14,117,118],{},"Text",".",[31,121,122,126,135,141,144],{},[34,123,36,124,39],{},[14,125,16],{},[34,127,42,128,130,131,134],{},[14,129,98],{},", click ",[14,132,133],{},"Generate",". New colors show in the preview right away.",[34,136,137,138,140],{},"Keep pressing the space bar (or ",[14,139,133],{},") until you see colors you like.",[34,142,143],{},"Like one color but not the rest? Click its lock. Locked colors stay put while the others change.",[34,145,146,147,149],{},"Went past a good one? Click ",[14,148,73],{},", or click it in the row of small palettes you've tried.",[10,151,152,153,157,158,160],{},"To choose a color yourself, click it. You can pick it with the color picker, type its code (like ",[154,155,156],"code",{},"#2F5D46","), or click a lighter or darker shade. Your logo's colors are a good start: lock them, then press ",[14,159,133],{}," to fill in the rest.",[10,162,163],{},"Two lists narrow what Generate makes:",[165,166,167,193],"ul",{},[34,168,169,172,173,176,177,180,181,184,185,188,189,192],{},[14,170,171],{},"Colors that go",": how the accent relates to the main color. ",[14,174,175],{},"Opposite"," and ",[14,178,179],{},"Split"," stand out, ",[14,182,183],{},"Neighbor"," is calm and matching, ",[14,186,187],{},"One color"," uses shades of your main color, and ",[14,190,191],{},"Quiet + pop"," pairs a quiet main color with one bright accent.",[34,194,195,198],{},[14,196,197],{},"Feel",": Calm, Bold, Earthy, Fresh, Elegant or Playful.",[10,200,201,204],{},[14,202,203],{},"More colors"," shows the quieter colors worked out from your five: the soft fill behind tinted sections, gray text, lines, and the words on buttons and dark bands. You can change these too.",[10,206,207,208,211],{},"Found colors you might come back to? Click ",[14,209,210],{},"Save these colors",". You can keep up to 8, and click one to use it again.",[19,213,215],{"id":214},"pick-a-ready-made-palette","Pick a ready-made palette",[24,217],{"id":218,"title":215},"theme-and-brand-colors\u002Fpick-a-ready-made-palette",[31,220,221,225,233],{},[34,222,36,223,39],{},[14,224,16],{},[34,226,42,227,229,230,119],{},[14,228,98],{},", find ",[14,231,232],{},"Or start from a ready-made palette",[34,234,235],{},"Click a palette. A check mark shows which one is in use.",[10,237,238],{},"Each palette lists the kinds of businesses it suits. The first six work with any design:",[165,240,241,247,253,259,265,271],{},[34,242,243,246],{},[14,244,245],{},"Fern",": outdoors, garden, wellness",[34,248,249,252],{},[14,250,251],{},"Harbor",": trades, repair, professional",[34,254,255,258],{},[14,256,257],{},"Terracotta",": cafés, bakeries, restaurants",[34,260,261,264],{},[14,262,263],{},"Blush",": salons, spas, boutiques",[34,266,267,270],{},[14,268,269],{},"Charcoal",": studios, law, consulting",[34,272,273,276],{},[14,274,275],{},"Sunrise",": fitness, kids, events",[10,278,279],{},"After those come two for each design: the one it was drawn with, and one marked \"Second palette for the\" design's name. You can use any palette with any design.",[10,281,282,283,285,286,289],{},"A ready-made palette is also a good place to start your own: pick one, then lock the colors you want to keep and press ",[14,284,133],{},", or click a color to change it. If you pick a ready-made palette after making your own colors, ",[14,287,288],{},"Your colors"," appears first in the list so you can go back.",[19,291,293],{"id":292},"how-we-keep-text-readable","How we keep text readable",[10,295,296,297,300],{},"Every palette the generator makes is checked so all words are easy to read against what's behind them, at the contrast level accessibility guidelines ask for. ",[14,298,299],{},"Why these colors work"," lists each pairing and how it measures.",[10,302,303],{},"If a color you choose or lock is too light or too dark for its job:",[165,305,306,309],{},[34,307,308],{},"The editor moves it just enough, keeping the same hue, and tells you: \"We made it a little darker so words stay easy to read.\"",[34,310,311],{},"Light main colors, like yellow or sky blue, can keep their brightness on buttons. The button words turn dark instead of white.",[10,313,314],{},"This means your exact color may look a little deeper on your site than in your logo. That's on purpose: low-contrast text is hard to read, especially on phones in bright sunlight.",[10,316,317],{},"If your main and accent colors would look alike to visitors with color blindness (green and orange often do), the editor says so, so you can pick a lighter or darker accent.",[19,319,321],{"id":320},"choose-your-fonts","Choose your fonts",[24,323],{"id":324,"title":321},"theme-and-brand-colors\u002Fchoose-your-fonts",[10,326,42,327,330],{},[14,328,329],{},"Fonts",", click a pairing. Each one sets a heading font and a matching body font:",[165,332,333,338,344,350,356,362],{},[34,334,335,337],{},[14,336,84],{},": warm and established",[34,339,340,343],{},[14,341,342],{},"Modern",": clean and confident",[34,345,346,349],{},[14,347,348],{},"Editorial",": stylish and refined",[34,351,352,355],{},[14,353,354],{},"Elegant",": graceful and calm",[34,357,358,361],{},[14,359,360],{},"Friendly",": approachable and upbeat",[34,363,364,367],{},[14,365,366],{},"Sturdy",": bold and dependable (headings in capital letters)",[10,369,370,371,374],{},"After those come the pairings each design was drawn with, like ",[14,372,373],{},"Garden"," (soft and earthy) for Grove. Each card shows a sample of both fonts. Custom fonts aren't available, which keeps your site fast.",[19,376,378],{"id":377},"choose-a-text-size","Choose a text size",[24,380],{"id":381,"title":378},"theme-and-brand-colors\u002Fchoose-a-text-size",[10,383,42,384,387,388,103,391,394,395,398],{},[14,385,386],{},"Text size",", pick ",[14,389,390],{},"Smaller",[14,392,393],{},"Standard"," or ",[14,396,397],{},"Larger",". This changes the size of all the words on your site at once, in every design.",[10,400,401,403,404,119],{},[14,402,397],{}," suits sites whose visitors find small print hard to read. The steps are small on purpose, so your design's layout still fits on every screen. To make one section's heading stand out instead, see ",[405,406,408],"a",{"href":407},"\u002Fhelp\u002Fedit-text-and-photos#change-a-sections-heading-size-and-color","Change a section's heading size and color",[19,410,412],{"id":411},"choose-a-corner-style","Choose a corner style",[24,414],{"id":415,"title":412},"theme-and-brand-colors\u002Fchoose-a-corner-style",[10,417,42,418,387,421,103,424,394,427,430],{},[14,419,420],{},"Corners",[14,422,423],{},"Crisp",[14,425,426],{},"Soft",[14,428,429],{},"Round",". This changes the corners of buttons, photos and cards across your site.",[19,432,434],{"id":433},"choose-an-icon-style","Choose an icon style",[24,436],{"id":437,"title":434},"theme-and-brand-colors\u002Fchoose-an-icon-style",[10,439,440,441,444],{},"The small icons on your site, like the phone, text and check marks, the language globe and the photo arrows, all come in one style. Under ",[14,442,443],{},"Icon style",", pick:",[165,446,447,453,459,465,471],{},[34,448,449,452],{},[14,450,451],{},"Regular:"," clean outlines.",[34,454,455,458],{},[14,456,457],{},"Light:"," thin and airy.",[34,460,461,464],{},[14,462,463],{},"Bold:"," thick and friendly.",[34,466,467,470],{},[14,468,469],{},"Sharp:"," square ends and crisp corners.",[34,472,473,476],{},[14,474,475],{},"Duotone:"," outlines with a soft tint inside.",[10,478,479],{},"Each style works with every design and color. The play and pause buttons stay solid so they're easy to spot.",[19,481,483],{"id":482},"choose-a-header-layout","Choose a header layout",[24,485],{"id":486,"title":483},"theme-and-brand-colors\u002Fchoose-a-header-layout",[10,488,489,490,493],{},"The header is the strip at the top of every page, with your logo, menu, phone number and button. Under ",[14,491,492],{},"Header",", pick a layout:",[165,495,496,502,508],{},[34,497,498,501],{},[14,499,500],{},"Logo left:"," your logo on the left, your menu and button on the right.",[34,503,504,507],{},[14,505,506],{},"Logo above menu:"," your logo in the middle, with the menu in a row of its own underneath.",[34,509,510,513],{},[14,511,512],{},"Logo in the middle:"," half your menu on each side of a centered logo, with a thin strip of contact details above. Suits a long menu on a wide screen.",[10,515,516,517,119],{},"On phones, every layout becomes the same menu button. To change what's in the menu or the header's button, see ",[405,518,520],{"href":519},"\u002Fhelp\u002Fmenu","Change your menu and footer links",[19,522,524],{"id":523},"choose-a-footer-layout","Choose a footer layout",[24,526],{"id":527,"title":524},"theme-and-brand-colors\u002Fchoose-a-footer-layout",[10,529,530,531,493],{},"The footer is the strip at the bottom of every page. Under ",[14,532,533],{},"Footer",[165,535,536,542,548],{},[34,537,538,541],{},[14,539,540],{},"Columns:"," your logo and tagline, then your contact details, hours and menu side by side. Best when you have opening hours and an address.",[34,543,544,547],{},[14,545,546],{},"Centered:"," everything stacked in the middle. Suits coaches, studios and other smaller sites.",[34,549,550,553],{},[14,551,552],{},"Compact:"," one short band, with your logo on one side and your menu and contact details on the other.",[10,555,556,557,560],{},"Whichever you pick, the footer only shows what you've filled in under ",[14,558,559],{},"Business info",". No hours or phone number? Those parts are left out.",[19,562,564],{"id":563},"add-your-logo","Add your logo",[24,566],{"id":567,"title":564},"theme-and-brand-colors\u002Fadd-your-logo",[10,569,570,571,573,574,576],{},"Your logo and browser tab icon are on the ",[14,572,559],{}," screen, not the ",[14,575,16],{}," screen.",[31,578,579,583,595],{},[34,580,36,581,39],{},[14,582,559],{},[34,584,42,585,229,588,591,592,119],{},[14,586,587],{},"Basics",[14,589,590],{},"Logo"," and click ",[14,593,594],{},"Choose photo",[34,596,597],{},"Upload your logo, or pick it from your photos.",[10,599,600],{},"Without a logo, your business name is shown in your heading font. A logo with a transparent background works best.",[19,602,604],{"id":603},"add-a-browser-tab-icon","Add a browser tab icon",[24,606],{"id":607,"title":604},"theme-and-brand-colors\u002Fadd-a-browser-tab-icon",[10,609,12,610,613],{},[14,611,612],{},"Browser tab icon"," is the tiny square image in browser tabs and bookmarks.",[31,615,616,626],{},[34,617,618,619,621,622,229,624,119],{},"On ",[14,620,559],{},", under ",[14,623,587],{},[14,625,612],{},[34,627,36,628,630],{},[14,629,594],{}," and upload a small square image. A simple version of your logo works well.",[10,632,633],{},"Without one, we use the first letter of your business name on your brand color.",[19,635,637],{"id":636},"tips","Tips",[165,639,640,643,652,659],{},[34,641,642],{},"Your words and photos stay the same when you change your theme.",[34,644,645,646,394,648,651],{},"Check a few pages in the phone preview after a theme change, especially sections with a ",[14,647,114],{},[14,649,650],{},"Brand color"," background.",[34,653,654,655,119],{},"Each section's background is set on the section itself. See ",[405,656,658],{"href":657},"\u002Fhelp\u002Fedit-text-and-photos","Edit text and photos",[34,660,36,661,664,665,119],{},[14,662,663],{},"Publish"," when you're happy. See ",[405,666,668],{"href":667},"\u002Fhelp\u002Fgetting-started","Getting started",{"title":670,"searchDepth":671,"depth":671,"links":672},"",2,[673,674,675,676,677,678,679,680,681,682,683,684,685],{"id":21,"depth":671,"text":22},{"id":88,"depth":671,"text":89},{"id":214,"depth":671,"text":215},{"id":292,"depth":671,"text":293},{"id":320,"depth":671,"text":321},{"id":377,"depth":671,"text":378},{"id":411,"depth":671,"text":412},{"id":433,"depth":671,"text":434},{"id":482,"depth":671,"text":483},{"id":523,"depth":671,"text":524},{"id":563,"depth":671,"text":564},{"id":603,"depth":671,"text":604},{"id":636,"depth":671,"text":637},"Editing your site","Choose your site's design, make your own colors with the palette generator or pick a ready-made palette, choose fonts and corner style, and add your logo and browser tab icon.","md",{},true,60,"\u002Fhelp\u002Ftheme-and-brand-colors","sites",{"title":5,"description":687},"help\u002Ftheme-and-brand-colors",null,"wr_2v-hUb79mTtEuOC-HUIoh5G5Btf7qKGLWv2u1boc",[699,700,703,706,707,710,713,716,719,722,725,728,731,734,737,740,743,746,749,752,755,758],{"path":657,"title":658},{"path":701,"title":702},"\u002Fhelp\u002Fsections","Sections you can add",{"path":704,"title":705},"\u002Fhelp\u002Fadd-a-page","Add a page",{"path":519,"title":520},{"path":708,"title":709},"\u002Fhelp\u002Fbusiness-info-and-hours","Business info and hours",{"path":711,"title":712},"\u002Fhelp\u002Fimport-a-menu","Fill in a menu or price list from a photo or PDF",{"path":714,"title":715},"\u002Fhelp\u002Fupdate-your-site-from-whatsapp","Update your site from WhatsApp",{"path":717,"title":718},"\u002Fhelp\u002Fshare-your-menu","Share your menu and print its QR code",{"path":720,"title":721},"\u002Fhelp\u002Fpublish-checks","Publish your changes",{"path":723,"title":724},"\u002Fhelp\u002Fversion-history","Version history",{"path":726,"title":727},"\u002Fhelp\u002Fmonthly-report","Your stats and monthly report",{"path":729,"title":730},"\u002Fhelp\u002Flists","Lists",{"path":732,"title":733},"\u002Fhelp\u002Fevents","Events",{"path":735,"title":736},"\u002Fhelp\u002Fnews-posts","News posts",{"path":738,"title":739},"\u002Fhelp\u002Fjob-openings","Job openings",{"path":741,"title":742},"\u002Fhelp\u002Fteam","Your team",{"path":744,"title":745},"\u002Fhelp\u002Freviews","Reviews",{"path":747,"title":748},"\u002Fhelp\u002Fprojects","Projects",{"path":750,"title":751},"\u002Fhelp\u002Ffaq-list","Your FAQ list",{"path":753,"title":754},"\u002Fhelp\u002Fcustom-lists","Make a list of your own",{"path":756,"title":757},"\u002Fhelp\u002Flanguages","Show your site in Spanish",{"path":759,"title":760},"\u002Fhelp\u002Fai-changes","Ask for an AI change",1793984122984]