Scandi Boho is a hybrid design aesthetic that fuses the clean, functional minimalism of Scandinavian design with the warm, textured eclecticism of bohemian style. Where Scandinavian design alone can feel clinical and restrained, and bohemian style alone can tip into visual chaos, their union produces something balanced and deeply livable: spaces and interfaces that are both organized and soulful, structured yet inviting.
The Scandinavian side contributes clean lines, open space, muted neutral backgrounds, and an unwavering commitment to functional simplicity. The bohemian side layers in warmth through handcrafted textures, woven materials, earthy accent colors, and collected-over-time imperfection. Rattan, macrame, jute, and linen sit alongside pale wood and white walls. Terracotta, mustard, and sage accents punctuate a foundation of cream, sand, and warm gray.
In web and digital design, Scandi Boho translates to layouts that breathe with generous whitespace and simple grid structures, but feel human and tactile through subtle textile-inspired textures, warm color palettes, and typography that pairs geometric sans-serifs with refined humanist serifs. Borders are soft, shadows are warm-tinted, and surfaces suggest natural materials rather than glossy screens. The overall effect is a digital equivalent of a sunlit room with linen curtains, a woven rug on pale hardwood floors, and a few carefully chosen ceramics on open shelves.
This aesthetic gained momentum in interior design during the mid-2010s as a reaction against both stark minimalism and overwhelming maximalism, finding a middle path that values simplicity without sacrificing personality. Its digital counterpart appeals to lifestyle brands, wellness platforms, creative portfolios, artisanal shops, and any project that wants to feel curated, warm, and unpretentious. Scandi Boho rejects both corporate sterility and decorative excess in favor of intentional warmth, natural materiality, and quiet confidence.
The Scandi Boho palette starts with a warm neutral canvas drawn from Scandinavian design – creams, linens, and soft sand tones that replace the harsher whites of pure minimalism. Onto this foundation, bohemian earth tones are carefully introduced: terracotta and clay for warmth, sage and olive for organic life, mustard for golden accents, and dusty rose for softness. The palette should feel like a walk through a sunlit craft market: natural, grounded, and gently colorful without ever becoming loud.
| Swatch | Hex | Role/Usage |
|---|---|---|
| Warm Linen | #FAF6F0 |
Primary background; the warm-white canvas |
| Sand Cream | #F0E8DC |
Card and surface backgrounds |
| Oat Milk | #E8DFD0 |
Alternate surface; section dividers |
| Desert Sand | #D5C4AD |
Borders, subtle separators, muted accents |
| Terracotta | #C07856 |
Primary accent; CTAs, highlights, warmth |
| Burnt Clay | #A4613A |
Hover states; deeper terracotta emphasis |
| Mustard Gold | #D4A843 |
Secondary accent; badges, tags, warm pops |
| Sage Green | #8B9E7E |
Tertiary accent; nature references, balance |
| Olive Dusk | #6B7153 |
Dark green accent; footers, grounding |
| Dusty Rose | #C9A0A0 |
Soft accent; decorative elements, highlights |
| Warm Taupe | #9E8B7D |
Secondary text; captions, metadata |
| Espresso | #3D332C |
Primary text; headings, body copy |
| Rattan Brown | #B89B78 |
Decorative borders; woven texture references |
| Pampas Blush | #E8CFC0 |
Hero gradients; soft background washes |
| Stone Gray | #A49E97 |
Muted UI elements; disabled states |
:root {
/* --- Backgrounds --- */
--sb-linen: #FAF6F0;
--sb-sand: #F0E8DC;
--sb-oat: #E8DFD0;
/* --- Borders & Separators --- */
--sb-desert: #D5C4AD;
--sb-rattan: #B89B78;
/* --- Accents --- */
--sb-terracotta: #C07856;
--sb-burnt-clay: #A4613A;
--sb-mustard: #D4A843;
--sb-sage: #8B9E7E;
--sb-olive: #6B7153;
--sb-dusty-rose: #C9A0A0;
--sb-pampas: #E8CFC0;
/* --- Text --- */
--sb-espresso: #3D332C;
--sb-taupe: #9E8B7D;
--sb-stone: #A49E97;
/* --- Semantic Aliases --- */
--sb-bg: var(--sb-linen);
--sb-surface: var(--sb-sand);
--sb-text: var(--sb-espresso);
--sb-text-muted: var(--sb-taupe);
--sb-accent: var(--sb-terracotta);
--sb-accent-hover: var(--sb-burnt-clay);
--sb-border: var(--sb-desert);
}
Scandi Boho typography blends the geometric clarity of Scandinavian sans-serifs with the warm, humanist character of serif faces that echo bohemian artisanship. Headings use clean, slightly warm sans-serifs or refined display serifs, while body text prioritizes readability with generous line height. An optional handwritten or brush-style accent font can be used sparingly for labels, pull quotes, or decorative text to inject bohemian personality. Weights stay in the light-to-medium range; heavy bold weights feel too aggressive for this aesthetic.
| Font | Weight(s) | Usage | Link |
|---|---|---|---|
| Albert Sans | 300, 400, 500, 600 | Headings; geometric sans with Scandinavian warmth | Albert Sans |
| Lora | 400, 500, 600 | Body text; humanist serif with bohemian warmth | Lora |
| DM Sans | 300, 400, 500 | UI labels, navigation; clean geometric sans | DM Sans |
| Cormorant Garamond | 300, 400, 500 | Display headings; refined, elegant serif | Cormorant Garamond |
| Caveat | 400, 500, 600 | Handwritten accents, quotes, decorative labels | Caveat |
| Heading | Body | Vibe |
|---|---|---|
| Albert Sans 500 | Lora 400 | Clean Scandinavian structure with warm serif readability |
| Cormorant Garamond 400 | DM Sans 400 | Elegant editorial with functional body text |
| Albert Sans 600 | DM Sans 300 | All sans-serif; minimal Scandi with soft weight contrast |
| Cormorant Garamond 500 | Lora 400 | Rich serif pairing for content-heavy, literary layouts |
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300;400;500;600&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=DM+Sans:wght@300;400;500&family=Caveat:wght@400;500;600&display=swap');
body {
font-family: 'Lora', 'Georgia', serif;
font-size: 1.05rem;
line-height: 1.75;
color: #3D332C;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: 'Albert Sans', 'Helvetica Neue', sans-serif;
font-weight: 500;
letter-spacing: 0.01em;
color: #3D332C;
line-height: 1.25;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.3rem; }
.label, .nav-link {
font-family: 'DM Sans', sans-serif;
font-weight: 400;
font-size: 0.9rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.handwritten {
font-family: 'Caveat', cursive;
font-size: 1.4rem;
color: #9E8B7D;
}
.sb-card {
background: #F0E8DC;
border: 1px solid #D5C4AD;
border-radius: 12px;
padding: 32px;
box-shadow: 0 2px 8px rgba(61, 51, 44, 0.06);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.sb-card:hover {
box-shadow: 0 4px 16px rgba(61, 51, 44, 0.1);
transform: translateY(-2px);
}
.sb-card h3 {
font-family: 'Albert Sans', sans-serif;
font-weight: 500;
font-size: 1.25rem;
color: #3D332C;
margin-bottom: 12px;
}
.sb-card p {
font-family: 'Lora', serif;
color: #9E8B7D;
line-height: 1.7;
}
.sb-button {
background: #C07856;
color: #FAF6F0;
border: none;
border-radius: 8px;
padding: 12px 32px;
font-family: 'DM Sans', sans-serif;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 2px 6px rgba(192, 120, 86, 0.25);
}
.sb-button:hover {
background: #A4613A;
box-shadow: 0 4px 12px rgba(192, 120, 86, 0.35);
transform: translateY(-1px);
}
/* Secondary / outlined variant */
.sb-button--outline {
background: transparent;
color: #C07856;
border: 1.5px solid #C07856;
box-shadow: none;
}
.sb-button--outline:hover {
background: rgba(192, 120, 86, 0.08);
box-shadow: none;
transform: none;
}
.sb-nav {
background: #FAF6F0;
border-bottom: 1px solid #D5C4AD;
padding: 16px 32px;
display: flex;
align-items: center;
justify-content: space-between;
}
.sb-nav__brand {
font-family: 'Albert Sans', sans-serif;
font-weight: 600;
font-size: 1.2rem;
color: #3D332C;
text-decoration: none;
letter-spacing: 0.02em;
}
.sb-nav__links {
display: flex;
gap: 8px;
list-style: none;
}
.sb-nav__links a {
font-family: 'DM Sans', sans-serif;
font-size: 0.9rem;
font-weight: 400;
color: #9E8B7D;
text-decoration: none;
padding: 8px 16px;
border-radius: 6px;
transition: color 0.2s ease, background 0.2s ease;
}
.sb-nav__links a:hover,
.sb-nav__links a.active {
color: #C07856;
background: rgba(192, 120, 86, 0.08);
}
.sb-hero {
background: linear-gradient(
175deg,
#FAF6F0 0%,
#F0E8DC 40%,
#E8CFC0 100%
);
padding: 100px 40px 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.sb-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(180deg, transparent, #FAF6F0);
}
.sb-hero h1 {
font-family: 'Albert Sans', sans-serif;
font-size: 3rem;
font-weight: 300;
color: #3D332C;
margin-bottom: 16px;
letter-spacing: -0.01em;
}
.sb-hero p {
font-family: 'Lora', serif;
font-size: 1.2rem;
color: #9E8B7D;
max-width: 560px;
margin: 0 auto 32px;
line-height: 1.8;
}
/* Linen weave pattern inspired by jute and natural textiles */
.sb-woven-bg {
background-color: #FAF6F0;
background-image:
repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(61, 51, 44, 0.02) 3px,
rgba(61, 51, 44, 0.02) 4px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 3px,
rgba(61, 51, 44, 0.015) 3px,
rgba(61, 51, 44, 0.015) 4px
);
}
/* Rattan-inspired crosshatch for card surfaces */
.sb-rattan-texture {
background-color: #F0E8DC;
background-image:
repeating-linear-gradient(
45deg,
transparent,
transparent 6px,
rgba(184, 155, 120, 0.06) 6px,
rgba(184, 155, 120, 0.06) 7px
),
repeating-linear-gradient(
-45deg,
transparent,
transparent 6px,
rgba(184, 155, 120, 0.04) 6px,
rgba(184, 155, 120, 0.04) 7px
);
}
/* Sunrise warmth -- hero and feature sections */
.sb-gradient-sunrise {
background: linear-gradient(
175deg,
#FAF6F0 0%,
#E8CFC0 50%,
#F0E8DC 100%
);
}
/* Sand dune -- subtle depth for content areas */
.sb-gradient-sand {
background: linear-gradient(
180deg,
#FAF6F0 0%,
#F0E8DC 50%,
#E8DFD0 100%
);
}
/* Terracotta wash -- warm accent sections */
.sb-gradient-terracotta {
background: linear-gradient(
160deg,
#F0E8DC 0%,
rgba(192, 120, 86, 0.08) 50%,
#FAF6F0 100%
);
}
/* Sage mist -- nature-inspired sections */
.sb-gradient-sage {
background: linear-gradient(
170deg,
#FAF6F0 0%,
rgba(139, 158, 126, 0.06) 50%,
#F0E8DC 100%
);
}
/* Organic brushstroke-style divider */
.sb-divider {
border: none;
height: 2px;
max-width: 120px;
margin: 48px auto;
background: linear-gradient(
90deg,
transparent 0%,
#D5C4AD 20%,
#C07856 50%,
#D5C4AD 80%,
transparent 100%
);
border-radius: 2px;
}
/* Bohemian dot divider */
.sb-divider--dots {
border: none;
height: auto;
text-align: center;
margin: 40px 0;
color: #D5C4AD;
font-size: 1.2rem;
letter-spacing: 0.6em;
}
.sb-divider--dots::before {
content: '\25CF \25CB \25CF \25CB \25CF';
}
.sb-input {
width: 100%;
padding: 12px 16px;
border: 1.5px solid #D5C4AD;
border-radius: 8px;
background: #FAF6F0;
font-family: 'Lora', serif;
font-size: 1rem;
color: #3D332C;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sb-input::placeholder {
color: #A49E97;
font-style: italic;
}
.sb-input:focus {
outline: none;
border-color: #C07856;
box-shadow: 0 0 0 3px rgba(192, 120, 86, 0.12);
}
.sb-input-label {
font-family: 'DM Sans', sans-serif;
font-size: 0.85rem;
font-weight: 500;
color: #9E8B7D;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 6px;
display: block;
}
rgba(61, 51, 44, ...)) rather than pure black for a softer, more natural feelfilter: saturate(90%) sepia(5%)) to maintain palette cohesion across imagery#FFFFFF) backgrounds and cool-toned grays; they clash with the warm, earthy palette and feel clinical| Aesthetic | Relationship |
|---|---|
| Japandi | Close sibling; both blend Scandinavian minimalism with another tradition’s warmth, but Japandi draws from Japanese wabi-sabi while Scandi Boho draws from bohemian eclecticism |
| Hygge | Shares the Scandinavian warmth and coziness, but Hygge is purely Nordic without bohemian layering; Scandi Boho adds textured eclecticism to Hygge’s fireside intimacy |
| Cottagecore | Both celebrate natural materials and handcraft, but Cottagecore is more overtly romantic and pastoral; Scandi Boho is more restrained and modern |
| Earth Tones | Shares the warm, natural color palette; Earth Tones is a broader approach while Scandi Boho applies it within a specific structural framework |
| Geo-Boho | Scandi Boho’s pattern-heavy cousin; Geo-Boho emphasizes bold geometric patterns inspired by global textiles, while Scandi Boho keeps patterns subtle and secondary to clean structure |
| Ethnic Chic | Both draw from global craft traditions, but Ethnic Chic leans into bold cultural patterns and saturated colors; Scandi Boho filters these influences through Nordic restraint |
| Coastal Style | Shares the light, airy quality and natural materials, but Coastal uses cool ocean tones where Scandi Boho uses warm earth tones |
| Danish Pastel | Both originate from Scandinavian sensibilities, but Danish Pastel uses candy-like pastels while Scandi Boho grounds itself in earthy warmth |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scandi Boho Layout</title>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300;400;500;600&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=DM+Sans:wght@300;400;500&family=Caveat:wght@400;500;600&display=swap" rel="stylesheet">
<style>
/* ============================================
SCANDI BOHO -- Quick-Start Template
Scandinavian minimalism + bohemian warmth
============================================ */
/* --- Reset & Base --- */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--sb-linen: #FAF6F0;
--sb-sand: #F0E8DC;
--sb-oat: #E8DFD0;
--sb-desert: #D5C4AD;
--sb-rattan: #B89B78;
--sb-terracotta: #C07856;
--sb-burnt-clay: #A4613A;
--sb-mustard: #D4A843;
--sb-sage: #8B9E7E;
--sb-olive: #6B7153;
--sb-dusty-rose: #C9A0A0;
--sb-pampas: #E8CFC0;
--sb-espresso: #3D332C;
--sb-taupe: #9E8B7D;
--sb-stone: #A49E97;
}
body {
font-family: 'Lora', 'Georgia', serif;
font-size: 1.05rem;
line-height: 1.75;
color: var(--sb-espresso);
background-color: var(--sb-linen);
background-image:
repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(61, 51, 44, 0.02) 3px,
rgba(61, 51, 44, 0.02) 4px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 3px,
rgba(61, 51, 44, 0.015) 3px,
rgba(61, 51, 44, 0.015) 4px
);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--sb-terracotta);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--sb-burnt-clay);
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* --- Navigation --- */
.nav {
background: var(--sb-linen);
border-bottom: 1px solid var(--sb-desert);
padding: 16px 32px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(8px);
background: rgba(250, 246, 240, 0.92);
}
.nav__brand {
font-family: 'Albert Sans', sans-serif;
font-weight: 600;
font-size: 1.2rem;
color: var(--sb-espresso);
text-decoration: none;
letter-spacing: 0.02em;
}
.nav__links {
display: flex;
gap: 4px;
list-style: none;
}
.nav__links a {
font-family: 'DM Sans', sans-serif;
font-size: 0.85rem;
font-weight: 400;
color: var(--sb-taupe);
text-decoration: none;
padding: 8px 16px;
border-radius: 6px;
letter-spacing: 0.03em;
text-transform: uppercase;
transition: color 0.2s ease, background 0.2s ease;
}
.nav__links a:hover,
.nav__links a.active {
color: var(--sb-terracotta);
background: rgba(192, 120, 86, 0.08);
}
/* --- Hero --- */
.hero {
background: linear-gradient(
175deg,
var(--sb-linen) 0%,
var(--sb-sand) 40%,
var(--sb-pampas) 100%
);
padding: 100px 40px 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(192, 120, 86, 0.06) 0%,
transparent 70%
);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(180deg, transparent, var(--sb-linen));
}
.hero__label {
font-family: 'DM Sans', sans-serif;
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--sb-terracotta);
margin-bottom: 16px;
}
.hero h1 {
font-family: 'Albert Sans', sans-serif;
font-size: 3rem;
font-weight: 300;
color: var(--sb-espresso);
margin-bottom: 16px;
letter-spacing: -0.01em;
line-height: 1.2;
}
.hero h1 em {
font-family: 'Lora', serif;
font-style: italic;
font-weight: 400;
}
.hero p {
font-family: 'Lora', serif;
font-size: 1.15rem;
color: var(--sb-taupe);
max-width: 540px;
margin: 0 auto 36px;
line-height: 1.8;
}
/* --- Buttons --- */
.btn {
display: inline-block;
padding: 12px 32px;
border-radius: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s ease;
text-decoration: none;
border: none;
}
.btn--primary {
background: var(--sb-terracotta);
color: var(--sb-linen);
box-shadow: 0 2px 8px rgba(192, 120, 86, 0.25);
}
.btn--primary:hover {
background: var(--sb-burnt-clay);
color: var(--sb-linen);
box-shadow: 0 4px 16px rgba(192, 120, 86, 0.35);
transform: translateY(-1px);
}
.btn--outline {
background: transparent;
color: var(--sb-terracotta);
border: 1.5px solid var(--sb-terracotta);
}
.btn--outline:hover {
background: rgba(192, 120, 86, 0.08);
color: var(--sb-burnt-clay);
}
/* --- Divider --- */
.divider {
border: none;
height: 2px;
max-width: 120px;
margin: 48px auto;
background: linear-gradient(
90deg,
transparent 0%,
var(--sb-desert) 20%,
var(--sb-terracotta) 50%,
var(--sb-desert) 80%,
transparent 100%
);
border-radius: 2px;
}
/* --- Container --- */
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 24px;
}
.container--narrow {
max-width: 720px;
}
/* --- Section --- */
.section {
padding: 64px 0;
}
.section__label {
font-family: 'DM Sans', sans-serif;
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--sb-terracotta);
margin-bottom: 8px;
}
.section__title {
font-family: 'Albert Sans', sans-serif;
font-size: 2rem;
font-weight: 400;
color: var(--sb-espresso);
margin-bottom: 16px;
}
.section__intro {
color: var(--sb-taupe);
max-width: 600px;
margin-bottom: 40px;
}
/* --- Card Grid --- */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.card {
background: var(--sb-sand);
border: 1px solid var(--sb-desert);
border-radius: 12px;
padding: 28px;
box-shadow: 0 2px 8px rgba(61, 51, 44, 0.06);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover {
box-shadow: 0 4px 16px rgba(61, 51, 44, 0.1);
transform: translateY(-2px);
}
.card__icon {
width: 48px;
height: 48px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 16px;
}
.card__icon--terracotta {
background: rgba(192, 120, 86, 0.12);
color: var(--sb-terracotta);
}
.card__icon--sage {
background: rgba(139, 158, 126, 0.15);
color: var(--sb-sage);
}
.card__icon--mustard {
background: rgba(212, 168, 67, 0.12);
color: var(--sb-mustard);
}
.card h3 {
font-family: 'Albert Sans', sans-serif;
font-weight: 500;
font-size: 1.15rem;
color: var(--sb-espresso);
margin-bottom: 8px;
}
.card p {
color: var(--sb-taupe);
font-size: 0.95rem;
line-height: 1.7;
}
/* --- Feature Split --- */
.feature-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
padding: 64px 0;
}
.feature-split--reverse {
direction: rtl;
}
.feature-split--reverse > * {
direction: ltr;
}
.feature-split__image {
border-radius: 16px;
overflow: hidden;
background: var(--sb-sand);
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--sb-desert);
}
.feature-split__image-placeholder {
font-family: 'Caveat', cursive;
font-size: 1.3rem;
color: var(--sb-rattan);
}
.feature-split__content h2 {
font-family: 'Albert Sans', sans-serif;
font-size: 1.8rem;
font-weight: 400;
color: var(--sb-espresso);
margin-bottom: 16px;
}
.feature-split__content p {
color: var(--sb-taupe);
margin-bottom: 24px;
}
/* --- Testimonial --- */
.testimonial {
background: var(--sb-sand);
border-radius: 16px;
padding: 48px;
text-align: center;
border: 1px solid var(--sb-desert);
position: relative;
}
.testimonial::before {
content: '\201C';
font-family: 'Cormorant Garamond', serif;
font-size: 5rem;
color: var(--sb-terracotta);
opacity: 0.2;
position: absolute;
top: 16px;
left: 32px;
line-height: 1;
}
.testimonial blockquote {
font-family: 'Lora', serif;
font-size: 1.2rem;
font-style: italic;
color: var(--sb-espresso);
max-width: 600px;
margin: 0 auto 20px;
line-height: 1.8;
}
.testimonial cite {
font-family: 'DM Sans', sans-serif;
font-style: normal;
font-size: 0.85rem;
color: var(--sb-taupe);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* --- Newsletter --- */
.newsletter {
background: linear-gradient(
170deg,
var(--sb-sand) 0%,
var(--sb-pampas) 100%
);
border-radius: 16px;
padding: 48px;
text-align: center;
border: 1px solid var(--sb-desert);
}
.newsletter h2 {
font-family: 'Albert Sans', sans-serif;
font-size: 1.6rem;
font-weight: 400;
color: var(--sb-espresso);
margin-bottom: 8px;
}
.newsletter p {
color: var(--sb-taupe);
margin-bottom: 24px;
}
.newsletter__form {
display: flex;
gap: 12px;
max-width: 460px;
margin: 0 auto;
}
.newsletter__input {
flex: 1;
padding: 12px 16px;
border: 1.5px solid var(--sb-desert);
border-radius: 8px;
background: var(--sb-linen);
font-family: 'Lora', serif;
font-size: 0.95rem;
color: var(--sb-espresso);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.newsletter__input::placeholder {
color: var(--sb-stone);
font-style: italic;
}
.newsletter__input:focus {
outline: none;
border-color: var(--sb-terracotta);
box-shadow: 0 0 0 3px rgba(192, 120, 86, 0.12);
}
/* --- Footer --- */
.footer {
background: var(--sb-oat);
border-top: 1px solid var(--sb-desert);
padding: 48px 0 32px;
margin-top: 64px;
}
.footer__inner {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}
.footer__brand {
font-family: 'Albert Sans', sans-serif;
font-weight: 600;
font-size: 1.1rem;
color: var(--sb-espresso);
margin-bottom: 8px;
}
.footer__tagline {
font-family: 'Caveat', cursive;
font-size: 1.1rem;
color: var(--sb-rattan);
}
.footer__links h4 {
font-family: 'DM Sans', sans-serif;
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--sb-taupe);
margin-bottom: 12px;
}
.footer__links ul {
list-style: none;
}
.footer__links li {
margin-bottom: 8px;
}
.footer__links a {
font-family: 'Lora', serif;
font-size: 0.9rem;
color: var(--sb-taupe);
}
.footer__links a:hover {
color: var(--sb-terracotta);
}
.footer__bottom {
text-align: center;
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid var(--sb-desert);
font-family: 'DM Sans', sans-serif;
font-size: 0.8rem;
color: var(--sb-stone);
}
/* --- Responsive --- */
@media (max-width: 768px) {
.nav {
padding: 12px 20px;
}
.nav__links {
gap: 0;
}
.nav__links a {
padding: 6px 10px;
font-size: 0.8rem;
}
.hero {
padding: 64px 24px 56px;
}
.hero h1 {
font-size: 2.2rem;
}
.card-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.feature-split {
grid-template-columns: 1fr;
gap: 24px;
}
.feature-split--reverse {
direction: ltr;
}
.newsletter__form {
flex-direction: column;
}
.footer__inner {
flex-direction: column;
gap: 24px;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<a href="#" class="nav__brand">Scandi Boho</a>
<ul class="nav__links">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Collection</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Hero -->
<section class="hero">
<p class="hero__label">Minimal warmth, textured calm</p>
<h1>Where Clean Lines Meet <em>Woven Warmth</em></h1>
<p>Scandinavian simplicity and bohemian soul, woven together into
spaces that breathe with intention and glow with natural light.</p>
<div style="display: flex; gap: 12px; justify-content: center;">
<a href="#" class="btn btn--primary">Explore Collection</a>
<a href="#" class="btn btn--outline">Our Story</a>
</div>
</section>
<!-- Features -->
<section class="section">
<div class="container">
<p class="section__label">What We Offer</p>
<h2 class="section__title">Curated with Intention</h2>
<p class="section__intro">
Every piece is chosen for its craft, its material honesty, and
the quiet warmth it brings to a space.
</p>
<div class="card-grid">
<div class="card">
<div class="card__icon card__icon--terracotta">◈</div>
<h3>Natural Materials</h3>
<p>Rattan, jute, linen, and raw wood -- materials that age
beautifully and connect you to the earth.</p>
</div>
<div class="card">
<div class="card__icon card__icon--sage">☘</div>
<h3>Clean Simplicity</h3>
<p>Scandinavian structure brings order and calm, ensuring
every element has purpose and space to breathe.</p>
</div>
<div class="card">
<div class="card__icon card__icon--mustard">★</div>
<h3>Artisan Touch</h3>
<p>Handcrafted details and collected textures bring bohemian
soul to every surface and corner.</p>
</div>
</div>
</div>
</section>
<div class="container"><hr class="divider"></div>
<!-- Feature Split -->
<section class="container">
<div class="feature-split">
<div class="feature-split__image">
<span class="feature-split__image-placeholder">woven textures + warm light</span>
</div>
<div class="feature-split__content">
<p class="section__label">Our Philosophy</p>
<h2>Less, but Warmer</h2>
<p>We believe in the Scandinavian principle of owning fewer, better
things -- and the bohemian wisdom that those things should have
a story, a texture, and a human touch.</p>
<a href="#" class="btn btn--primary">Learn More</a>
</div>
</div>
<div class="feature-split feature-split--reverse">
<div class="feature-split__image">
<span class="feature-split__image-placeholder">dried botanicals + ceramic</span>
</div>
<div class="feature-split__content">
<p class="section__label">Sustainability</p>
<h2>Made to Last</h2>
<p>Every material is chosen for longevity and low impact. Natural
fibers, responsible sourcing, and timeless design that won't
end up in landfill next season.</p>
<a href="#" class="btn btn--outline">Our Materials</a>
</div>
</div>
</section>
<div class="container"><hr class="divider"></div>
<!-- Testimonial -->
<section class="section">
<div class="container container--narrow">
<div class="testimonial">
<blockquote>
The balance is what makes it special -- clean enough to think
clearly, warm enough to feel at home. It is a rare thing when
simplicity and soul coexist this naturally.
</blockquote>
<cite>Astrid Larsen, Interior Stylist</cite>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="section">
<div class="container container--narrow">
<div class="newsletter">
<h2>Stay in the Loop</h2>
<p>New pieces, styling ideas, and slow-living inspiration
-- delivered to your inbox.</p>
<form class="newsletter__form">
<input type="email" class="newsletter__input" placeholder="your@email.com">
<button type="submit" class="btn btn--primary">Subscribe</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__inner">
<div>
<p class="footer__brand">Scandi Boho</p>
<p class="footer__tagline">where clean lines meet woven warmth</p>
</div>
<div class="footer__links">
<h4>Explore</h4>
<ul>
<li><a href="#">Collection</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
<div class="footer__links">
<h4>Connect</h4>
<ul>
<li><a href="#">Instagram</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<p class="footer__bottom">Scandi Boho Studio. Crafted with intention.</p>
</div>
</footer>
</body>
</html>
repeating-linear-gradient in two perpendicular directions at very low opacity (0.015-0.025) to simulate woven textile without loading image assets; this creates a warm, tactile background with zero performance costrgba(61, 51, 44, ...) (the espresso text color) rather than pure black; even at identical opacity values, warm-tinted shadows feel softer and more cohesive with the palettefilter: saturate(90%) sepia(5%) brightness(102%) to photographs to gently pull them into the warm, slightly desaturated Scandi Boho palette; this prevents jarring color clashes from untreated stock images#C07856) as your single dominant accent for CTAs, active navigation states, and key highlights; introduce sage and mustard as secondary accents only in supporting roles to maintain visual hierarchy#FFFFFF with #FAF6F0 or #F0E8DC for all backgrounds and surfaces; pure white reads as cold and clinical against the warm palette and breaks the Scandi Boho illusion