15 — Arayüz ve Marka Standartları

Kimin için: Frontend geliştiricileri ve UI/UX tasarımcıları.
Ön koşul: Temel CSS ve HTML/JSX bilgisi.
Tahmini süre: 10 dakika.

Ne Öğreneceksiniz

• Resmi "TALOST ID ile Giriş Yap" buton tasarımını ve varyantlarını,
• Kullanıcı profil ve hesap açılır menüsü (UserMenu) standardını,
• Marka renkleri, tipografi ve erişilebilirlik (a11y) kurallarını.

"TALOST ID ile Giriş Yap" Butonu

Kullanıcıların tek tıkla oturum açabilmesi için giriş sayfanızda TALOST ID butonu belirgin bir şekilde yer almalıdır:

1. Tasarım Kuralları

• Metin: "TALOST ID ile Giriş Yap" (veya İngilizce için "Sign in with TALOST ID").
• Tipografi: System sans-serif veya Inter, ağırlık: 500 (Medium) veya 600 (Semibold).
• Köşe Yuvarlama: 6px – 8px (border-radius: 8px).
• Renkler:
  • Koyu Tema (Dark): Arka plan #18181B (Zinc-900), Metin #FFFFFF, Kenarlık #27272A.
  • Açık Tema (Light): Arka plan #FFFFFF, Metin #09090B, Kenarlık #E4E4E7.

Kod Örneği: React / Tailwind CSS Buton Bileşeni

import React from "react";

interface TalostLoginButtonProps {
  href?: string;
  onClick?: () => void;
  variant?: "dark" | "light";
  className?: string;
}

export function TalostLoginButton({
  href = "/api/auth/login",
  onClick,
  variant = "dark",
  className = "",
}: TalostLoginButtonProps) {
  const isDark = variant === "dark";

  return (
    <a
      href={href}
      onClick={onClick}
      className={`inline-flex items-center justify-center gap-3 px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-150 shadow-sm border ${
        isDark
          ? "bg-zinc-900 hover:bg-zinc-800 text-white border-zinc-700"
          : "bg-white hover:bg-zinc-50 text-zinc-900 border-zinc-300"
      } ${className}`}
      role="button"
    >
      {/* TALOST ID İkonu */}
      <svg className="w-5 h-5 flex-shrink-0" viewBox="0 0 24 24" fill="none">
        <rect width="24" height="24" rx="5" fill="#3B82F6" />
        <path d="M7 8H17M12 8V17" stroke="white" strokeWidth="2.5" strokeLinecap="round" />
      </svg>
      <span>TALOST ID ile Giriş Yap</span>
    </a>
  );
}

Kullanıcı Hesap Menüsü Standardı

Kullanıcı giriş yaptığında uygulamanızın sağ üst köşesinde standart bir profil kartı sunulmalıdır:

1. Avatar & İsim: Kullanıcının picture ve name alanları.
2. Kalıcı Menü Öğeleri:
   • Hesap Ayarları: https://id.talost.com/panel/profil (Harici link).
   • Abonelik & Faturalar: https://id.talost.com/panel/abonelikler (Harici link).
   • Çıkış Yap: Uygulamanızın /api/auth/logout rotası.

İlgili Sayfalar

• 04.1. Web Sunucu Girişi
• 12. Güvenli Çıkış (Logout)

Son doğrulama: 2026-10-04 · Kaynak: _envanter.md, src/components/shell/UserMenu.tsx