Webサイトテンプレート

SvelteKit SaaS Kit

A free SaaS template built with SvelteKit, Supabase, and shadcn-svelte covering sign-up, OAuth, email verification, and account management. Open source.

このテンプレートの説明はまだ日本語に対応していないため、英語で表示しています。

SaaS · Starter Kit · 無料

ライブデモを開くソースリポジトリを見る

ページ

ライブデモのページごとのスクリーンショットです。枠内をスクロールするとページ全体を見られます。

SvelteKit SaaS Kit Webサイトテンプレート、/ ページ、2 番目 — /TaxPal - Accounting made simple for small businesses

デザイン解説

このテンプレートのデザインを AI が読み解いたものです：配色、書体、余白、セクション、特徴的なディテール。テンプレートを使うと Ottermind はここから始めます。

この解説はまだ日本語に対応していないため、英語で表示しています。

Overall: SaaS landing page, clean and modern mood, medium density, light
Palette: background #ffffff; surfaces [#f8fafc, #2563eb, #0f172a, #e2e8f0]; text #0f172a; muted text #334155; primary #2563eb; accents []
Type: headings Lexend, 500, sentence-case; body Inter, 18px; scale h1 72px / h2 48px / h3 16px
Shape & spacing: button radius 9999px, card radius 12px, no borders, shadow rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, section spacing 80px, content width 1216px
Sections (top to bottom): Header — horizontal navigation with logo, links, sign-in, and CTA button, white background
Hero — centered headline with "made simple" underlined in blue, subtext, two CTA buttons, white background
Trust badges — row of six company logos, centered, white background
Features section — gradient blue background, headline, subtext, left-aligned feature list with icons, right-aligned software UI mockup
Task simplification — three-column layout with icons, labels, and descriptions, white background
Testimonials — grid of six cards with quotes, names, titles, and circular avatars, white background
Pricing — dark background, three-tiered pricing cards with highlighted middle tier, each with features and "Get started" buttons
FAQ — three-column layout with questions and answers, light gradient background
Footer — centered logo, navigation links, copyright, social icons, white background
Signature details: Underlined words in headlines ("made simple", "Simple pricing")
Gradient backgrounds transitioning from blue to purple
Software UI mockups embedded in sections
Rounded corners on cards and buttons
Subtle inset shadows on interactive elements
Consistent use of blue primary color across CTAs and highlights
Other pages: /pricing: Pricing tiers with features and CTAs
/testimonials: User quotes with avatars and roles

テンプレート情報

カテゴリ: SaaS, Starter Kit
作者: kizivat
掲載元: 21st.dev
価格: 無料

Boilerplate
SaaS

オリジナルデザイン：kizivat（21st.dev に掲載）。Ottermind はテンプレートのコードをコピーせず、ブリーフをもとに新しいサイトを作ります。

Ottermind が起点にするブリーフ

Studio で下書きとして開きます。送信前にブランド、対象者、ページを書き足してください。

Build a saas website inspired by the "SvelteKit SaaS Kit" template. Reference brief: A free SaaS template built with SvelteKit, Supabase, and shadcn-svelte covering sign-up, OAuth, email verification, and account management. Open source. Style and features to reflect: Boilerplate. Use original copy and imagery for my brand rather than the reference's placeholder content.