[{"data":1,"prerenderedAt":586},["ShallowReactive",2],{"docs-\u002Fdocs\u002Fsite-kit\u002Fdesign":3,"docs-navigation":436,"docs-surround-\u002Fdocs\u002Fsite-kit\u002Fdesign":583},{"id":4,"title":5,"body":6,"description":428,"extension":429,"icon":430,"meta":431,"navigation":430,"path":432,"seo":433,"stem":434,"__hash__":435},"docs\u002Fdocs\u002F4.site-kit\u002F04.design.md","Design",{"type":7,"value":8,"toc":420},"minimark",[9,13,17,22,30,158,165,169,268,283,287,319,336,340,346,374,377,383,387,393,397,416],[10,11,5],"h1",{"id":12},"design",[14,15,16],"p",{},"The kit ships no CSS. Its markup carries styling hooks, and each site's look is its own theme, taken from its example and owned by the site from the first commit. A kit update never changes how a site looks.",[18,19,21],"h2",{"id":20},"the-theme","The theme",[14,23,24,25,29],{},"The theme is one folder, ",[26,27,28],"code",{},"src\u002Fstyles\u002Ftheme\u002F",":",[31,32,33,46],"table",{},[34,35,36],"thead",{},[37,38,39,43],"tr",{},[40,41,42],"th",{},"Path",[40,44,45],{},"What it holds",[47,48,49,64,74,84,94,115,128,148],"tbody",{},[37,50,51,57],{},[52,53,54],"td",{},[26,55,56],{},"tokens\u002Fcolors.css",[52,58,59,60,63],{},"the color scheme in use: one ",[26,61,62],{},"@import"," of a preset",[37,65,66,71],{},[52,67,68],{},[26,69,70],{},"tokens\u002Ftype.css",[52,72,73],{},"fonts and the text scale",[37,75,76,81],{},[52,77,78],{},[26,79,80],{},"tokens\u002Fshape.css",[52,82,83],{},"radii and shadows",[37,85,86,91],{},[52,87,88],{},[26,89,90],{},"tokens\u002Fspace.css",[52,92,93],{},"the content width, section spacing, side gutter and breakpoint",[37,95,96,101],{},[52,97,98],{},[26,99,100],{},"presets\u002Fcolors\u002F",[52,102,103,104,107,108,111,112],{},"the color schemes, such as ",[26,105,106],{},"basics","' ",[26,109,110],{},"navy"," and ",[26,113,114],{},"pine",[37,116,117,122],{},[52,118,119],{},[26,120,121],{},"fonts.css",[52,123,124,125],{},"the fonts, from ",[26,126,127],{},"public\u002Fassets\u002Ffonts\u002F",[37,129,130,145],{},[52,131,132,135,136,135,139,135,142],{},[26,133,134],{},"base.css",", ",[26,137,138],{},"layout.css",[26,140,141],{},"sections.css",[26,143,144],{},"prose.css",[52,146,147],{},"the styles of the page, the header and footer, every section type, and rendered Markdown",[37,149,150,155],{},[52,151,152],{},[26,153,154],{},"README.md",[52,156,157],{},"the design's roles, color schemes and the text and background pairs whose contrast is checked",[14,159,160,161,164],{},"The site's own CSS goes in ",[26,162,163],{},"src\u002Fstyles\u002Fsite.css",", outside the theme, and wins over it.",[18,166,168],{"id":167},"make-it-the-clients","Make it the client's",[170,171,172,186,200,210],"ol",{},[173,174,175,179,180,182,183,185],"li",{},[176,177,178],"strong",{},"Colors."," Add a preset for the client's palette in ",[26,181,100],{},", with the same color names as the others, and import it in ",[26,184,56],{},". Don't edit a shipped preset: a new one keeps them to compare against.",[173,187,188,191,192,194,195,111,197,199],{},[176,189,190],{},"Fonts."," Put the font files in ",[26,193,127],{},", with their license text beside them, and name them in ",[26,196,121],{},[26,198,70],{},".",[173,201,202,205,206,111,208,199],{},[176,203,204],{},"Shape and space."," Change the radii, shadows and spacing in ",[26,207,80],{},[26,209,90],{},[173,211,212,215,216],{},[176,213,214],{},"Check"," the theme, then the built pages:",[217,218,223],"pre",{"className":219,"code":220,"language":221,"meta":222,"style":222},"language-bash shiki shiki-themes github-dark","npm run check:styles\nnpm run build\nnpm run check:styles -- --built\n","bash","",[26,224,225,241,251],{"__ignoreMap":222},[226,227,230,234,238],"span",{"class":228,"line":229},"line",1,[226,231,233],{"class":232},"svObZ","npm",[226,235,237],{"class":236},"sU2Wk"," run",[226,239,240],{"class":236}," check:styles\n",[226,242,244,246,248],{"class":228,"line":243},2,[226,245,233],{"class":232},[226,247,237],{"class":236},[226,249,250],{"class":236}," build\n",[226,252,254,256,258,261,265],{"class":228,"line":253},3,[226,255,233],{"class":232},[226,257,237],{"class":236},[226,259,260],{"class":236}," check:styles",[226,262,264],{"class":263},"sDLfK"," --",[226,266,267],{"class":263}," --built\n",[14,269,270,271,274,275,278,279,111,281,199],{},"Every color is a role, such as ",[26,272,273],{},"--color-surface"," or ",[26,276,277],{},"--color-accent",", so a change to a token changes it everywhere. Colors are written only in the color presets, and font names only in ",[26,280,70],{},[26,282,121],{},[18,284,286],{"id":285},"styling-hooks","Styling hooks",[14,288,289,290,293,294,111,297,300,301,304,305,308,309,318],{},"Every part of the kit's markup has an ",[26,291,292],{},"sk-"," class, such as ",[26,295,296],{},"sk-hero",[26,298,299],{},"sk-hero__title",". Variants and tones add modifier classes, such as ",[26,302,303],{},"sk-hero--page",", and states show as attributes, such as ",[26,306,307],{},"data-open"," on the menu. The theme styles these hooks, so a theme styles every section type, variant and tone, including the ones the site doesn't use yet. ",[310,311,315],"a",{"href":312,"rel":313},"https:\u002F\u002Fgithub.com\u002Fhostsmith\u002Fsite-kit-astro\u002Fblob\u002Fmain\u002Fpackages\u002Fsite-kit-astro\u002FHOOKS.md",[314],"nofollow",[26,316,317],{},"HOOKS.md"," lists them all.",[14,320,321,322,274,325,328,329,274,332,335],{},"The site's own markup, such as a custom page or a site section, uses Tailwind utilities built from the theme's tokens, such as ",[26,323,324],{},"bg-surface",[26,326,327],{},"text-h2",". The theme resets Tailwind's default colors, fonts, sizes, radii and shadows, so a class like ",[26,330,331],{},"bg-red-500",[26,333,334],{},"text-4xl"," renders nothing.",[18,337,339],{"id":338},"what-the-style-checks-report","What the style checks report",[14,341,342,345],{},[26,343,344],{},"npm run check:styles",", before the build, fails on:",[347,348,349,357,363,369],"ul",{},[173,350,351,352,111,354,356],{},"a color outside the color presets, or a font name outside ",[26,353,70],{},[26,355,121],{},";",[173,358,359,360,356],{},"an arbitrary Tailwind value, such as ",[26,361,362],{},"p-[13px]",[173,364,365,366,368],{},"an ",[26,367,292],{}," class the installed kit doesn't have;",[173,370,371,372,199],{},"a color preset whose color names differ from the others', or that fails one of the contrast pairs in the theme's ",[26,373,154],{},[14,375,376],{},"It warns about a hook that the kit deprecates, naming its replacement.",[14,378,379,382],{},[26,380,381],{},"npm run check:styles -- --built",", after the build, warns about hooks the built pages carry that the theme doesn't style, such as a new variant after a kit update, and about classes that no rule matches. The deploy workflow runs both checks on every push.",[18,384,386],{"id":385},"accessibility","Accessibility",[14,388,389,390,392],{},"The kit's markup has the landmarks, one ",[26,391,10],{}," per page, alternative text, keyboard use of the menu and the FAQ, and names for icon-only buttons. What only CSS can do is the theme's job: text contrast of at least 4.5:1, or 3:1 for large text, in every color scheme, a visible focus style, a skip link that shows on focus, buttons and header controls of at least 44 by 44 pixels, and no motion when a visitor asks for reduced motion.",[18,394,396],{"id":395},"another-examples-look","Another example's look",[14,398,399,400,111,402,404,405,410,411,199],{},"To give a site another example's look, copy that example's ",[26,401,28],{},[26,403,127],{}," at the release the site uses, then run the style checks. The README has ",[310,406,409],{"href":407,"rel":408},"https:\u002F\u002Fgithub.com\u002Fhostsmith\u002Fsite-kit-astro\u002Fblob\u002Fmain\u002FREADME.md#swapping-a-theme",[314],"the steps",", and ",[310,412,415],{"href":413,"rel":414},"https:\u002F\u002Fgithub.com\u002Fhostsmith\u002Fsite-kit-astro\u002Fblob\u002Fmain\u002FREADME.md#themes",[314],"everything about themes",[417,418,419],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":222,"searchDepth":243,"depth":243,"links":421},[422,423,424,425,426,427],{"id":20,"depth":243,"text":21},{"id":167,"depth":243,"text":168},{"id":285,"depth":243,"text":286},{"id":338,"depth":243,"text":339},{"id":385,"depth":243,"text":386},{"id":395,"depth":243,"text":396},"How a kit site's look works - a theme in the site's own files, its tokens and color presets, the kit's styling hooks, and the style checks.","md",null,{},"\u002Fdocs\u002Fsite-kit\u002Fdesign",{"title":5,"description":428},"docs\u002F4.site-kit\u002F04.design","2E-jvka4nRdDbD8X_ZcCvUv4-93IDiWTumGCp2Ojs2s",[437],{"title":438,"path":439,"stem":440,"children":441,"page":582},"Docs","\u002Fdocs","docs",[442,469,481,516,564],{"title":443,"path":444,"stem":445,"children":446,"page":-1,"icon":448},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started\u002Findex",[447,449,453,457,461,465],{"title":443,"path":444,"stem":445,"icon":448},"solar:rocket-bold",{"title":450,"path":451,"stem":452},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction",{"title":454,"path":455,"stem":456},"Quick Start","\u002Fdocs\u002Fgetting-started\u002Fquick-start","docs\u002F1.getting-started\u002F2.quick-start",{"title":458,"path":459,"stem":460},"Sites","\u002Fdocs\u002Fgetting-started\u002Fsites","docs\u002F1.getting-started\u002F3.sites",{"title":462,"path":463,"stem":464},"Custom Domains","\u002Fdocs\u002Fgetting-started\u002Fcustom-domains","docs\u002F1.getting-started\u002F4.custom-domains",{"title":466,"path":467,"stem":468},"Support","\u002Fdocs\u002Fgetting-started\u002Fsupport","docs\u002F1.getting-started\u002F5.support",{"title":470,"path":471,"stem":472,"children":473,"page":-1,"icon":475},"Integrations","\u002Fdocs\u002Fintegrations","docs\u002F2.integrations\u002Findex",[474,476],{"title":470,"path":471,"stem":472,"icon":475},"ph:usb-bold",{"title":477,"path":478,"stem":479,"icon":480},"n8n","\u002Fdocs\u002Fintegrations\u002Fn8n","docs\u002F2.integrations\u002F1.n8n","simple-icons:n8n",{"title":482,"path":483,"stem":484,"children":485,"page":-1,"icon":487},"MCP","\u002Fdocs\u002Fmcp","docs\u002F3.mcp\u002Findex",[486,488,492,496,500,504,508,512],{"title":482,"path":483,"stem":484,"icon":487},"solar:plug-circle-bold",{"title":489,"path":490,"stem":491},"Quick start","\u002Fdocs\u002Fmcp\u002Fquick-start","docs\u002F3.mcp\u002F1.quick-start",{"title":493,"path":494,"stem":495},"Clients","\u002Fdocs\u002Fmcp\u002Fclients","docs\u002F3.mcp\u002F2.clients",{"title":497,"path":498,"stem":499},"Authentication","\u002Fdocs\u002Fmcp\u002Fauthentication","docs\u002F3.mcp\u002F3.authentication",{"title":501,"path":502,"stem":503},"Tools","\u002Fdocs\u002Fmcp\u002Ftools","docs\u002F3.mcp\u002F4.tools",{"title":505,"path":506,"stem":507},"Recipes","\u002Fdocs\u002Fmcp\u002Frecipes","docs\u002F3.mcp\u002F5.recipes",{"title":509,"path":510,"stem":511},"Limits and errors","\u002Fdocs\u002Fmcp\u002Flimits-and-errors","docs\u002F3.mcp\u002F6.limits-and-errors",{"title":513,"path":514,"stem":515},"FAQ","\u002Fdocs\u002Fmcp\u002Ffaq","docs\u002F3.mcp\u002F7.faq",{"title":517,"path":518,"stem":519,"children":520,"page":-1,"icon":522},"Site kit","\u002Fdocs\u002Fsite-kit","docs\u002F4.site-kit\u002Findex",[521,523,527,531,535,536,540,544,548,552,556,560],{"title":517,"path":518,"stem":519,"icon":522},"solar:layers-bold",{"title":524,"path":525,"stem":526},"Overview","\u002Fdocs\u002Fsite-kit\u002Foverview","docs\u002F4.site-kit\u002F01.overview",{"title":528,"path":529,"stem":530},"Start a site","\u002Fdocs\u002Fsite-kit\u002Fstart-a-site","docs\u002F4.site-kit\u002F02.start-a-site",{"title":532,"path":533,"stem":534},"Content","\u002Fdocs\u002Fsite-kit\u002Fcontent","docs\u002F4.site-kit\u002F03.content",{"title":5,"path":432,"stem":434},{"title":537,"path":538,"stem":539},"Languages","\u002Fdocs\u002Fsite-kit\u002Flanguages","docs\u002F4.site-kit\u002F05.languages",{"title":541,"path":542,"stem":543},"Deploy with Hostsmith","\u002Fdocs\u002Fsite-kit\u002Fdeploy","docs\u002F4.site-kit\u002F06.deploy",{"title":545,"path":546,"stem":547},"Keep old URLs","\u002Fdocs\u002Fsite-kit\u002Fold-urls","docs\u002F4.site-kit\u002F07.old-urls",{"title":549,"path":550,"stem":551},"Work with an AI agent","\u002Fdocs\u002Fsite-kit\u002Fai-agents","docs\u002F4.site-kit\u002F08.ai-agents",{"title":553,"path":554,"stem":555},"Kit updates","\u002Fdocs\u002Fsite-kit\u002Fupdates","docs\u002F4.site-kit\u002F09.updates",{"title":557,"path":558,"stem":559},"Existing Astro sites","\u002Fdocs\u002Fsite-kit\u002Fexisting-astro-sites","docs\u002F4.site-kit\u002F10.existing-astro-sites",{"title":561,"path":562,"stem":563},"External CMS","\u002Fdocs\u002Fsite-kit\u002Fexternal-cms","docs\u002F4.site-kit\u002F11.external-cms",{"title":565,"path":566,"stem":567,"children":568,"page":-1,"icon":570},"Developers","\u002Fdocs\u002Fdevelopers","docs\u002F5.developers\u002Findex",[569,571,574,578],{"title":565,"path":566,"stem":567,"icon":570},"solar:code-bold",{"title":497,"path":572,"stem":573},"\u002Fdocs\u002Fdevelopers\u002Fauthentication","docs\u002F5.developers\u002F1.authentication",{"title":575,"path":576,"stem":577},"API Explorer","\u002Fdocs\u002Fdevelopers\u002Fapi-explorer","docs\u002F5.developers\u002F2.api-explorer",{"title":579,"path":580,"stem":581},"Node.js SDK","\u002Fdocs\u002Fdevelopers\u002Fsdk","docs\u002F5.developers\u002F3.sdk",false,[584,585],{"title":532,"path":533,"stem":534,"children":-1},{"title":537,"path":538,"stem":539,"children":-1},1792842401660]