<!DOCTYPE html>
<html class="en-GB">
<head>
<title>Beautiful looking themes for your Rails app</title>
<meta name="description" content="Sjabloon comes with three beautiful custom themes. Just like everything else in Sjabloon, the themes are custom designed in-house. All designed with the modern SaaS app in mind and all easy to customise to fit your product." />
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="n4xcNkCB1L2vN3dvnygG/dRYT+DCDRw0JVuVCcvo84VYtvrlNc/OmBPMZyoBznp0rLfxRrpbqlXGkW8ZJZKyJQ==" />
<script src="https://js.stripe.com/v3/"></script>
<meta property="og:site_name" content="Sjabloon">
<meta property="og:title" content="Beautiful looking themes for your Rails app" />
<meta property="og:description" content="Sjabloon comes with three beautiful custom themes. Just like everything else in Sjabloon, the themes are custom designed in-house. All designed with the modern SaaS app in mind and all easy to customise to fit your product.">
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.getsjabloon.com/features/beautiful-themes" />
<meta property="og:image" content="https://www.getsjabloon.com/packs/media/images/social-483fb4efa20beb2655befb29d65850d1.jpg"></meta>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ntscHQ">
<meta name="twitter:domain" value="getsjabloon.com" />
<meta name="twitter:title" value="Beautiful looking themes for your Rails app" />
<meta name="twitter:description" value="Sjabloon comes with three beautiful custom themes. Just like everything else in Sjabloon, the themes are custom designed in-house. All designed with the modern SaaS app in mind and all easy to customise to fit your product." />
<meta property="twitter:image" content="https://www.getsjabloon.com/packs/media/images/social-483fb4efa20beb2655befb29d65850d1.jpg"></meta>
<meta name="twitter:url" value="https://www.getsjabloon.com/features/beautiful-themes" />
<meta property="og:logo" content="https://www.getsjabloon.com/logo.jpg" />
<script src="/packs/js/application-52108bb48a94ea445faf.js" data-turbolinks-track="reload"></script>
<link rel="stylesheet" media="screen" href="/packs/css/application-49f7a508.css" data-turbolinks-track="reload" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="6ZvJ4u5D3MhqQhHVjdjAzRUq66Za_Xez7zSLX7tJ-E0" />
</head>
<body class="">
<div class="site-announcement" data-controller="site-announcements" data-target="site-announcements.banner" data-site-announcements-id="37" data-site-announcements-site-name="sjabloon">
<span class="site-announcement__badge site-announcement__badge--#{last_announcement.announcement_type}">
news
</span>
<a class="site-announcement__title" href="https://railsdesigner.com/">Professionally designed UI components to build your next Ruby on Rails app even faster</a>
<a class="site-announcement__action" href="https://railsdesigner.com/">Check it out</a>
<button class="site-announcement__close" data-action="click->site-announcements#dismiss">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="site-announcement__close-icon"> <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd"> <g id="icon-shape"> <polygon id="Combined-Shape" points="10 8.58578644 2.92893219 1.51471863 1.51471863 2.92893219 8.58578644 10 1.51471863 17.0710678 2.92893219 18.4852814 10 11.4142136 17.0710678 18.4852814 18.4852814 17.0710678 11.4142136 10 18.4852814 2.92893219 17.0710678 1.51471863 10 8.58578644"></polygon> </g> </g> </svg>
</button>
</div>
<nav class="justify-between text-sm leading-tight nav" data-controller="navigation" data-target="navigation.component" data-action="scroll@window->navigation#onScroll">
<a class="inline-flex" href="/">
<svg width="30" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><title>logo</title><defs><linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="a"><stop stop-color="#00CAFF" offset="0%"/><stop stop-color="#009AFF" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><circle fill="url(#a)" cx="100" cy="100" r="100"/><path d="M126.412 145.011v16.379H72.565v-16.379H46L83.558 39h35.136l37.356 106.011h-29.638zm-7.464-24.006L102.54 64.847l-16.267 56.158h32.676z" fill="#FFF"/></g></svg>
</a>
<div class="nav__items" data-target="navigation.items">
<a class="nav__item nav__link" href="/login">log in</a>
</div>
<span role="link" class="navigation__item navigation__toggle" data-target="navigation.toggle" data-action="click->navigation#toggle">menu</span>
</nav>
<div class="overflow-hidden hero">
<div class="container hero__content">
<span class="feature-hero__tag">Feature</span>
<h1 class="feature-hero__heading">
Beautiful and custom-designed themes
</h1>
<p class="feature-hero__intro">Sjabloon comes with three custom-designed themes for you to choose from. Beautiful and modern layouts that are fully responsive. And since it's built with Tailwind, you can change each element and component to really easily fit your next product even more.</p>
</div>
<div data-controller="tabs">
<div class="w-full overflow-y-auto bg-gray-800 bg-no-repeat bg-cover shadow-lg chrome-wrapper" style="max-width: 120rem; height: 30rem">
<img class="" data-target="tabs.panel" src="/packs/media/images/features/theme-default-preview-86393d191a4d6f986ea463ee9cba32c2.jpg" />
<img class="" data-target="tabs.panel" src="/packs/media/images/features/theme-indigo-preview-d9760e44444a45140d028b6f4899610b.jpg" />
<img class="" data-target="tabs.panel" src="/packs/media/images/features/theme-red-preview-7a63f813ccd8d8d89464fd3f9b67e4c0.jpg" />
</div>
<div class="mt-20 text-center">
<button class="p-2 font-bold text-blue-500 bg-blue-100 rounded hover:text-blue-600" data-target="tabs.tab" data-action="click->tabs#change">Default theme</button>
<button class="p-2 mx-4 font-bold text-indigo-500 bg-indigo-100 rounded hover:text-indigo-600" data-target="tabs.tab" data-action="click->tabs#change">Indigo theme</button>
<button class="p-2 font-bold text-red-500 bg-red-100 rounded hover:text-red-600" data-target="tabs.tab" data-action="click->tabs#change">Red theme</button>
</div>
</div>
</div>
<div class="max-w-2xl mx-auto mt-16">
<h2 class="mt-6 mb-1 text-xl font-bold">Default theme</h2>
<div class="flex flex-row-reverse flex-col sm:flex-row">
<p class="w-full mb-8 sm:w-3/5 sm:pr-8">The theme Sjabloon more or less launched with. It has been updated to be improved on various parts since. It adds an interactive part, built with Stimulus, to show multiple features of your app. It is a solid choice for any SaaS marketing website.</p>
<img class="w-full sm:w-2/5 h-full p-4 border border-gray-200 rounded" src="https://www.getsjabloon.com/packs/media/images/dashboard/theme-default-a3ee3d21b42c3f79b4d4af5ce6c160ab.jpg" />
</div>
<h2 class="mt-6 mb-1 text-xl font-bold">Indigo theme</h2>
<div class="flex flex-row-reverse flex-col sm:flex-row">
<p class="w-full mb-8 sm:w-3/5 sm:pr-8">The indigo theme is a light theme that gives a place to show your app front-and-centre at the top of the hero section. Down below is a placeholder for your a product tour video and also an interactive component for your customer's testimonials. </p>
<img class="w-full sm:w-2/5 h-full p-4 border border-gray-200 rounded" src="https://www.getsjabloon.com/packs/media/images/dashboard/theme-indigo-8edc84f19538a91598991af57c192577.jpg" />
</div>
<h2 class="mt-6 mb-1 text-xl font-bold">Red theme</h2>
<div class="flex flex-row-reverse flex-col sm:flex-row">
<p class="w-full mb-8 sm:w-3/5 sm:pr-8">The red theme is possibly the most bold theme of the three. It spots bright background uses and some funky skewed UI elements giving you enough space to showcase your product’s UI. This theme uses the <a href='https://rsms.me/inter/' target='_blank'>Inter typeface</a>.</p>
<img class="w-full sm:w-2/5 h-full p-4 border border-gray-200 rounded" src="https://www.getsjabloon.com/packs/media/images/dashboard/theme-red-9e4d3b47f386f613a49f7fc293a578a3.jpg" />
</div>
</div>
<footer class="footer-wrapper">
</footer>
<script async defer data-domain="getsjabloon.com" src="https://plausible.io/js/plausible.js"></script>
</body>
</html>