Centered Classic
The artisanal SaaS hero — eyebrow, serif headline, prose subhead, a single deep-terracotta primary CTA flanked by a quiet ghost button. Sage on warm cream, the small-batch tools-for-makers aesthetic.
The code
<section class="hs-cls" aria-label="Hero">
<div class="hs-cls-inner">
<span class="hs-cls-eye">— A new kind of workspace</span>
<h2>Make small things <em>that matter.</em></h2>
<p>
The toolkit for craftspeople who treat the work, the customer, and the calendar with the same
care.
</p>
<div class="hs-cls-cta">
<a class="hs-cls-btn hs-cls-btn-pri" href="#start">Start free trial →</a>
<a class="hs-cls-btn" href="#tour">Watch the tour</a>
</div>
<p class="hs-cls-foot">Free for 14 days · no card · cancel any time</p>
</div>
</section> <section class="hs-cls" aria-label="Hero">
<div class="hs-cls-inner">
<span class="hs-cls-eye">— A new kind of workspace</span>
<h2>Make small things <em>that matter.</em></h2>
<p>
The toolkit for craftspeople who treat the work, the customer, and the calendar with the same
care.
</p>
<div class="hs-cls-cta">
<a class="hs-cls-btn hs-cls-btn-pri" href="#start">Start free trial →</a>
<a class="hs-cls-btn" href="#tour">Watch the tour</a>
</div>
<p class="hs-cls-foot">Free for 14 days · no card · cancel any time</p>
</div>
</section>.hs-cls {
display: grid; place-items: center;
width: 100%; min-height: 480px;
padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 56px);
background:
radial-gradient(60% 80% at 50% 0%, rgba(200,160,120,0.18), transparent 70%),
#f5f1e6;
font-family: 'Cormorant Garamond', 'Georgia', serif;
color: #2d3a2e;
box-sizing: border-box;
}
.hs-cls-inner { max-width: 640px; text-align: center; }
.hs-cls-eye {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; letter-spacing: 0.18em;
color: #6b7d5a; margin-bottom: 18px;
}
.hs-cls h2 {
margin: 0 0 18px;
font-size: clamp(36px, 6vw, 60px);
font-weight: 600; letter-spacing: -0.02em; line-height: 1.05;
color: #1a2418;
}
.hs-cls h2 em { color: #c8553d; font-style: italic; }
.hs-cls p {
margin: 0 auto 28px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px; line-height: 1.6;
color: #4a5447; max-width: 460px;
}
.hs-cls-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.hs-cls-btn {
display: inline-block; padding: 13px 22px; border-radius: 4px;
font-family: 'Inter', sans-serif;
font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
text-decoration: none;
transition: transform 0.18s, background 0.18s;
}
.hs-cls-btn-pri { background: #c8553d; color: #fff8ed; box-shadow: 0 2px 0 #8d3a25; }
.hs-cls-btn-pri:hover { transform: translateY(-1px); background: #b94a32; }
.hs-cls-btn { background: transparent; color: #2d3a2e; border: 1px solid #2d3a2e; }
.hs-cls-btn:hover { background: #2d3a2e; color: #f5f1e6; }
.hs-cls-foot {
font-family: 'JetBrains Mono', monospace !important;
font-size: 11px !important; color: #8a9080 !important;
margin: 0 !important; max-width: none !important;
letter-spacing: 0.04em;
}
@media (prefers-reduced-motion: reduce) {
.hs-cls-btn { transition: none; }
} .hs-cls {
display: grid; place-items: center;
width: 100%; min-height: 480px;
padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 56px);
background:
radial-gradient(60% 80% at 50% 0%, rgba(200,160,120,0.18), transparent 70%),
#f5f1e6;
font-family: 'Cormorant Garamond', 'Georgia', serif;
color: #2d3a2e;
box-sizing: border-box;
}
.hs-cls-inner { max-width: 640px; text-align: center; }
.hs-cls-eye {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; letter-spacing: 0.18em;
color: #6b7d5a; margin-bottom: 18px;
}
.hs-cls h2 {
margin: 0 0 18px;
font-size: clamp(36px, 6vw, 60px);
font-weight: 600; letter-spacing: -0.02em; line-height: 1.05;
color: #1a2418;
}
.hs-cls h2 em { color: #c8553d; font-style: italic; }
.hs-cls p {
margin: 0 auto 28px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px; line-height: 1.6;
color: #4a5447; max-width: 460px;
}
.hs-cls-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.hs-cls-btn {
display: inline-block; padding: 13px 22px; border-radius: 4px;
font-family: 'Inter', sans-serif;
font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
text-decoration: none;
transition: transform 0.18s, background 0.18s;
}
.hs-cls-btn-pri { background: #c8553d; color: #fff8ed; box-shadow: 0 2px 0 #8d3a25; }
.hs-cls-btn-pri:hover { transform: translateY(-1px); background: #b94a32; }
.hs-cls-btn { background: transparent; color: #2d3a2e; border: 1px solid #2d3a2e; }
.hs-cls-btn:hover { background: #2d3a2e; color: #f5f1e6; }
.hs-cls-foot {
font-family: 'JetBrains Mono', monospace !important;
font-size: 11px !important; color: #8a9080 !important;
margin: 0 !important; max-width: none !important;
letter-spacing: 0.04em;
}
@media (prefers-reduced-motion: reduce) {
.hs-cls-btn { transition: none; }
}