Design Atlas
한국어
⚙ Product & industrial design

Colour, material, finish (CMF)

컬러·소재·마감(CMF)

The discipline of changing only colour, material, and surface finish on an identical form to create a completely different impression, feel, and price tier.

Also known as: Color Material FinishCMF 디자인
···
html
<div class="cmf-caps"><span>gloss ABS</span><span>soft-touch TPE</span><span>brushed aluminum</span></div>
css
.cmf-caps{position:absolute;left:0;right:0;bottom:6%;display:flex;justify-content:space-around;font-size:clamp(8px,2.3vmin,12px);color:#f1f0eccc;text-align:center;padding:0 4%}
js
import * as THREE from 'three';
import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0d0d12);
const camera = new THREE.PerspectiveCamera(40, 1, 0.1, 100);
camera.position.set(0, 0.5, 7.2);
const geo = new RoundedBoxGeometry(1.15, 1.7, 0.55, 4, 0.16);
const mats = [
  new THREE.MeshPhysicalMaterial({ color: 0xe0393e, roughness: 0.12, metalness: 0.05, clearcoat: 1, clearcoatRoughness: 0.1 }),
  new THREE.MeshStandardMaterial({ color: 0x8fae94, roughness: 0.92, metalness: 0 }),
  new THREE.MeshStandardMaterial({ color: 0xb9bec4, roughness: 0.32, metalness: 0.92 }),
];
const group = new THREE.Group();
mats.forEach((m, i) => {
  const mesh = new THREE.Mesh(geo, m);
  mesh.position.x = (i - 1) * 1.9;
  group.add(mesh);
});
scene.add(group);
const key = new THREE.DirectionalLight(0xffffff, 2.2); key.position.set(3, 4, 5); scene.add(key);
const rim = new THREE.DirectionalLight(0x8fb0ff, 0.8); rim.position.set(-4, -2, -3); scene.add(rim);
scene.add(new THREE.AmbientLight(0xffffff, 0.45));
function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  group.rotation.y = Math.sin(t * 0.00035) * 0.55;
  group.children.forEach((m) => { m.rotation.y = t * 0.0002; });
  camera.lookAt(0, 0, 0);
  renderer.render(scene, camera);
});

CMF stands for Color, Material, Finish — the big decision space that remains even after a product's form is locked. The exact same injection-molded shell can look like a toy in glossy red ABS, like a calm appliance in matte soft-touch sage green, or like a premium device in brushed aluminum. One mold, several price tiers and audiences.

Finish affects the hand more than color does. The same color in gloss shows fingerprints and hot spots of reflection; in matte it hides prints but shows scratches more; soft-touch TPU feels great on day one but some formulations turn sticky after a few years as the coating hydrolyzes — so a finish choice is also a durability bet. That's why CMF decisions rarely happen at a designer's desk alone; they happen with material engineers and buyers, holding physical injection-molded color chips side by side.

It's the same move as swapping a "theme" or design tokens on a digital product: keep the component's structure (the form) fixed, and change only the color tokens and surface style (shadow, corner radius) to produce several brand skins — CMF is that, applied to a single mold.

When to use

When one form needs to spawn several product lines (color options, pro vs. light tiers), or when a material's feel and durability will define the brand impression.