The Starvard Template · Version 1
This page is the template. Not a picture of it, not a promise about it: the actual layout, colors, type, and spacing we use across Starvard, live in your browser. If a page of ours ever looks different from this, this page is the standard it is measured against.
Illustration by Starvard (AI)
Everything in the template serves these. When two of them fight, the earlier one wins.
A page must earn its place. If the content is dull, no layout will save it, so the template assumes the words and pictures are worth a stranger's minute and gets out of their way.
Each band of the page does one job and then stops. Readers scroll through arguments, not piles. White space is not emptiness; it is the punctuation.
Our house target is three quarters of a second, half a second on a good day. System fonts, small images, no framework tax. A beautiful page that loads slowly is a slow page with makeup on.
Georgia, the serif, speaks for the soul: headlines and long reading. The system sans speaks for the machine: buttons, labels, navigation. Both already live on your device, so nothing is downloaded and nothing jumps around while loading.
Navy carries structure and trust. Gold marks the one thing that matters most on the screen. Ivory warms the cards. That is the whole palette, and restraint is what makes it read as expensive.
No popups, no sticky bars eating the page, no dark patterns, no pretending. Prices, limits, and caveats in plain words, and an accuracy note in the footer of every page. Trust is the brand.
Every specimen below is rendered with the template's real values, the same ones running this page. Copy them exactly and your page will feel like ours.
Headlines that must be understood at a glance.
The serif carries anything longer than a breath. It has been on every computer for decades, and it reads like a book.
Labels whisper the category so the headline can say the interesting part.
Seriously. The fastest way to spread good design is to give it away. View source on this page and take the whole thing, or start from the skeleton below: the variables, the two voices, the stage, and the callout. It is the same starter our own pages grow from.
Starvard<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Page | Your Site</title>
<style>
:root{--navy:#16233f;--navy-deep:#0e1830;--gold:#b58520;
--gold-soft:#e8d9b0;--ivory:#faf7f0;--ink:#1d1d1f}
body{margin:0;color:var(--ink);background:#fff;
font-family:Georgia,'Times New Roman',serif}
.wrap{max-width:1140px;margin:0 auto;padding:0 30px}
h1,h2,.ui{font-family:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif}
.btn{display:inline-block;background:var(--navy);color:#fff;
border-radius:99px;padding:13px 26px;text-decoration:none}
.callout{background:#fffbef;border:2px solid var(--gold-soft);
border-radius:12px;padding:22px 26px}
</style>
</head>
<body>
<div class="wrap">
<p class="ui" style="color:var(--gold);letter-spacing:.22em">YOUR EYEBROW</p>
<h1>One clear promise.</h1>
<p>One idea per section. Air around it. Gold once.</p>
<a class="btn" href="#">The one action</a>
<div class="callout"><strong>Do this:</strong> the one thing that matters.</div>
</div>
</body>
</html>
The template is free to use for anything, forever. Credit is appreciated and never required. If you build something handsome with it, come show us in the Starvard Commons on Discord. And if you want the thinking behind every choice, the companion essay on the Starvard Blog goes piece by piece.