Edit Welcome Screen

Name

Also known as (comma separated)

Brief definition Introductory view for new users.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Welcome to Clydeford" }, { "id": "subheading", "type": "text", "label": "Subheading", "default": "Let's get your workspace set up in under two minutes." }, { "id": "ctaLabel", "type": "text", "label": "Primary action label", "default": "Get started" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "layout", "type": "select", "label": "Layout", "default": "centered", "options": [ "centered", "split", "minimal" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"ws ws--{{layout}}\" style=\"--accent:{{accent}};\">\n <div class=\"ws__art\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 64 64\" width=\"56\" height=\"56\"><circle cx=\"32\" cy=\"32\" r=\"30\" fill=\"var(--accent)\" opacity=\"0.25\"/><circle cx=\"32\" cy=\"26\" r=\"12\" fill=\"var(--accent)\"/><rect x=\"16\" y=\"42\" width=\"32\" height=\"14\" rx=\"7\" fill=\"var(--accent)\" opacity=\"0.6\"/></svg>\n </div>\n <div class=\"ws__copy\">\n <h1 class=\"ws__heading\">{{heading}}</h1>\n <p class=\"ws__sub\">{{subheading}}</p>\n <div class=\"ws__actions\">\n <button type=\"button\" class=\"ws__cta\">{{ctaLabel}}</button>\n <a href=\"#\" class=\"ws__skip\">Skip for now</a>\n </div>\n </div>\n</div>\n<style>\n.ws { font: 16px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 28px; width: 420px; border-radius: 16px; border: 1px solid #24143018; box-sizing: border-box; }\n.ws--centered { display: flex; flex-direction: column; align-items: center; text-align: center; }\n.ws--split { display: flex; align-items: center; gap: 20px; text-align: left; }\n.ws--minimal { display: flex; align-items: center; gap: 14px; padding: 18px 22px; text-align: left; }\n.ws--minimal .ws__art svg { width: 36px; height: 36px; }\n.ws__art { margin-bottom: 16px; flex-shrink: 0; }\n.ws--split .ws__art, .ws--minimal .ws__art { margin-bottom: 0; }\n.ws__heading { margin: 0 0 8px; font-size: 22px; font-weight: 800; }\n.ws--minimal .ws__heading { font-size: 16px; margin-bottom: 2px; }\n.ws__sub { margin: 0 0 18px; font-size: 13.5px; color: #241430b3; }\n.ws--minimal .ws__sub { margin-bottom: 0; display: none; }\n.ws__actions { display: flex; align-items: center; gap: 14px; }\n.ws--centered .ws__actions { flex-direction: column; }\n.ws--minimal .ws__actions { margin-left: auto; }\n.ws__cta { background: var(--accent); border: 1.5px solid var(--accent); border-radius: 9px; padding: 10px 20px; font-size: 14px; font-weight: 700; cursor: pointer; }\n.ws__skip { font-size: 12.5px; color: #24143090; text-decoration: none; }\n.ws__skip:hover, .ws__skip:focus-visible { text-decoration: underline; }\n</style>", "tailwind": "<div class=\"ws-tw ws-tw--{{layout}} w-[420px] p-7 rounded-2xl border border-[#24143018] bg-[#FAF7F2] text-[#241430] font-sans box-border\">\n <div class=\"ws-tw__art mb-4 shrink-0\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 64 64\" width=\"56\" height=\"56\"><circle cx=\"32\" cy=\"32\" r=\"30\" style=\"fill:{{accent}}\" opacity=\"0.25\"/><circle cx=\"32\" cy=\"26\" r=\"12\" style=\"fill:{{accent}}\"/><rect x=\"16\" y=\"42\" width=\"32\" height=\"14\" rx=\"7\" style=\"fill:{{accent}}\" opacity=\"0.6\"/></svg>\n </div>\n <div class=\"ws-tw__copy\">\n <h1 class=\"m-0 mb-2 text-[22px] font-extrabold\">{{heading}}</h1>\n <p class=\"m-0 mb-4.5 text-[13.5px] text-[#241430]/70\">{{subheading}}</p>\n <div class=\"ws-tw__actions flex items-center gap-3.5\">\n <button type=\"button\" class=\"rounded-lg px-5 py-2.5 text-sm font-bold\" style=\"background:{{accent}};border:1.5px solid {{accent}}\">{{ctaLabel}}</button>\n <a href=\"#\" class=\"text-xs text-[#24143090] no-underline hover:underline\">Skip for now</a>\n </div>\n </div>\n</div>\n<style>\n.ws-tw--centered { display: flex; flex-direction: column; align-items: center; text-align: center; }\n.ws-tw--centered .ws-tw__actions { flex-direction: column; }\n.ws-tw--split { display: flex; align-items: center; gap: 20px; text-align: left; }\n.ws-tw--minimal { display: flex; align-items: center; gap: 14px; padding: 18px 22px !important; text-align: left; }\n.ws-tw--minimal .ws-tw__art svg { width: 36px; height: 36px; }\n.ws-tw--minimal p { display: none; }\n.ws-tw--minimal h1 { font-size: 16px; margin-bottom: 2px; }\n.ws-tw--minimal .ws-tw__actions { margin-left: auto; }\n</style>", "react": "export function WelcomeScreen({\n heading = \"{{heading}}\",\n subheading = \"{{subheading}}\",\n ctaLabel = \"{{ctaLabel}}\",\n accent = \"{{accent}}\",\n layout = \"{{layout}}\",\n}) {\n const outer = {\n centered: { display: \"flex\", flexDirection: \"column\", alignItems: \"center\", textAlign: \"center\" },\n split: { display: \"flex\", alignItems: \"center\", gap: 20, textAlign: \"left\" },\n minimal: { display: \"flex\", alignItems: \"center\", gap: 14, padding: \"18px 22px\", textAlign: \"left\" },\n }[layout] ?? {};\n const minimal = layout === \"minimal\";\n return (\n <div style={{ font: \"16px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 28, width: 420, borderRadius: 16, border: \"1px solid #24143018\", boxSizing: \"border-box\", ...outer }}>\n <div aria-hidden=\"true\" style={{ marginBottom: minimal || layout === \"split\" ? 0 : 16, flexShrink: 0 }}>\n <svg viewBox=\"0 0 64 64\" width={minimal ? 36 : 56} height={minimal ? 36 : 56}>\n <circle cx=\"32\" cy=\"32\" r=\"30\" fill={accent} opacity=\"0.25\" />\n <circle cx=\"32\" cy=\"26\" r=\"12\" fill={accent} />\n <rect x=\"16\" y=\"42\" width=\"32\" height=\"14\" rx=\"7\" fill={accent} opacity=\"0.6\" />\n </svg>\n </div>\n <div>\n <h1 style={{ margin: minimal ? \"0 0 2px\" : \"0 0 8px\", fontSize: minimal ? 16 : 22, fontWeight: 800 }}>{heading}</h1>\n {!minimal && <p style={{ margin: \"0 0 18px\", fontSize: 13.5, color: \"#241430b3\" }}>{subheading}</p>}\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 14, flexDirection: layout === \"centered\" ? \"column\" : \"row\", marginLeft: minimal ? \"auto\" : 0 }}>\n <button type=\"button\" style={{ background: accent, border: \"1.5px solid \" + accent, borderRadius: 9, padding: \"10px 20px\", fontSize: 14, fontWeight: 700, cursor: \"pointer\" }}>{ctaLabel}</button>\n <a href=\"#\" style={{ fontSize: 12.5, color: \"#24143090\", textDecoration: \"none\" }}>Skip for now</a>\n </div>\n </div>\n </div>\n );\n}" }