Slab
Slab is the neo-brutalist SaaS theme — a landing page with an opinion. 3px ink borders, hard offset shadows, flat clashing block colors (no gradients), tactile press buttons, and a fake product-window hero with a live-looking chart. Best for SaaS startups, indie tools, developer products, and bootstrapped founders who want personality instead of the blue-gradient sameness.
| Property | Value |
|---|---|
| Tier | Pro ($39 launch / $49 reg.) |
| Category | SaaS / startup |
| Body font | Archivo Variable |
| Display font | Archivo Variable (800 weight, tight) |
| Mono font | Space Mono (kickers, labels, chart numerals) |
| Brand accent | Clashing block palette — cobalt / acid / bubble / lime / grape / tangerine |
Included pages
Section titled “Included pages”/— homepage: product-window hero, logo marquee, feature blocks, how-it-works, tabbed “see it in action”, stats, integrations, pricing, testimonials, FAQ, newsletter/pricing/— 3-tier pricing with a featured-middle highlight/about/— story + team/blog/and/blog/[slug]/— changelog/blog index + post pages/contact/— form + contact-channel cards/sections/— live gallery of all 16 sections with copy-paste snippets/privacy/,/terms/,/404
What makes Slab different
Section titled “What makes Slab different”- Neo-brutalist system — 3px ink borders, hard offset shadows, and flat block colors used as solid fills, never gradients or soft drop-shadows.
- Tactile press buttons — primary buttons sit on an offset shadow and physically translate down into it on click, so the whole UI feels built and physical.
- Fake product-window hero — a framed
app.slab.cowindow with a live-looking bar chart, activation metric, and live/cookie pills does the trust-building work a product screenshot normally would. - Seamless logo marquee — clones items until the track exceeds the viewport, then mirrors for a true
-50%loop with no gap or snap on any width. Pauses on hover, respectsprefers-reduced-motion. - Tabbed “see it in action” — switchable panels swap synced copy + a window mock + chart to show different product surfaces.
What’s next
Section titled “What’s next”- Configure → site.ts — every visible string, link, pricing tier, logo, and contact channel flows from this one file.
- Customize → Colors — the clashing block palette lives in
src/styles/global.css(--color-cobalt,--color-acid, …). Swap those tokens to rebrand the whole theme. - Configure → Forms — set
contactForm.provider(Formspree / FormSubmit / Netlify) andnewsletter.provider(Mailchimp / ConvertKit / Buttondown) insite.ts. - Customize → Pages — changelog/blog posts live as Markdown in
src/content/blog/.