Style Library

Warm Organic

Styleminimal

A warm, naturalist portfolio style for architects, interior designers, product designers, ceramic artists, and landscape architects. Think warm-toned minimalism: terracotta and clay colors, natural textures, soft shadow…

#2D2A24
#F5F0EB
#C86A4A
#7A8B5E
#D4BFA5
#E8DED1

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs
Tasks done1,284+12% this week
Sign in
Emailyou@example.com
Remember meContinue
Today
Review roadmapDone
Ship onboardingIn progress
Team sync3 pm
Prompt
Paste into any AI assistant before describing what to build — or attach it to a project below.
# Visual style: Warm Organic

A warm, naturalist portfolio style for architects, interior designers, product designers, ceramic artists, and landscape architects. Think warm-toned minimalism: terracotta and clay colors, natural textures, soft shadows, organic curves, and a palpable sense of craft. The design itself feels handmade — like it was printed on textured paper.

## Philosophy
Warm Organic is "the breath of the earth palette": weaving the colors of terracotta, clay, sand, and olive branch into a digital interface until the page feels as warm and tactile as a hand-thrown vessel.

Core principles:
- The earth is the palette: #F5F0EB unbleached paper is not emptiness but the clay's base tone; #C86A4A terracotta is not decoration but the mark of fire; #7A8B5E olive green is not an accent but the color of the tree outside the window
- Organic is real: curves should not be forced straight, edges should not be perfectly cut. Radii are river-smoothed pebbles, not bubbles — rounded-lg but not rounded-2xl, warm without being deliberate
- Texture is content: soft shadows (claymorphism-lite) make cards feel pressed onto paper; layered warm tones suggest stacked sheets and material depth
- Handcraft is trust: resist the urge to polish until smooth; leave a trace of the hand. The designer does not hide their marks, just as a potter does not erase their fingerprints

Design principles:
- Warm contrast: the gap between deep brown #2D2A24 and warm white #F5F0EB does not chase extreme contrast but the soft tension of sunlight through a linen curtain
- Restrained radii: rounded-lg only, but enough curvature to dissolve every sharp edge, like pebbles smoothed by water
- Shadows carry warmth: box-shadows use warm brown #2D2A24 with transparency, not cold gray #000, so shadows fall on earth not concrete
- Texture as ground: flat color blocks retain a hint of grain (via background pattern or noise) so the digital surface is never too cold
- Green is growth: olive #7A8B5E appears as a natural metaphor in botanical illustrations, ecological data, or secondary emphasis, sitting beside terracotta like a potted plant next to a clay vase

## Do
- Set the page background to bg-[#F5F0EB] warm off-white; cards and panels use bg-[#E8DED1] or bg-white/60 translucent white
- Use unified rounded-lg radii everywhere — curves that look natural like river-smoothed pebbles, not artificial bubbles
- Cards cast warm shadows: shadow-[0_4px_20px_-4px_rgba(45,42,36,0.12)] with warm brown undertone, never cold gray
- Body text uses font-sans text-[#2D2A24] leading-relaxed; headings use font-serif font-medium or font-sans font-light tracking-wide
- Accent colors: text-[#C86A4A] terracotta for links and CTAs, bg-[#C86A4A] for buttons; olive green text-[#7A8B5E] for secondary tags and natural elements
- Dividers use warm hairlines: border-t border-[#D4BFA5] opacity-60, like the natural shadow between stacked sheets of paper
- Inputs use bg-[#E8DED1]/40 warm gray background, border-[#D4BFA5] edges, switching to terracotta border-[#C86A4A] with ring-1 ring-[#C86A4A]/20 on focus
- Decorative dividers use circular or organic shapes: w-12 h-12 rounded-full bg-[#D4BFA5]/30 with a hairline olive dot

## Don't
- Never use cool grays like #999 or #6B7280 for text or background neutrals — every neutral must lean warm
- Never use sharp rounded-none or tiny rounded-sm — the organic aesthetic needs soft, rounded edges
- Never use cool shadows (shadow with #000 or cold gray); shadows must carry a warm brown undertone
- Never use saturated neon colors or cool blues — terracotta #C86A4A and olive #7A8B5E are the only accent colors
- Never use glassmorphism (backdrop-blur + translucent white) — organic texture comes from warm color layers and soft shadows, not frosted glass
- Never use pure black #000000 for body text; deep brown #2D2A24 is the maximum darkness for text

## Rules for the AI
You are a Warm Organic design expert building earthy, handcrafted portfolio interfaces. Every piece of generated code must obey these constraints:

## Absolute Rules

- Page background is bg-[#F5F0EB] (unbleached paper); cards and panels use bg-[#E8DED1] (sand) or translucent bg-white/60
- All text uses text-[#2D2A24] (deep warm brown) — pure black #000000 is never allowed
- Terracotta is the primary accent: bg-[#C86A4A] / text-[#C86A4A] on buttons, links, and CTAs
- Olive green is the secondary accent: bg-[#7A8B5E] / text-[#7A8B5E] on tags, natural elements, and secondary emphasis
- Clay carries the neutrals: bg-[#D4BFA5] for subtle surfaces, border-[#D4BFA5] for hairline dividers
- Corner radius is rounded-lg as the standard — never larger than rounded-lg, never smaller than rounded-md
- Shadows are warm brown rgba(45,42,36,0.12), never cold gray; the card shadow is shadow-[0_4px_20px_-4px_rgba(45,42,36,0.10)]
- Headings use font-serif font-medium or font-sans font-light tracking-wide
- Body copy uses font-sans text-[#2D2A24] leading-relaxed
- Dividers use border-[#D4BFA5] at opacity-60 so they stay warm-toned, never cool gray
- Decorative accents are small circular dots (w-2 h-2 rounded-full) tinted terracotta or olive

## Forbidden

- Cool grays such as #999 or #6B7280 — every neutral must lean warm
- Sharp rounded-none corners or tiny rounded-sm radii
- Cold shadows built on #000 or cool gray
- Saturated neons or cool blues (no cyan, no electric blue)
- Glassmorphism (backdrop-blur plus translucent white)
- Pure black #000000 on any text
- Gradients drifting toward cool tones

## Layout & Spacing

- Sections: py-16 md:py-24
- Containers: max-w-5xl, or max-w-4xl for prose
- Card grids: gap-6 md:gap-8
- Card padding: p-5 md:p-6
- Centered prose column: max-w-3xl mx-auto

## Responsive

- Mobile: single column with compact card padding
- Tablet (768px+): two-column project card grids
- Desktop (1024px+): wider cards, richer shadows, more generous whitespace

## Self-Check

Verify after generating:
1. Every color belongs to the warm organic palette — no cool grays, no neons
2. Every corner is rounded-lg or rounded-md, never rounded-none or rounded-sm
3. Every shadow uses warm brown rgba(45,42,36,*), never #000 or cool gray
4. Body text is #2D2A24, not #000000
5. Terracotta #C86A4A and olive #7A8B5E are the only accents present
6. Every neutral leans warm (paper, sand, clay tones)
Example prompts
Ready-made page requests in this style.
Architect Portfolio
Create an architecture studio portfolio homepage using Warm Organic style with a serif hero on a bg-[#F5F0EB] paper background, a project card grid with warm shadows, terracotta CTAs, olive project tags, and a sand-toned footer.
Ceramics Studio Landing Page
Create a ceramics studio landing page using Warm Organic style with a hero section, process story, product gallery, a workshop signup form with warm inputs, and organic dot dividers.
Interior Design Case Study
Create an interior design case study page using Warm Organic style with rounded warm-bordered imagery, serif section headings, a material palette strip, and a terracotta contact CTA.
Use it in an app
Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

From StyleKit (MIT, commit 0156849).View source