Welcome Screen

Introductory view for new users.

html

<div class="ws ws--centered" style="--accent:#F5C2E0;">
  <div class="ws__art" aria-hidden="true">
    <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>
  </div>
  <div class="ws__copy">
    <h1 class="ws__heading">Welcome to Clydeford</h1>
    <p class="ws__sub">Let&#39;s get your workspace set up in under two minutes.</p>
    <div class="ws__actions">
      <button type="button" class="ws__cta">Get started</button>
      <a href="#" class="ws__skip">Skip for now</a>
    </div>
  </div>
</div>
<style>
.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; }
.ws--centered { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ws--split { display: flex; align-items: center; gap: 20px; text-align: left; }
.ws--minimal { display: flex; align-items: center; gap: 14px; padding: 18px 22px; text-align: left; }
.ws--minimal .ws__art svg { width: 36px; height: 36px; }
.ws__art { margin-bottom: 16px; flex-shrink: 0; }
.ws--split .ws__art, .ws--minimal .ws__art { margin-bottom: 0; }
.ws__heading { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.ws--minimal .ws__heading { font-size: 16px; margin-bottom: 2px; }
.ws__sub { margin: 0 0 18px; font-size: 13.5px; color: #241430b3; }
.ws--minimal .ws__sub { margin-bottom: 0; display: none; }
.ws__actions { display: flex; align-items: center; gap: 14px; }
.ws--centered .ws__actions { flex-direction: column; }
.ws--minimal .ws__actions { margin-left: auto; }
.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; }
.ws__skip { font-size: 12.5px; color: #24143090; text-decoration: none; }
.ws__skip:hover, .ws__skip:focus-visible { text-decoration: underline; }
</style>

tailwind

<div class="ws-tw ws-tw--centered w-[420px] p-7 rounded-2xl border border-[#24143018] bg-[#FAF7F2] text-[#241430] font-sans box-border">
  <div class="ws-tw__art mb-4 shrink-0" aria-hidden="true">
    <svg viewBox="0 0 64 64" width="56" height="56"><circle cx="32" cy="32" r="30" style="fill:#F5C2E0" opacity="0.25"/><circle cx="32" cy="26" r="12" style="fill:#F5C2E0"/><rect x="16" y="42" width="32" height="14" rx="7" style="fill:#F5C2E0" opacity="0.6"/></svg>
  </div>
  <div class="ws-tw__copy">
    <h1 class="m-0 mb-2 text-[22px] font-extrabold">Welcome to Clydeford</h1>
    <p class="m-0 mb-4.5 text-[13.5px] text-[#241430]/70">Let&#39;s get your workspace set up in under two minutes.</p>
    <div class="ws-tw__actions flex items-center gap-3.5">
      <button type="button" class="rounded-lg px-5 py-2.5 text-sm font-bold" style="background:#F5C2E0;border:1.5px solid #F5C2E0">Get started</button>
      <a href="#" class="text-xs text-[#24143090] no-underline hover:underline">Skip for now</a>
    </div>
  </div>
</div>
<style>
.ws-tw--centered { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ws-tw--centered .ws-tw__actions { flex-direction: column; }
.ws-tw--split { display: flex; align-items: center; gap: 20px; text-align: left; }
.ws-tw--minimal { display: flex; align-items: center; gap: 14px; padding: 18px 22px !important; text-align: left; }
.ws-tw--minimal .ws-tw__art svg { width: 36px; height: 36px; }
.ws-tw--minimal p { display: none; }
.ws-tw--minimal h1 { font-size: 16px; margin-bottom: 2px; }
.ws-tw--minimal .ws-tw__actions { margin-left: auto; }
</style>

react

export function WelcomeScreen({
  heading = "Welcome to Clydeford",
  subheading = "Let's get your workspace set up in under two minutes.",
  ctaLabel = "Get started",
  accent = "#F5C2E0",
  layout = "centered",
}) {
  const outer = {
    centered: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center" },
    split: { display: "flex", alignItems: "center", gap: 20, textAlign: "left" },
    minimal: { display: "flex", alignItems: "center", gap: 14, padding: "18px 22px", textAlign: "left" },
  }[layout] ?? {};
  const minimal = layout === "minimal";
  return (
    <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 }}>
      <div aria-hidden="true" style={{ marginBottom: minimal || layout === "split" ? 0 : 16, flexShrink: 0 }}>
        <svg viewBox="0 0 64 64" width={minimal ? 36 : 56} height={minimal ? 36 : 56}>
          <circle cx="32" cy="32" r="30" fill={accent} opacity="0.25" />
          <circle cx="32" cy="26" r="12" fill={accent} />
          <rect x="16" y="42" width="32" height="14" rx="7" fill={accent} opacity="0.6" />
        </svg>
      </div>
      <div>
        <h1 style={{ margin: minimal ? "0 0 2px" : "0 0 8px", fontSize: minimal ? 16 : 22, fontWeight: 800 }}>{heading}</h1>
        {!minimal && <p style={{ margin: "0 0 18px", fontSize: 13.5, color: "#241430b3" }}>{subheading}</p>}
        <div style={{ display: "flex", alignItems: "center", gap: 14, flexDirection: layout === "centered" ? "column" : "row", marginLeft: minimal ? "auto" : 0 }}>
          <button type="button" style={{ background: accent, border: "1.5px solid " + accent, borderRadius: 9, padding: "10px 20px", fontSize: 14, fontWeight: 700, cursor: "pointer" }}>{ctaLabel}</button>
          <a href="#" style={{ fontSize: 12.5, color: "#24143090", textDecoration: "none" }}>Skip for now</a>
        </div>
      </div>
    </div>
  );
}