디터 람스의 10원칙

<div class="drp-card"><div class="drp-num">01</div><div class="drp-text"><div class="drp-en">Good design is innovative</div><div class="drp-ko">혁신적이다</div></div><div class="drp-dots"></div></div>

.drp-card{display:flex;flex-direction:column;align-items:center;gap:.5em;width:100%;height:100%;justify-content:center;padding:4%}
.drp-num{font-size:clamp(20px,8vmin,44px);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.drp-text{text-align:center;min-height:3.4em}
.drp-en{font-size:clamp(11px,3vmin,17px);color:var(--fg);font-weight:600}
.drp-ko{font-size:clamp(9px,2.4vmin,13px);color:var(--muted);margin-top:.3em}
.drp-dots{display:flex;gap:.35em}
.drp-dots span{width:.45em;height:.45em;border-radius:50%;background:var(--line)}
.drp-dots span.on{background:var(--accent)}

const PRINCIPLES = [
  ['Good design is innovative', '혁신적이다'],
  ['Good design makes a product useful', '제품을 유용하게 만든다'],
  ['Good design is aesthetic', '미적이다'],
  ['Good design makes a product understandable', '이해하기 쉽게 만든다'],
  ['Good design is unobtrusive', '튀지 않는다'],
  ['Good design is honest', '정직하다'],
  ['Good design is long-lasting', '오래간다'],
  ['Good design is thorough down to the last detail', '마지막 디테일까지 철저하다'],
  ['Good design is environmentally friendly', '환경을 생각한다'],
  ['Good design is as little design as possible', '최소한으로 디자인한다'],
];
const num = document.querySelector('.drp-num');
const en = document.querySelector('.drp-en');
const ko = document.querySelector('.drp-ko');
const dots = document.querySelector('.drp-dots');
dots.innerHTML = PRINCIPLES.map(() => '<span></span>').join('');
const dotEls = [...dots.children];
let i = 0;
function render() {
  num.textContent = String(i + 1).padStart(2, '0');
  en.textContent = PRINCIPLES[i][0];
  ko.textContent = PRINCIPLES[i][1];
  dotEls.forEach((d, j) => d.classList.toggle('on', j === i));
}
render();
setInterval(() => { i = (i + 1) % PRINCIPLES.length; render(); }, 2000);