Refbinder Design System

Refbinder ürününün tasarım sistemi. Tüm renkler, tipografi ve bileşenler css/tokens.css dosyasından gelir — burada görüntülenenler canlı token değerleridir.

Foundations

Renkler

SDS tokens (Nexberry temelli) ve RB markası özel renkleri. Renk değiştirmek için css/tokens.css içindeki değişkenleri güncelleyin.

Background

Default

--sds-color-background-default-default

#ffffff

Secondary

--sds-color-background-default-secondary

var(--sds-color-background-default-secondary)

Tertiary

--sds-color-background-default-tertiary

var(--sds-color-background-default-tertiary)

Brand

--sds-color-background-brand-default

#2c2c2c

Text

Default

--sds-color-text-default-default

var(--sds-color-text-default-default)

Secondary

--sds-color-text-default-secondary

var(--sds-color-text-default-secondary)

Tertiary

--sds-color-text-default-tertiary

var(--sds-color-text-default-tertiary)

On Brand

--sds-color-text-brand-on-brand

var(--sds-color-background-default-secondary)

Brand Accent

Accent

--rb-color-accent

var(--rb-color-accent)

Accent Dark

--rb-color-accent-dark

var(--rb-color-accent-dark)

Semantic State

Success

--rb-color-success

var(--rb-color-success)

Danger

--rb-color-danger

var(--rb-color-danger)

Warning

--rb-color-warning

var(--rb-color-warning)

Info

--rb-color-info

var(--rb-color-info)

Rating Star

--rb-color-rating-star

var(--rb-color-rating-star)

Foundations

Tipografi

Tüm metinler SF Pro (var(--font-sans)) kullanır. Hero başlıklar 700, gövde 400, vurgular 600.

HeroÇözümünüzü bulun
DisplayRefbinder
H1Şirket Profili
H2Genel Bakış
H3Bölüm Başlığı
Body LGGövde metni — büyük
BodyGövde metni — normal
Body SMGövde metni — küçük
CaptionCaption · meta · ipucu
SmallBADGE · MICRO · LABEL
SF Provar(--font-sans)
Foundations

Spacing

4px tabanlı spacing scale. Tailwind utility veya CSS değişkeni olarak kullanılabilir.

--space-14px
--space-28px
--space-312px
--space-416px
--space-520px
--space-624px
--space-832px
--space-1040px
--space-1248px
--space-1664px
--space-2080px
Foundations

Border Radius

sm

6px

md

8px

lg

12px

xl

16px

2xl

24px

full

9999px

Foundations

Shadows

shadow-100

--sds-shadow-100

shadow-200

--sds-shadow-200

shadow-300

--sds-shadow-300

shadow-400

--sds-shadow-400

Components

Buttons

Primary marka aksiyonları için, Accent vurgu CTA için, Secondary destek aksiyonu için.

Button variants.ds-btn--*
✓When to use

Form submit, modal CTA veya ana aksiyon için Primary; vurgu CTA için Accent; ikincil aksiyon için Secondary; nav linkleri / cancel için Ghost.

×Don't use when

Aynı ekranda 2'den fazla Primary kullanma — görsel hiyerarşi kaybolur. Inline link metni için Button değil <a> kullan.

aAccessibility

Icon-only button'da aria-label zorunlu. Disabled state'i sadece görsel değil disabled attribute ile.

Components

Badges

Doğrulama, durum bilgisi ve sınıflandırma için.

✓ Referans DoğrulanmışSeviye 5CRM ÇözümleriBeklemedeİptal
Badge variants.ds-badge--*
✓When to use

Statü (Beklemede, İptal), kategori (CRM Çözümleri) veya doğrulama (Referans Doğrulanmış) etiketi için.

×Don't use when

Tıklanabilir filtre olarak kullanma — onun için Category Tag var. Uzun metin için kullanma (max ~20 karakter).

aAccessibility

Sadece renge dayalı bilgi verme — ikon veya açıklayıcı metin ekle. Decorative değilse aria-label ile context sağla.

Primitives

Inputs

Standart form alanı. Focus state'inde accent renkli odak halkası.

Input Field.ds-input + .ds-input__field
✓When to use

Tüm form alanları, search bar, inline edit. Label her zaman görünür olmalı; focus halkası accent rengiyle aktif kullanıcıya geri bildirim verir.

×Don't use when

Placeholder'ı label yerine kullanma — focus'lanınca kaybolur. OTP veya tek karakter input için ayrı InputOTP bileşeni var.

aAccessibility

<label htmlFor> veya aria-label zorunlu. Hata durumunda aria-invalid + altta hata metni; sadece kırmızı border yetmez.

Primitives

Avatars

Şirket veya kullanıcı logoları. SM/MD/LG/XL boyutlar, 4 renk varyantı.

RBRBRBRB
Sizes (sm / md / lg / xl).ds-avatar--sm/md/lg/xl
ABCD
Color variants.ds-avatar--accent/info/success/default
✓When to use

Şirket logosu, kullanıcı profili. SM: list rows. MD: card meta. LG: profil header. XL: hero/cover.

×Don't use when

Decorative resim için kullanma — <img> yeterli. 24px altı initials okunabilir değil; aşağı inme.

aAccessibility

Resim varsa alt zorunlu. Initials avatar'da aria-label ile tam isim ('Yerliforce CRM şirket logosu').

Primitives

Category Tags

Şirket sektör etiketleri. Tıklanabilir filtre — hover'da accent border.

CRM ÇözümleriYapay ZekaPazarlamaVeri AnalitiğiBulut Bilişim
Category Tag.ds-tag
✓When to use

Şirket sektörü, etiket grubu — tıklanabilir filtre. Hover state interaktif olduğunu belli eder.

×Don't use when

Sadece bilgi gösterimi için kullanma — onun için Badge var. 5+ tag varsa wrap edilebilir bırak.

aAccessibility

Filtre semantiği için <button>, sektör sayfasına yönlendiriyorsa <a> kullan. Tab order'a dahil olmalı.

Refbinder

Verification Badge

Referansı doğrulanmış şirketlerde gösterilen başarı rozet.

Referans Doğrulanmış
Verification Badge.ds-verify
✓When to use

Şirket profili header, arama sonuçları kartı — referansı doğrulanmış şirketleri ayırt etmek için.

×Don't use when

Henüz doğrulanmamış şirkete koyma (false trust signal). Mavi/kırmızı variant kullanma — yalnız success rengi.

aAccessibility

<span aria-label='Referansı doğrulanmış şirket'> ile screen reader'a anlat; sadece ikon yetmez.

Refbinder

Rating Display

B2B puanı gösterimi — yıldızlar + sayısal değer + referans sayısı. RatingStars partial yıldız da destekler.

5.0(28 referans)4.2(12 referans)–(referans yok)
Rating Display.ds-rating
✓When to use

B2B puanı gösterimi (5.0 / 4.2 / yok). Partial yıldız için bu bileşeni kullan; düz CSS yıldız yapma.

×Don't use when

Kullanıcı puan veriyorsa kullanma — onun için interactive rating input gerekir, bu read-only.

aAccessibility

Sayısal değeri yıldız yanında metin olarak göster (4.2) — screen reader yıldız ikonlarını okumaz.

Refbinder

Stat Card

Şirket profilinde rakamsal verileri gösterir — referans sayısı, biten proje, vb.

28Referans
156Biten Proje
4.8B2B Puanı
12Yıl Tecrübe
Stat Card.ds-stat
✓When to use

Şirket profili rakam grid'i, dashboard KPI sayacı. Label kısa olmalı (max 2 kelime).

×Don't use when

Long-form metric ('son 30 günde değişim') için kullanma — inline metric component daha uygun.

aAccessibility

<dl>/<dt>/<dd> semantik kullan veya en azından stat sayısı yanında aria-label ile birim ekle.

Refbinder

Section Divider

Sayfa içi bölüm ayırıcı — gradient çizgi + brand chip etiket.

Hakkında
Referanslar
Section Divider.ds-divider
✓When to use

Şirket profili gibi uzun sayfalarda bölüm başlatırken — visual + label bir arada.

×Don't use when

Tek sayfada 4+ kullanma — okuma akışını parçalar. Card içinde header yerine kullanma.

aAccessibility

Chip metni gerçek section heading olmalı: <h2 id='hakkinda'>Hakkında</h2>. Decorative değil semantic eleman.

Refbinder

Company Card

Arama sonuçlarında ve favorilerde kullanılan şirket kartı. Logo + isim + doğrulama rozet + açıklama + sektör etiketleri + rating + meta.

YerliForce CRM

DoğrulanmışSeviye 5

Türkiye'nin lider yerli CRM platformu. Satış, pazarlama ve müşteri hizmetleri süreçlerini tek platformda birleştirir.

CRM ÇözümleriB2B Satış
4.8|28 referans|Son güncelleme: 27 May 2026
Company Card (demo).ds-democard
✓When to use

Arama sonuçları, favoriler, kıyaslama listesi. Logo + isim + doğrulama + meta düzeni standart.

×Don't use when

Detay sayfası için kullanma — orada ProfileHeader var. Whole-card link yaparken içindeki tıklanır elementlere dikkat (nested links sorun).

aAccessibility

Card whole link ise <a> wrap'le ve içerideki butonları stop-propagation ile koru. Tab order: name → tags → meta.