Depth
Two stacked shadows give cards real thickness, as if they are sitting slightly above the background.
Demo Site 4 — Clay style
Soft edges, solid build.
Clay style makes interfaces feel moulded by hand. Rounded corners, soft layered shadows and warm colour turn a flat page into something you want to press.
What this theme does
Four habits that make a flat page feel moulded rather than drawn.
Warmth
Terracotta and sage keep the palette friendly and human, which suits products aimed at everyday customers.
Friendly
Large radii and pill buttons make every control approachable, with touch targets sized for thumbs.
Soft light
A 2px white inset along the top edge is what makes a surface read as moulded rather than drawn.
The theme in numbers
Softness still has to be measured somewhere, and these are the numbers that matter.
-
36px
Largest radius
Cards, panels and dialogs all curve at the same generous scale.
-
2
Stacked shadows
A wide soft drop plus a 2px highlight, which is the whole trick.
-
44px
Touch target
Every control is at least a thumb wide on the smallest phone.
-
5
Warm hues
Cream, terracotta, coral, sage and one deep brown for the text.
Typography and spacing
The same specimen as the other demos, in the warm palette, so you can see how much of the feeling comes from colour alone.
-
Display 68px
Made by hand
-
Heading 36px
Soft edges, clear ideas
-
Title 22px
Card and panel titles
-
Body 17px
Warm brown on cream, which stays calm and readable in both modes.
-
Caption 13px
Labels, tags and metadata
- Display
- Inter 800, rounded off by a 36px radius rather than by the type itself.
- Body
- Inter 400 at 17px on 1.65, coloured a deep brown rather than grey.
- Radii
- 14px small, 24px medium, 36px large, and 999px for pills and chips.
- Shadows
- 0 18px 40px at 20 percent, always paired with a 2px white inset.
- Surfaces
- A 160 degree gradient from --surface to --bg, so no card is flat.
- Accent
- Terracotta in light, coral in dark, kept warm so it never feels cold.
- Motion
- A 250ms lift of 6px. Slow enough to feel physical, short enough to feel instant.
- Targets
- 44px minimum, with 16px of clear space between adjacent controls.
- Grid
- Auto-fit columns with a 22px gap, so cards stretch rather than stack early.
- Files
- 3 HTML, 2 CSS, 2 JS. No images and no shadow libraries.
What you get in the box
Six things already solved, all of them CSS, with nothing to download alongside.
-
Moulded surfaces
A gradient plus an inset highlight is the whole illusion, and it costs two declarations rather than an image.
-
Warm contrast
Deep brown on cream is gentler than black on white but clears AA comfortably, and it holds up in the dark mode too.
-
Thumb-sized targets
Nothing interactive is smaller than 44px, with 16px of clear space around it, so it is usable one-handed.
-
Touch feedback
Cards lift 6px on hover and settle back on focus, so the press is felt on a keyboard as well as a finger.
-
Reduced motion
The lift and the arrow movement collapse when the system requests less animation.
-
No dependencies
The depth is pure CSS, so it costs nothing to download and nothing to maintain.
How a build with this theme goes
Four steps. Step two, the inset highlight, is the one that changes everything.
-
1
Round everything
Radii are chosen in threes, then used without exception. One square corner is what makes a soft theme look broken.
-
2
Add the light
A 2px white inset along the top of every surface. This single declaration sells the clay look.
-
3
Keep it warm
Hues stay in the terracotta and sage range. A single cold grey is enough to make the whole page look clinical.
-
4
Test the press
Every interactive element is checked with a thumb on a real phone, not a cursor on a desktop.
Is this the right theme for you?
Warmth is a decision about your brand, not just a coat of paint. Here is the honest split.
Use it when
- Wellness, fitness and mental health services.
- Education, courses and anything aimed at first-time users.
- Healthcare bookings, and family or children products.
- Onboarding flows and consumer apps that need to feel safe.
Skip it when
- Data-dense dashboards, where softness competes with precision.
- Legal, insurance and financial pages, where gravity is the point.
- Technical documentation, which reads better on a flat surface.
- Minimal or luxury brands, where this warmth is too chatty.
Questions people ask
The six things clients ask once they have seen a page built in this style.
Is clay style just rounded corners?
No. The radii are the easy part. What sells it is the pair of shadows: a wide, very soft drop in a warm colour, plus a 2px white inset along the top edge. Remove the inset and the same cards look like flat rectangles with big corners.
Does it work for a serious business?
It depends on what you sell. Serious is not the same as cold. Plenty of clinics, studios and advisers use a softened style and simply keep the palette more neutral. The depth does not have to be warm to work.
What happens in dark mode?
The same warmth, deepened. Cream becomes a soft clay brown, terracotta becomes coral, and the highlight inset drops to 8 percent white so it still reads as light rather than as a grey line.
Can I make it less rounded?
Yes, and you should if your brand is sharper than this. Bring the three radii down to 4, 8 and 12, and raise the shadow opacity slightly. Keep all three in step with each other rather than changing one at a time.
Does it load slowly on a cheap phone?
No. The depth is two box-shadows and a linear gradient, both of which the compositor handles without a repaint. The heaviest thing on the page is still the web font.
Is it accessible?
Warmth is not an exemption. Every text and background pair clears WCAG AA in both modes, focus rings are 2px and never suppressed, interactive targets are at least 44px, and the FAQ uses native disclosure widgets so keyboard and screen reader behaviour is correct.
Our booking rate went up the week we launched. Patients told us the site finally looked like the place it describes.
Live colour palette
Ten tokens, two palettes, each one warm enough to keep the clay feeling in both modes. The code under each chip is read live from the computed style.
- Background --bg
- Surface --surface
- Surface tint --surface-strong
- Primary --primary
- Primary soft --primary-soft
- Secondary --secondary
- Accent --accent
- Text --text
- Muted --muted
- Border --border
Light mode is warm cream with terracotta. Dark mode deepens to a soft clay brown with a coral accent, so the warmth survives the night. The value under each chip is read live from the computed style.
Try the other themes
Seven other personalities to compare against, with your colour mode carried across.
- Demo Site 1 · Minimalism Less, but better. Monochrome, hairline rules and one accent spent only where it matters. Open the demo
- Demo Site 2 · Futuristic Built for what comes next. Deep blue, glow and a technical grid. Reads as fast and engineered. Open the demo
- Demo Site 3 · Pixel art Press start to build. Hard edges, chunky borders and a tiny palette lifted from 8-bit games. Open the demo
- Demo Site 5 · Retro Warm, printed, unhurried. Cream stock, a serif throughout and rules heavy enough to be seen. Open the demo
- Demo Site 6 · Pop art Loud on purpose. Flat primaries, ink outlines and a halftone ground. Impossible to ignore. Open the demo
- Demo Site 7 · Maximalism Everything, all at once. Dense colour and stacked decoration, with no empty space anywhere. Open the demo
- Demo Site 8 · Editorial Ink, paper, one red rule. High-contrast serif headlines set like a magazine feature. Open the demo
Want something warmer for your business?
Tell us who your customers are and what they are nervous about. We will build a one-page version in this style so you can feel the difference before you commit.
Replies within one working day. No newsletter and no follow-up calls.