Muted city colour
Concrete, sage and dusty blue. If a colour shouts, it does not belong.
A muted Scandinavian-urban minimal. Soft concrete, sage and dusty blue, with marks that look pressed into the surface.
Austurbane is a name for a mood: austere and urbane. It takes the quiet of Scandinavian public design and the grey of city concrete, then presses the mark inward.
Concrete, sage and dusty blue. If a colour shouts, it does not belong.
Seals and short words look pressed in, with a light lip and an inner shadow.
The serif carries the name. The grotesk carries labels, buttons and notes.
Wide margins and one rule. The page should feel like a quiet street, not a showroom.
The pieces are older than the name. Austurbane describes a current mood built from those pieces.
Scandinavian furniture and public print favour pale wood, grey and plain type.
Transit and civic design keep colour low so a street can stay readable.
Interiors mix pale green, grey-blue and raw plaster.
City studios drop bright product hues for concrete and a single pressed mark.
Austurbane is the label for that mix: soft concrete, sage, dusty blue, serif plus grotesk.
A seal presses in and releases. The movement is small, like a stamp meeting paper.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Practices that build in the city use the palette of their materials.
Material choices read as a short list, not a mood board.
A museum or a city office can use the same restraint.
Palette, type, layout, texture and the tokens every component reads. Tap a swatch to copy its hex value.
Soft concrete, sage and dusty blue on warm paper. Nothing is highly saturated. Ink does the reading.
:root {
--paper: #F3F1EB;
--concrete: #D9D4CB;
--sage: #8FA094;
--dusty-blue: #7E97A8;
--stone: #B7A99A;
--ink: #2C3130;
}A text serif for names and a plain grotesk for labels. The serif is the voice. The grotesk is the street sign.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root {
--font-d: "Source Serif 4",Georgia,serif;
--font-b: "Hanken Grotesk",system-ui,sans-serif;
--h-weight: 500;
--h-track: .01em;
}Wide margins and a simple column. The city is in the empty space, not in a busy grid.
Equal cards, product tiles, feature lists.
Articles, documentation, settings pages.
Almost square corners. Marks are debossed: pressed in, with a light edge above and a soft shadow inside.
:root {
--radius: 2px;
--radius-sm: 2px;
--bw: 1px;
--shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 2px rgba(40,40,40,.12);
--shadow-sm: inset 0 1px 1px rgba(40,40,40,.12);
--gap: 32px;
--pad: 28px;
}A very light concrete grain. No gloss. The press of a mark is the texture that matters.
Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Austurbane kit · Anti-Boring */
:root{
--bg:#F3F1EB;
--surface:#F7F6F2;
--surface2:#E6E2DA;
--fg:#2C3130;
--muted:#4A524E;
--accent:#3E5C68;
--accent-fg:#F3F1EB;
--accent2:#5E6B58;
--accent2-fg:#F3F1EB;
--border:#C9C3B8;
--bw:1px;
--radius:2px;
--radius-sm:2px;
--shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 2px rgba(40,40,40,.12);
--shadow-sm:inset 0 1px 1px rgba(40,40,40,.12);
--font-d:"Source Serif 4",Georgia,serif;
--font-b:"Hanken Grotesk",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:500;
--h-track:.01em;
--h-case:none;
--h-style:normal;
--h-lh:1.05;
--gap:32px;
--pad:28px;
--focus:rgba(62,92,104,.35);
--ok:#5E6B58;
--warn:#8A5A00;
--danger:#8E3A28;
--info:#3E5C68;
--field-bg:var(--surface);
--field-shadow:none;
--media:linear-gradient(160deg,#D9D4CB,#8FA094 55%,#7E97A8);
--code-bg:#2C3130;
--code-fg:#F3F1EB;
--btn-case:none;
--btn-track:.04em;
--btn-weight:600;
--badge-radius:2px;
--maxw:1160px;
--fs-sm:13.1px;
--fs-body:17px;
--fs-4:22.1px;
--fs-3:28.7px;
--fs-2:37.3px;
--fs-1:48.6px;
--fs-d:clamp(49px, 9vw, 107px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 3px rgba(30,30,30,.16)}
.badge{box-shadow:inset 0 1px 2px rgba(30,30,30,.16);border-radius:2px}
.card h3,.card h4{font-family:var(--font-d)}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#1C1E1D;
--surface:#262826;
--surface2:#222422;
--fg:#EEEAE3;
--muted:#D2CEC4;
--accent:#C5D5DE;
--accent-fg:#1A2428;
--accent2:#C5D0BE;
--accent2-fg:#1A2218;
--border:#5A5E5A;
--code-bg:#141615;
--code-fg:#EEEAE3;
--shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 2px rgba(0,0,0,.35);
}
html.alt .input,html.alt .select,html.alt .textarea{background:var(--surface);color:var(--fg)}
Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for Lovable and Claude Design. It names the palette, type, layout, texture, what to do and what to avoid, so the output keeps this style's point of view.
Style prompt for Lovable and Claude Design. Design a responsive landing page for a small architecture studio in a northern city in an authentic Austurbane style.
Palette: Paper #F3F1EB, Concrete #D9D4CB, Sage #8FA094, Dusty blue #7E97A8, Stone #B7A99A, Ink #2C3130.
Typography: Source Serif 4 for names, Hanken Grotesk for labels and body.
Layout: Wide margins. Hero splits words and a concrete board with a debossed monogram. One column of text after that.
Texture: Light concrete grain from an SVG noise tile. Marks use inset shadows, not drop shadows.
Signature details: 2px corners, debossed buttons and badges, serif headings, grotesk UI.
Components: Dusty-blue buttons with pressed shadow, sage secondary buttons, nearly square cards.
Motion: A monogram scales down slightly and deepens its inset shadow, then releases. No bounce.
Do: Keep saturation low. Press marks inward. Use the serif for the name only.
Avoid: Black hard shadows, neon, gold luxury clichés, all-caps shouting, glossy gradients.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Grey alone is not the style. It needs the sage, the dusty blue and the pressed mark.
Gold rules and high contrast serifs turn this into a fashion template.
A drop shadow lifts the mark. This style presses it in.
Long text in the display serif is tiring. The grotesk does the reading.