React için sade ve özenli component'ler.
Sade CSS ve tek bir token setiyle 63 erişilebilir component. İnce çizgiler, tek bir soğuk accent ve sakin hareket; süslenmiş değil, işlenmiş görünen ürünler için.
Tek token seti. Bütün ekran ona uyar.
Accent, köşe, yoğunluk, tema ve yazı ölçeği birer CSS değişkeni. Birini değiştir; aşağıdaki dashboard, form ve dialog birlikte uyar, altında da bunun için gereken CSS'in kendisi.
Token'lar
Her kontrol önizlemeye CSS değişkeni yazar. Başka hiçbir şey değişmez.
Attribute'lar: data-theme="light" data-accent="blue" data-density="default"
Varsayılanlar. Bir kontrolü değiştir, yazdığı token'ları gör.
63 component, tek sözleşme.
Layout primitive'lerinden overlay'lere kadar. Her sayfada canlı önizleme, props, klavye haritası ve erişilebilirlik notları var. Tüm liste
Form girdileri
Layout
Tipografi
Veri gösterimi
Geri bildirim
Overlay
Navigasyon
Altı kural, her yerde aynı.
Her component aynı tasarım sözleşmesine uyar. Merid ile kurulan bir sayfa, ayrıca incelemeye gerek kalmadan bütünlüklü durur. İlkeler
- Tek accent, ölçülü kullanımEtkileşimi ve seçimi tek bir soğuk mavi taşır. Geri kalan her şey mürekkep tonlu nötr.
- Önce yüzey, sonra çizgiBölgeleri önce gri yüzeyler ayırır. İnce çizgi son çaredir, daha kalını hiç kullanılmaz.
- Yalnızca ince çizgilerHer kenarlık bir piksel. Seçim 1.5px'lik accent halkası. Asla iki piksel, asla koyu.
- Hiyerarşi tondan gelirÜç metin tonu ve iki font ağırlığı. Vurgu için renge yaslanılmaz.
- Sakin etkileşim150–200 milisaniyede renk tonu değişimi ve .97'lik basma efekti. Azaltılmış hareket tercihinde hepsi kalkar.
- Açık cascadeHer kural isimli bir layer'da durur. Senin stillerin !important olmadan kazanır.
Temeller
Her component'in arkasındaki token'lar: açık ve koyu değerleriyle, her birinin neden var olduğuyla.
- RenkTek accent, mürekkep tonlu nötrler, sakin durum renkleri.
- TipografiGeist ve Geist Mono, dokuz boyut, üç ağırlık.
- Boşluk4 ve 8 piksellik adımlardan bölüm ritmine uzanan bir ölçek.
- Köşe yuvarlaklığıYüzeyler iç içe geçtikçe küçülen köşeler.
- YükseltiMürekkep tonlu yumuşak gölgeler, dark mode'da ince bir halka.
- HareketÜç süre ve tek bir easing eğrisi.
- Dark modeSistem tercihi ya da bir data-theme attribute'u.
- LayoutContainer, gutter, bölüm ve okuma genişlikleri.