Earthy palette
Terracotta, ochre, olive and sand, colors taken from clay, spice and dried plants.
Warm, collected and handmade. Bohemian design layers earthy colors, woven patterns and arched shapes, so a page feels lived in rather than manufactured.
Open the kit Copy promptBohemian design comes from artists and free spirits who rejected convention. On screens it means warmth, texture and a gentle, collected look.
Terracotta, ochre, olive and sand, colors taken from clay, spice and dried plants.
Weaving, macramé, block prints and fringe translate into repeating CSS patterns.
Arched windows and rounded tops replace hard rectangles.
Mixed patterns and objects that look gathered over time, held together by a shared warmth.
The word bohemian first described artists in 19th-century Paris. The look has been revived by every generation since.
Henri Murger's stories about poor artists in Paris give the word bohemian its artistic meaning.
Puccini's opera brings the romance of bohemian artists to stages worldwide.
San Francisco's counterculture mixes global textiles, handicrafts and flowing forms into a new style.
Fashion revives fringe, embroidery and layered prints under the name boho chic.
Macramé, rattan and terracotta tones spread through interior photos and then into brand and web design.
Bohemian motion is slow and circular, like a turning mandala or a gently swaying textile.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Ceramics, textiles and plant shops use warm arches and pattern.
Yoga studios and retreats use earthy palettes to feel grounded.
Independent venues use handmade textures to feel personal.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Sun-baked earth tones. Cocoa carries text, terracotta carries action. Tap a swatch to copy its hex value.
:root{
--sand: #F3E7D7;
--linen: #FBF4EA;
--terracotta: #B5532E;
--ochre: #D9A441;
--olive: #7C8A5A;
--cocoa: #3B2419;
}A soft, high-contrast display serif with personality, and a warm humanist sans for reading.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Yeseva One",Georgia,serif;
--font-b: "Alegreya Sans",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(51px, 9vw, 113px);
--fs-1: 51.4px; --fs-2: 39.5px;
--fs-3: 30.4px; --fs-4: 23.4px;
--fs-body: 18px; --fs-sm: 13.8px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
line-height: 1.05;
}
/* fonts: Yeseva One and Alegreya Sans */A relaxed grid with generous gaps. Arches and pattern strips break the rectangles.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Arch radius on cards and images, soft warm shadows, dotted and woven pattern details.
:root {
--radius: 999px 999px 24px 24px;
--radius-sm: 18px;
--bw: 1.5px;
--shadow: 0 14px 30px -18px rgba(59,36,25,.5);
--shadow-sm: 0 6px 14px -8px rgba(59,36,25,.45);
--gap: 24px;
--pad: 28px;
}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.
/* Bohemian kit · Anti-Boring */
:root{
--bg:#F3E7D7;
--surface:#FBF4EA;
--surface2:#E8D3BA;
--fg:#3B2419;
--muted:#6B4B3A;
--accent:#B5532E;
--accent-fg:#FBF4EA;
--accent2:#7C8A5A;
--accent2-fg:#FBF4EA;
--border:#3B2419;
--bw:1.5px;
--radius:999px 999px 24px 24px;
--radius-sm:18px;
--shadow:0 14px 30px -18px rgba(59,36,25,.5);
--shadow-sm:0 6px 14px -8px rgba(59,36,25,.45);
--font-d:"Yeseva One",Georgia,serif;
--font-b:"Alegreya Sans",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:0;
--h-case:none;
--h-style:normal;
--h-lh:1.05;
--gap:24px;
--pad:28px;
--focus:rgba(181,83,46,.3);
--ok:#4E6B2E;
--warn:#8A5A00;
--danger:#9E2F1E;
--info:#5B6E8A;
--field-bg:var(--surface);
--field-shadow:none;
--media:repeating-linear-gradient(45deg,#D9A441 0 10px,transparent 10px 20px),repeating-linear-gradient(-45deg,#B5532E 0 10px,#E8D3BA 10px 20px);
--code-bg:#3B2419;
--code-fg:#F3E7D7;
--btn-case:none;
--btn-track:0;
--btn-weight:700;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.8px;
--fs-body:18px;
--fs-4:23.4px;
--fs-3:30.4px;
--fs-2:39.5px;
--fs-1:51.4px;
--fs-d:clamp(51px, 9vw, 113px);
}
*,*::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{border-radius:999px}
.btn-ghost{border-style:dashed}
.card{background:var(--surface);padding-top:48px}
.card::after{content:"";position:absolute;left:18px;right:18px;bottom:10px;height:8px;background:radial-gradient(circle,var(--accent) 2px,transparent 2.5px) 0 0/14px 8px repeat-x;opacity:.6}
.card-media{border-radius:999px 999px 14px 14px;aspect-ratio:4/3}
.badge{background:#D9A441;color:#3B2419;border-color:transparent;font-style:italic;font-weight:400}
.input,.select,.textarea{border-radius:18px;background:#FBF4EA}
.alert{border-radius:18px;border-left-width:6px;background:#FBF4EA}
.switch::before{background:#D9A441}
.progress i{background:repeating-linear-gradient(90deg,#B5532E 0 12px,#D9A441 12px 24px,#7C8A5A 24px 36px)}
.tab{font-family:var(--font-d);font-weight:400}
.pager a{border-radius:50%}
.table-wrap{border-radius:18px}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#2A1A13;
--surface:#362219;
--surface2:#301E16;
--fg:#F3E7D7;
--muted:#CDB9A3;
--border:#F3E7D7;
--field-bg:#362219;
--code-bg:#1A0F0B;
}
html.alt .hero h1{color:#F3E7D7}html.alt .input,html.alt .select,html.alt .textarea,html.alt .alert{background:#362219;color:#F3E7D7}html.alt .traits .card:nth-child(2n){background:#3F2A1F}html.alt body{background-image:radial-gradient(rgba(255,240,220,.05) 1px,transparent 1px)!important}html.alt .stage{background:#362219}html.alt .select option{background:#2A1A13}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 AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a ceramics studio and plant shop in an authentic Bohemian style.
Palette: Sand #F3E7D7, Linen #FBF4EA, Terracotta #B5532E, Ochre #D9A441, Olive #7C8A5A, Cocoa #3B2419.
Typography: Yeseva One for headings, Alegreya Sans for body and buttons.
Layout: Hero with text on the left and a landscape of overlapping arches on the right (terracotta, striped ochre, olive, sand) with a glowing ochre sun, finished by a fringe border strip.
Signature details: Earthy palette, arch-shaped cards and images, subtle dotted texture background, woven stripe patterns in progress bars, a dotted trim at the bottom of cards.
Components: Pill buttons, softly rounded inputs, italic ochre badges, alerts on linen with a thick left edge, circular pagination.
Motion: Slow rotating mandala patterns, 20 to 30 seconds per turn.
Avoid: sacred cultural symbols as decoration, neon, cold grays, sharp rectangles everywhere, stock dreamcatchers.
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.
Sacred or specific cultural patterns used as decoration can offend. Design your own motifs.
Earth tones can blur together. Check text contrast on every panel.
One pattern per component is enough. Let solid areas rest the eye.
Dreamcatchers and generic feathers feel mass-produced. Handmade means specific.