DESIGN TOKEN REFERENCE

Bir ölçü sistemiyle daha sakin arayüzler.

CKCSS tokenları component ve layout kararlarını ortak bir ölçeğe bağlar. Tüm değerler tek CSS linkinden sonra override edilebilir.

01 · İZNİK PALETİ

50’den 950’ye kaynak renkler.

Kobalt, turkuaz, bole mercanı, yaprak yeşili, hardal, erguvan ve sır beyazı 11 basamaklı ham palettir. 50–200 hafif yüzeyler, 300–400 sınırlar, 500–700 aksiyonlar, 800–950 koyu yüzeyler içindir. Bileşenler yalnızca semantic roller kullanır.

:root {
  /* Ham kaynak paleti */
  /* Her aile: 50, 100, …, 900, 950 */
  --ck-iznik-glaze-50: #fdfbf6;
  --ck-iznik-glaze-950: #1d232d;
  --ck-iznik-cobalt-50: #eaf1f8;
  --ck-iznik-cobalt-500: #225a9b;
  --ck-iznik-cobalt-950: #101f35;
  --ck-iznik-turquoise-100: #d8eeee;
  --ck-iznik-bole-700: #a53526;

  /* Bileşen sözleşmesi */
  --ck-color-surface: var(--ck-iznik-glaze-100);
  --ck-color-text: var(--ck-iznik-ink);
  --ck-color-primary: var(--ck-iznik-cobalt-500);
  --ck-color-danger: var(--ck-iznik-bole-700);
  --ck-font-display: "Aleo", Georgia, serif;
}

.project-notice {
  background: var(--ck-iznik-turquoise-50);
  border: 1px solid var(--ck-iznik-turquoise-200);
  color: var(--ck-iznik-turquoise-800);
}

Ham tokenlar yerel marka detayları içindir; .ck-button gibi framework bileşenlerinde yalnızca --ck-color-* kullanılır. Metin/yüzey eşleşmelerinde kontrastı kontrol edin.

02 · TYPE & SPACE

Typography ve spacing

Font size, line-height, tracking ve spacing birlikte çalışır; responsive değerler token ölçeğini korur. Tek isimli ölçek: --ck-font-size-xs, --ck-font-size-sm, --ck-font-size-md, --ck-font-size-lg, --ck-font-size-xl, --ck-font-size-2xl ve --ck-font-size-display.

.project-copy {
  font-size: var(--ck-font-size-lg);
  line-height: var(--ck-line-relaxed);
  max-inline-size: 72ch;
  margin-block-end: var(--ck-space-6);
}

03 · GEOMETRY & MOTION

Radius, shadow ve motion

Component seviyesinde sınırlı geometri ve motion kullanın; her öğeye rastgele değer vermeyin.

.project-card {
  border-radius: var(--ck-radius-lg);
  box-shadow: var(--ck-shadow-sm);
  transition-duration: var(--ck-duration-standard);
  transition-timing-function: var(--ck-ease-standard);
}