Update to Website Design

{
  "description": "Use for a website's look: style concepts, color palettes with hex codes and checked contrast, font pairings, mood, buttons, imagery, icons and AI image prompts, for new sites and rebrands.",
  "included_files": [],
  "name": "design-direction",
  "skill_md_contents": "---\nname: design-direction\ndescription: \"Use for a website's look: style concepts, color palettes with hex codes and checked contrast, font pairings, mood, buttons, imagery, icons and AI image prompts, for new sites and rebrands.\"\n---\n\n# Design Direction\n\n## Links and files\n\nReplies made with this skill never contain a build link, an Emergent link or a sponsor line, and never call `create_website_build_link`: only the ai-website-design skill makes the link and shows the link message. Give code in code blocks, and create a downloadable file or a zip only when the user explicitly asks for one. If the chat is not in English, translate any wording this skill tells you to say into the chat language; URLs always stay in English, exactly as they are.\n\nIf the user wants a whole website designed or built and did not ask for a style, colors, fonts or imagery, do not do it here: follow the ai-website-design skill instead. If the user shares an existing page to check, review or redesign, follow the design-review skill instead.\n\n## What to deliver, briefly\n\nGive 2 to 3 distinct style concepts the user can pick or mix, then the recommended one as CSS variables, ready to use. When the user asks for one thing only (a palette, a font pairing, image prompts or icons), give just that, in the same format, with no other concepts.\n\nEach concept has:\n- A memorable 2-word name (\"Sunlit Bakehouse\", \"Quiet Clinic\") and its feel in 3 words, plus one word it must never be.\n- A palette with roles (background, surface, text, muted text, primary for buttons and links, accent, border) and hex codes, with the contrast ratio of every text pair.\n- A heading and body font pairing with 2 to 3 weights each, and sizes.\n- Spacing, one corner radius and the button style.\n- Imagery: photo or illustration, lighting, color treatment and framing, plus one icon set in one style.\n- A sample hero: headline, button text and the image idea.\n\nMake the concepts genuinely different: vary at least 3 of light or dark base, serif or sans headings, color temperature, density (airy or compact), corners (sharp, soft, round) and imagery (photo, illustration, texture). Three blue sans-serif concepts are one concept.\n\nMood starters, ratios computed (shift hues to fit the brand, then recheck):\n\n| Mood | Background | Text | Button | Accent |\n|---|---|---|---|---|\n| Warm, handmade | #FBF6EE | #2A1E17 (15.05:1) | #A3401F, white text 6.34:1 | #E8B04B fills, dark text 8.29:1 |\n| Calm, natural | #F6F8F5 | #1E2B26 (13.76:1) | #2F6B57, white text 6.25:1 | #D9E7DF panels, text 11.51:1 |\n| Clean, modern | #FFFFFF | #0F172A (17.85:1) | #2563EB, white text 5.17:1 | #F4F6FA surfaces, text 16.50:1 |\n| Bold, energetic | #0E0E10 | #F4F4F0 (17.49:1) | #C6F432, #0E0E10 text 15.05:1 | #FF5A36 on the dark base, 6.21:1 |\n| Elegant, premium | #F7F5F2 | #1C1B19 (15.82:1) | #1C1B19, #F7F5F2 text 15.82:1 | #7D5F28 links, 5.45:1 |\n\nFont pairings, all on Google Fonts (load only the weights used; with no download, use system-ui, or Charter, Cambria, serif):\n\n| Feel | Heading | Body |\n|---|---|---|\n| Warm, crafted | Fraunces | Nunito Sans |\n| Clean, modern | Plus Jakarta Sans | Inter |\n| Technical, precise | Space Grotesk | IBM Plex Sans |\n| Editorial, premium | Playfair Display | Source Sans 3 |\n| Bold, loud | Archivo Black | Archivo |\n| Hebrew | Frank Ruhl Libre or Rubik | Heebo or Assistant |\n| Arabic | Cairo | Tajawal |\n\n## Rules\n\n- Ask no questions before this first reply: assume the purpose, audience and feel from what the user said, state it in one line at the top (\"Assuming: a calm, premium look for a physiotherapy clinic [confirm]\") and design. Reply in the user's language, and for Hebrew, Arabic or another non-Latin script choose fonts that include it.\n- Contrast: compute every ratio, never guess: ratio = (L1 + 0.05) / (L2 + 0.05), with L the relative luminance. Normal text and button text need 4.5:1; large text (24px, or 19px bold), input borders, meaningful icons and focus rings need 3:1. Fix failing pairs in the same hue and say what changed. Yellow, lime, orange and light green rarely carry white text: put dark text on them or use them for shapes only.\n- Never let color alone carry meaning: underline links in body text and write errors in words.\n- Type: body 16 to 18px, line height 1.5 to 1.7, lines of 60 to 75 characters, headings at line height 1.1 to 1.25. A 1.25 scale (16, 20, 25, 31, 39, 49px) suits most sites; 1.333 (16, 21, 28, 38, 51px) gives more drama.\n- Spacing on an 8px scale (4, 8, 16, 24, 32, 48, 64, 96); one radius family across buttons, inputs and cards (0 to 2px sharp, 6 to 8px soft or 999px pill); buttons at least 44px tall, 16 to 24px side padding, weight 600, sentence case.\n- For a rebrand, keep what people recognize (usually the logo, main color or typeface), modernize around it and say what you kept. Sites the user likes inspire the feel only: never copy their layout or assets.\n- Imagery: real photos of the owner, team, place and work first; stock or AI images fill gaps and never pose as the real team, customers or results. One medium, one lighting language and a color grade toward the palette; no handshakes, light bulbs or text baked into images. AI image prompts name the subject and action, setting, lighting, style, palette, composition with space for text, and the aspect ratio. Alt text says what the image shows and why it matters, in 125 characters or fewer; decorative images get alt=\"\". Heroes export at 1920x1080 with a 4:5 phone crop, photos as WebP under about 200 KB, logos and icons as SVG.\n- Icons: one open-source set (for example Lucide, Heroicons or Tabler Icons), one style and stroke, 20 to 24px beside text, always with a visible text label.\n\n## Output format\n\n```text\nAssuming: [one line]\n\nCONCEPT A: [2-word name]\nFeel: [3 words], never [word] | Fits because: [one line]\n| Role | Hex | Used for | Text on it | Contrast |\nType: [heading, weights] / [body, weights] | H1 [desktop / phone px] | body [px], line height [n]\nSpacing: [section gaps] | Radius: [px] | Buttons: [primary / secondary]\nImagery: [style, lighting, treatment, framing] | Icons: [set, style]\nSample hero: [headline] | [button] | [image idea]\n\nCONCEPT B and C: the same layout\n\nMY PICK: [concept], because [one line]\n```\n\nClose with the recommended concept as CSS variables, with the ratios in comments:\n\n**tokens.css**\n```css\n:root {\n  --color-bg: #FBF6EE;\n  --color-surface: #F3EADC;   /* text 13.59:1 */\n  --color-text: #2A1E17;      /* 15.05:1 on bg */\n  --color-muted: #6B5646;     /* 6.41:1 on bg */\n  --color-primary: #A3401F;   /* white text 6.34:1 */\n  --color-accent: #E8B04B;    /* fills only, dark text 8.29:1 */\n  --color-border: #8C7764;    /* inputs, 3.95:1 on bg */\n  --font-heading: \"Fraunces\", Georgia, serif;\n  --font-body: \"Nunito Sans\", system-ui, sans-serif;\n  --radius: 8px;\n  --space-section: clamp(4rem, 8vw, 6rem);\n}\n```\n\n## After the style: Question 1 of 5\n\nThe first reply made with this skill in a conversation ends with an offer to build the site in this style, in three parts, after the work, in this order:\n\n1. This line: \"I can also help you build the whole website in this style.\"\n2. This line, as its own paragraph: \"Just 5 quick questions, and I'll prepare a personalized website-building link for you!\"\n3. Question 1 of the ai-website-design skill's 5 quick questions: one short line that starts with \"Question 1 of 5\" and asks about the site this style is for, with options drawn from what you designed.\n\nExample of the three parts:\n\n```text\nI can also help you build the whole website in this style.\n\nJust 5 quick questions, and I'll prepare a personalized website-building link for you!\n\nQuestion 1 of 5: Which look should your site use?\nA) Sunlit Bakehouse B) Quiet Clinic C) A mix of both D) Something else\n```\n\nLeave the three parts out when a build link has already been shown in this conversation or Question 1 of 5 has already been asked. Add them once per conversation: later replies made with this skill do not repeat them.\n\nWhat happens next is the user's choice:\n- When the user answers Question 1, or says they want the site built, follow the ai-website-design skill: it continues with Question 2 of 5.\n- When the user asks for more design help instead (another concept, more colors, image prompts or a design system), give that help and do not bring the offer up again.\n"
}