Sociotype
açık tema
Bağımsız Stil İncelemesi

Sociotype Tarzı Tasarım Sistemi

Sociotype tasarım sistemi açık temalı bir arayüz dili kullanıyor. Ana marka rengi Ink Black (#000000); metinler Ink Black (#000000), arka plan Canvas White (#ffffff). Tipografide Main Onsite, Onsite ve Avec Sharp kullanılıyor. Bu DESIGN.md dosyası 5 renk token'ı ve 5 kademeli bir yazı ölçeği içeriyor; Claude, Cursor veya v0 gibi yapay zekâ araçlarına verildiğinde Sociotype tarzında tutarlı arayüzler üretmelerine yardımcı olur.

Renk Paleti

FONTLAR

Tipografi

Bileşen Önizlemeleri

Bağımsız Stil İncelemesi

Sociotype tarzı tasarım sistemi: renk kodları ve fontlar

Tema
açık
Ana renk
Ink Black (#000000)
Fontlar
Main Onsite, Onsite, Avec Sharp, Ceno, Meso, Gestura, Rework
Kaynak
socio-type.com

Editorial White Canvas

Sociotype presents as a serious, editorial platform for typography, characterized by an expansive white canvas, precise black typography, and highly controlled spacing. Interaction elements are almost entirely ghosted or underlined, relying on a subtle shift to black for active states. The visual weight is carried by the large, expressive font specimens and carefully structured content blocks, rather than decorative colors or heavy UI components.

Özgün stil özeti (İngilizce)

Sociotype renk kodları

RenkHEXCSS tokenKullanım (İngilizce)
Canvas White#ffffff--color-canvas-whitePage backgrounds, card surfaces, primary text on dark hero sections
Ink Black#000000--color-ink-blackPrimary text, borders, active states for ghost buttons and navigation, accent markings
Medium Gray#818181--color-medium-grayMuted text, secondary information, placeholder text, inactive link borders
Light Gray#d6d6d6--color-light-graySubtle dividers, borders between content sections
Faded Gray#9d9d9d--color-faded-grayTertiary text, list item borders

Sociotype hangi fontları kullanıyor?

FontAğırlıklarYedek font
Main Onsite400
Onsite400system-ui, sans-serif
Avec Sharp400serif
Ceno400serif
Meso400serif
Gestura400serif
Rework400serif
RolBoyutSatır yüksekliğiToken
caption11px1.38--text-caption
body14px1.29--text-body
heading26px1.13--text-heading
display-sm40px1--text-display-sm
display251px1.25--text-display

Bu DESIGN.md dosyasını nasıl kullanırım?

  1. DESIGN.md dosyasını indir ve projenin kök klasörüne koy.
  2. Claude Code, Cursor, v0 veya Google Stitch gibi aracına “Arayüzü DESIGN.md’deki kurallara göre tasarla” de.
  3. Renkleri, fontları ya da bileşenleri kendi markana göre değiştirmek için Fork’la & Özelleştir butonunu kullan.

Ham DESIGN.md dosyası →

Bu sayfa, Sociotype markasının herkese açık web sitesinde (socio-type.com) görülebilen renk, tipografi ve boşluk değerlerinin MakeMyMD tarafından yapılmış bağımsız bir incelemesidir. Resmî bir marka kılavuzu değildir; MakeMyMD'nin Sociotype ile bir bağlantısı yoktur ve Sociotype tarafından onaylanmamıştır. Sociotype adı ve ticari markaları sahibine aittir; markaya ait görsel, logo ya da metin kullanılmaz. Hak sahibiysen kaldırma talebini [email protected] adresine gönderebilirsin.

Tasarım Sistemleri

Benzer tasarım sistemleri