Kurumsal UI platformu

TCM Tasarım Sistemi

Kurumsal ürünler, karmaşık formlar, zengin medya iş akışları ve veri yoğun uygulamalar için kapsamlı, erişilebilir, jeton odaklı bir tasarım sistemi.

Jetonları keşfet Oyun alanını aç

15şartname alanları

120+bileşenler ve kalıplar

AAWCAG hedefi

Varsayılan olarak erişilebilir

Klavye öncelikli kontroller, görünür odak, ARIA durumları, canlı bölgeler, azaltılmış hareket desteği ve yüksek karşıtlık modları.

Birleştirilebilir mimari

Jetonlar, bileşenler, form durumu ve davranışlar ayrılmıştır; böylece ekipler React, Vue, Angular veya Web Bileşenlerini entegre edebilir.

Kurumsal ölçek

Kalıplar yoğun veri tablolarını, uyarlanabilir formları, dosya yöneticilerini, medya önizlemelerini ve geliştirici araçlarını kapsar.

Kapsam haritası

Şartname uygulama matrisi

Temel

Tasarım Tokenları & Tema Yönetimi

Tüm görsel kararlar, sayfayı yeniden yüklemeden çalışma zamanında değiştirilebilen CSS değişkenleri tarafından belirlenir.

Çalışma zamanı tema değiştirici

Sistem, açık, koyu, özel marka veya yüksek kontrast arasından seçim yapın. Tercihler, mümkün olduğunda Miniapps depolama API’si ile kalıcı hale getirilir.

Birincil renk Yarıçap ölçeği Yoğunluk

Canlı token önizlemesi

Primary Secondary Healthy Warning

:root {
  --tcm-color-primary: ...;
  --tcm-radius-md: ...;
}

Token kategorileri

Renkler, yazı tipi, boşluklandırma, yükselti, opaklık, geçişler, z-index, hareket ve kırılma noktaları.

Kontroller

Temel Girdi Kontrolleri

Kurumsal form oluşturucular için doğrulanmış, maskelenmiş, medya destekli ve düzenleyici tarzı girdiler.

Standart, sayısal ve maskeli alanlar

Metin kutusu Email Parola Telefon numarası Para birimi Yüzde Metin alanı

Biçimlendirilmiş metin, markdown ve kod düzenleyici

Bold List Code

<tcm-input required validation="email" />

Dosya ve görsel yükleme

Dosyaları buraya bırakınGörüntüler, PDF, ses, video (50MB’a kadar)

Renk seçici

Damlalık kullan

İmza alanı

Temizleİmzayı kaydet

Tarih, saat ve yerelleştirme

DateTimeDateTime

Aralık, opaklık ve kaydırıcılar

Size Opacity

Preview

Etiketler, fişler ve çoklu seçim

Seçim kalıpları

Seçim Kontrolleri

Tekli, çoklu, hiyerarşik, coğrafi, görsel ve sihirbaz tarzı seçim kontrolleri.

Checkbox, radio, toggles

Include audit logs Require approval Enterprise BusinessFeature flag

Selectors

CountryLanguageTime zone

Icon, font, shape, pattern

InterSerifMono

Tree view

▾ Design Tokens
- Colors
- Typography
- Motion
▾ Components
- Inputs
- Data Grid
- Overlays

Stepper

Account
Permissions
Review

Tabs and accordion

UsageAPIA11Y

Advanced options

Expandable panels support keyboard access and nested content.

Yapı

Gezinme ve Yapı

Duyarlı kenar çubuğu, üst çubuk, çekmece, menüler, gezinme yolu, sayfalandırma, alt sayfalar ve yapışkan bölgeler.

Breadcrumbs and pagination

Previous123Next

Menus and context actions

Open context menu

RenameDuplicateDelete

Sticky header/footer and bottom sheet

Sticky product header

Scrollable container content with persistent actions.

Panels and drawers adapt to viewport size.

Open bottom sheet

Mimari

Form Mimarisi

Gruplar, diziler, iç içe kontroller, bağımlılıklar, eşzamansız doğrulama ve uyarlanabilir düzenlerle reaktif ve dinamik formlar.

Dynamic form builder

Add fieldValidate

Smart wizard

Profile
Rules
Review

BackNext

Validation and state model

Etkileşim

Düğmeler ve Eylemler

Standart işlemler, gönder/sıfırla, simge düğmeleri, köprüler, yükleme, devre dışı, basılı, eylem grupları ve Hızlı Eylem Düğmesi (FAB) hız menüsü.

Save changesCancelRead docsDeleteProcessingDisabledDeveloper API

ResetPreviewPublish

New docUploadGenerate

Durum

Geri Bildirim ve Göstergeler

İlerleme, döndürücüler, iskeletler, tost, snackbar, uyarılar, bildirimler, rozetler, modallar, açılır pencereler ve ipuçları.

Alerts and notifications

Scheduled maintenance Sunday 02:00 UTC.

Storage quota is above 95%.

Database connection failed. Retrying.

Trigger toast

Progress and loading

Open accessible modal

Kurumsal veriler

Görüntüleme ve Veri Denetimleri

Tablolar, ızgaralar, satır içi düzenleme, sıralama, filtreleme, tembel yükleme, kartlar, listeler, sayfalama, döngü (carousel), galeri ve medya oynatıcılar.

Export CSV

	Service	Status	Region	Latency	Actions

Previous12Next

Cards and lists

BillingUpdated 2m ago
IdentityHealthy
SearchIndexing

Carousel

‹

Analytics dashboard

›

Media player

Varlıklar

Gelişmiş Medya ve Dosya Özellikleri

Dosya yöneticisi, klasör gezintisi, sürükle-bırak sıralama, görsel/ses/video/PDF önizleyiciler, sıkıştırma ve dönüştürme iş akışları.

File manager tree

Media previewer

Select an asset

Conversion pipeline

Validate
Compress
Convert
Publish

Bileşim

Yerleşim ve Kaplar

Esnek düzen, ızgara, daraltılabilir paneller, karuseller, duyarlı sütunlar, otomatik düzenler, yapışkan öğeler ve taşma kontrolleri.

Responsive auto-layout playground

Flex area

Grid area

Sticky area

Overflow area

Collapsible panel

Panels use semantic disclosure patterns and retain keyboard accessibility.

Overflow controls

Wide content inside a contained scroll region with clear affordances.

Ayarlar

Araçlar & Ayarlar

Coğrafi konum, haritalar, QR/çubuk kod tarayıcıları, hava durumu bileşenleri, tema değiştiriciler, yazı tipi/arka plan/kenarlık/gölge kontrolleri ve uyarlanabilir renk kipleri.

Geolocation and weather

Get location

Location output appears here.

QR and barcode

Scanner-ready surface for camera integrations.

Visual settings

FontShadow

Çalışma zamanı modeli

Formlar — Olay ve Durum Yönetimi

Yaşam döngüsü kancaları, doğrulama olayları, bağımlılıklar, eşzamansız veri bağlama, geri al/yeniden yap, otomatik kaydetme, kurtarma, durum izleme ve animasyonlar.

Event timeline

Simulate lifecycle

Undo, redo, auto-save

UndoRedoIdle

Erişilebilirlik

Erişilebilirlik ve Kullanılabilirlik

Klavye, ekran okuyucular, kontrast, odak göstergeleri, azaltılmış hareket ve çapraz cihaz kullanılabilirliği için WCAG 2.1 AA uygulamaları.

Checklist

Live region

Announce status

Contrast AA7.8:1

Uyarlanabilir

Duyarlı ve Uyarlanabilir Tasarım

Mobil öncelikli yerleşimler, uyarlanabilir kırılma noktaları, dokunma hedefleri, kaydırılabilir sekmeler, klavye dostu katmanlar ve duyarlı yoğunluk.

Breakpoint tokens

Touch-friendly components

44px targetSwipe tabBottom sheet

Geliştirici Deneyimi

TypeScript desteği, framework entegrasyonları, Storybook oyun alanları, jeton dışa aktarma, tema API’leri, modüler içe aktarımlar, CLI iskelet oluşturma ve adlandırma kuralları.

TypeScript component API

import { Button, ThemeProvider } from '@tcm/design-system';

<ThemeProvider mode="system" tokens={customTokens}>
  <Button variant="primary" loading={saving}>Save</Button>
</ThemeProvider>

CLI and token export

npx tcm-ui generate component data-grid
npx tcm-ui tokens export --format figma
npx tcm-ui storybook start