Ana Sayfa AI Eğitimler Projeler Araçlar
Vibe Kit / Stil / Design Tokens

Liquid Glass — Design Token Seti

Cam efektli arayüzler için tüm CSS variable'larını içeren token sistemi.

Yazar: VibeCodingEx Team MIT ↑ 0 kopyalama 👁 1
:root {
  /* Surface */
  --bg-base: #000000;
  --bg-elevated: #0a0a0f;

  /* Text */
  --text: #ffffff;
  --text-muted: rgba(255,255,255,0.7);
  --text-soft: rgba(255,255,255,0.6);
  --text-subtle: rgba(255,255,255,0.5);
  --text-faint: rgba(255,255,255,0.4);

  /* Glass */
  --glass-bg: rgba(255,255,255,0.01);
  --glass-bg-hover: rgba(255,255,255,0.05);
  --glass-border-top: rgba(255,255,255,0.45);
  --glass-border-mid: rgba(255,255,255,0.15);
  --glass-shadow-inset: rgba(255,255,255,0.10);
  --glass-divider: rgba(255,255,255,0.10);

  /* Accent */
  --accent: #a78bfa;
  --accent-deep: #7c3aed;

  /* Radius */
  --r-pill: 9999px;
  --r-card: 24px;
  --r-soft: 16px;
  --r-tight: 12px;

  /* Spacing scale (px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Fonts */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Motion */
  --ease-out: cubic-bezier(.2, .6, .2, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.3s;
  --dur-slow: 0.6s;
}

/* Liquid glass utility class */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border-mid);
  box-shadow: inset 0 1px 1px var(--glass-shadow-inset);
}