Terracotta to Titanium: Building a Material-Inspired Color System for Product Pages

Over the past year, e-commerce design has been moving away from the flat, sterile palettes of 2010s minimalism. DTC and luxury brands are switching to palettes drawn from real materials: clay, stone, brushed metal, raw linen. Aesop, Mejuri, and a wave of newer DTC brands are building product pages around colors that feel tactile rather than digital.

The practical question is how to pull colors from physical textures and turn them into a working, accessible design system, instead of a mood board pinned to a Figma file. Below is a repeatable method, step by step, plus four ready-to-use palettes with hex values, semantic roles, and accessibility notes.

Why material palettes are replacing abstract swatches

For nearly a decade, the default product page looked the same: white background, one sans-serif font, a single blue or black accent. It was clean, and completely interchangeable. Shoppers scrolled through dozens of stores that felt identical and stopped noticing the brands.

A backlash was bound to come. Instead of swinging to maximalism or wild gradients, designers turned to the colors of physical materials.

There's some psychology behind it. Colors tied to familiar textures, like warm terracotta, cool slate, or soft linen, call up what researchers call haptic memory. You don't only see "muted orange"; you remember the warmth and weight of fired clay. In e-commerce, where customers can't touch the product, that shortcut helps.

This isn't skeuomorphism. Nobody is adding faux leather textures to buttons. You're deriving a flat color system from physical materials to get warmth and coherence without gimmicks.

Step 1: Pull colors from physical textures

Start by choosing 3 to 5 physical textures that match your brand's positioning. An artisan ceramics brand might pick terracotta, linen, and charred wood. A premium tech brand might choose titanium, concrete, and oxidized copper. Photograph these materials under neutral lighting, or source high-quality texture images from resources like Unsplash or material libraries.

Sampling

Open your texture image in Adobe Color, Coolors, or Figma with the eyedropper. Pull 5 to 8 candidate colors from each texture. The common mistake is sampling only the dominant, obvious hue. Terracotta is more than orange. It has cool shadow tones, warm midtones, and pale highlights. Sample across the full range of the texture.

Filtering and refining

Raw samples are noisy, with inconsistent undertones and unpredictable saturation. The fix is simple: nudge each hex value toward a shared undertone (either warm or cool) to unify the set. In HSL terms, this means pulling all your hues into a narrower range and evening out saturation so no single swatch feels like it belongs to a different palette.

Names that stick

Name colors after their source material: "Fired Clay," "Wet Slate," "Brushed Nickel," rather than "Orange 400" or "Gray 3." Material names carry design intent across teams and become a brand asset in their own right. When a developer sees --color-accent-terracotta, the intent is obvious.

Step 2: Build a palette from the samples

Next, organize your refined swatches into a working palette.

The 60-30-10 rule, adapted

Assign your lightest, most neutral material color as the dominant (60%) surface. A mid-tone material color fills the secondary role (30%) for cards, containers, and dividers. Your richest, deepest material color is the accent (10%) for CTAs and main interactive elements.

Tonal ramps

For each material color, generate a 5-step tint/shade scale from near-white to near-black. That covers every UI state: hover, disabled, selected, focus, error. Without ramps, you'll keep inventing one-off colors that wear the system down.

Checking harmony

Pull up your palette in HSL view. Your hues should cluster within a controlled range, either analogous or split-complementary. Saturation levels should be roughly consistent. If one color shouts over its muted neighbors, lower its saturation until it fits.

It also helps to have a "material bridge" color: a neutral that shows up in several of your source textures, like the gray-beige in both raw linen and limestone. It ties the palette together and smooths the move between warmer and cooler areas.

Step 3: Assign semantic roles

Every color in your system needs a job. Map each palette color to a specific semantic role:

• Page background: Your lightest material color (linen, birch, bleached sand)
• Card/surface background: A slightly darker neutral
• Body text: A deep, warm or cool near-black from your darkest material
• Heading text: Same family, slightly lighter for hierarchy
• Primary CTA: Your most vivid material color (terracotta, oxidized copper)
• Secondary CTA: A muted mid-tone version
• Borders and dividers: Your bridge neutral at low opacity
• Feedback colors: Success, error, and warning states

Material logic

Let the physical properties of each material guide its UI role. Heavy, dark materials like slate and iron anchor as text or footer backgrounds. Light, airy materials like linen and sand become page surfaces. Vivid materials like terracotta or oxidized copper become call-to-action buttons.

Feedback colors

Success green, error red, and warning yellow rarely come from your materials. Tint the standard feedback hues with your palette's dominant undertone instead. If your palette runs warm, add a touch of yellow-orange to your greens and reds so they look like they belong with everything else.

Document with design tokens

Codify everything as CSS custom properties or JSON tokens for developer handoff:

:root { --color-surface-linen: #F5F0E8; --color-surface-cotton: #E8DFD0; --color-accent-terracotta: #C2663A; --color-text-charcoal: #2C2420; --color-cta-fired-earth: #8B3A1F; --color-feedback-success: #5A7A52; --color-feedback-error: #B04A3A;
}

Meeting WCAG without losing the warmth

Material palettes have a built-in problem. They skew toward mid-tone, low-contrast, warm hues, which is exactly the range where WCAG AA failures pile up. The AA standard requires a 4.5:1 contrast ratio for normal text and 3:1 for large text and UI components.

Auditing contrast

Test every text-on-background combination in your semantic mapping with WebAIM's Contrast Checker or the Stark plugin in Figma. Do it early, not after the design is final.

Adjusting colors that fail

When a combination fails, shift the lightness value (L in HSL) and keep hue and saturation. A terracotta can go from L:45 to L:35 and pass on a linen background while still reading as terracotta.

Accessible accents

For CTA buttons, try your material accent with both pure white and near-black text. Often one passes easily. Reserve your most vivid material color for large interactive elements where the more forgiving 3:1 ratio applies. Small body text gets the high-contrast pairings.

Four material-inspired palettes

Each comes with hex values, suggested roles, and accessibility notes.

Palette 1: Artisan Warmth

Terracotta, linen, and charred wood. Ideal for ceramics, handmade goods, and artisan food brands.

Recommended CTA pairing: Fired Earth (#8B3A1F) with white text (contrast ratio 7.2:1, passes AA). Caveat: Dried Clay on Linen White fails AA for small text. Use it only for decorative borders or large display type.

Palette 2: Nordic Stone

Granite, moss, and birch. A cooler, Scandinavian-style system for minimalist furniture and homeware brands.

Recommended CTA pairing: Fjord Slate (#3E4347) with Birch White text (contrast ratio 8.1:1). Caveat: Lichen Green on Birch White fails AA for small text at 3.8:1. Use only for large-text contexts or iconography.

Palette 3: Industrial Luxe

Titanium, concrete, and oxidized copper. High-contrast and modern, built for tech products and premium hardware.

Recommended CTA pairing: Oxidized Copper (#B05E3A) with white text (contrast ratio 4.6:1, passes AA). Caveat: Brushed Titanium on Polished Silver is too low-contrast for text. Reserve it for subtle dividers.

Palette 4: Coastal Craft

Sand, driftwood, and indigo sea. A warm-cool hybrid for lifestyle, resort, and home textile brands.

Recommended CTA pairing: Deep Indigo (#2E4057) with Bleached Sand text (contrast ratio 9.3:1). Caveat: Sea Glass on Bleached Sand sits at 3.2:1. Safe for large text and decorative use only.

Putting it into practice

A few notes to help you avoid the usual problems.

Start narrow. Apply one palette to a single product category or sub-line. Don't force one material palette across very different product types. A terracotta palette that suits ceramics can look wrong next to neon running shoes.

Test on real product photography. Material palettes can clash with product images if the product itself has strong, competing colors. Use your neutral and bridge colors as safe zones around product images. Reserve material accents for UI chrome, buttons, and typography.

Dark mode translates naturally. Material palettes handle dark mode better than abstract ones. Invert your tonal ramp: the deepest material color becomes the background, and the lightest becomes text and surface color. The material associations still hold. Charred Bark as a dark background looks intentional.

Iterate with real users. A/B test your material palette against the current system on a single product page before a full rollout. Track add-to-cart rate and time-on-page as proxies for engagement and trust. The numbers will tell you whether the warmth is working.

Closing thoughts

Online shoppers can't touch what they're buying, and material color systems are one way to make up for that. A palette grounded in real textures gives customers a sensory anchor that flat, arbitrary colors can't.

The method is repeatable: pull colors from physical textures, organize them into a structured palette, assign semantic roles, and audit for accessibility. Start by photographing one material that sums up your brand, then work through the steps.

The best color systems feel like something, which is harder than looking good, and that feeling is what makes a product page feel like a brand.