DESIGN.md nedir?

DESIGN.md nereden geliyor#

Bir DESIGN.md dosyasının anatomisi#

---
name: DevFocus Dark
colors:
  primary: "#2665fd"
  secondary: "#475569"
  surface: "#0b1326"
  on-surface: "#dae2fd"
  error: "#ffb4ab"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
rounded:
  md: 8px
---

# Design System

## Overview
A focused, minimal dark interface for a developer productivity tool.
Clean lines, low visual noise, high information density.

## Colors
- **Primary** (#2665fd): CTAs, active states, key interactive elements
- **Secondary** (#475569): Supporting UI, chips, secondary actions
- **Surface** (#0b1326): Page backgrounds
- **On-surface** (#dae2fd): Primary text on dark backgrounds
- **Error** (#ffb4ab): Validation errors, destructive actions

## Typography
- **Headlines**: Inter, semi-bold
- **Body**: Inter, regular, 14-16px
- **Labels**: Inter, medium, 12px, uppercase for section headers

## Components
- **Buttons**: Rounded (8px), primary uses brand blue fill
- **Inputs**: 1px border, subtle surface-variant background
- **Cards**: No elevation, relies on border and background contrast

## Do's and Don'ts
- Do use the primary color sparingly, only for the most important action
- Don't mix rounded and sharp corners in the same view
- Do maintain 4:1 contrast ratio for all text

Sekiz standart bölüm#

Markdown gövdesi ## başlıkları kullanır. İlgili olmayan bölümler atlanabilir, ama varsa bu sırayı izlemeleri gerekir. İki kez geçen bir başlık dosyayı geçersiz kılar; bilinmeyen bölümler korunur.

1. Overview (ya da Brand & Style). Birkaç cümlede görünüm ve his: atmosfer, yoğunluk, kişilik.
2. Colors. Her renk token'ı ve üstlendiği rol, örneğin birincil eylemler ya da sayfa yüzeyleri.
3. Typography. Font aileleri ve büyük başlıklardan küçük etiketlere kadar yazı ölçeği.
4. Layout (ya da Layout & Spacing). Boşluk ölçeği, ızgara, içerik genişlikleri ve aralıklar.
5. Elevation & Depth (ya da Elevation). Yüzeylerin birbirinden nasıl ayrıldığı: gölgeler, kenarlıklar, ton farkları.
6. Shapes. Köşe yarıçapları ve diğer şekil kuralları.
7. Components. Butonlar, giriş alanları, kartlar ve diğer temel öğeler, token'ları ve durumlarıyla birlikte.
8. Do's and Don'ts. Bir ajanın çiğnememesi gereken kurallar.

Her standart bölümü sırasıyla içeren kısa bir Markdown gövdesi. İçeriği ürününe göre uyarla, başlıkları ve sırayı koru.

## Overview
A minimal dark interface for a developer productivity tool.
Clean lines, low visual noise, high information density.

## Colors
- Primary (#2665fd): CTAs and active states
- Surface (#0b1326): Page backgrounds
- On-surface (#dae2fd): Text on dark backgrounds

## Typography
- Headlines: Inter, semibold
- Body: Inter, regular, 14-16px
- Labels: Inter, medium, 12px, uppercase

## Layout
- 8px base spacing unit, scale: 4 / 8 / 16 / 24 / 32 / 48
- Max content width 720px with 24px gutters on mobile

## Elevation & Depth
- Surfaces rely on background contrast instead of shadow
- Overlays use an 8 percent white tint on dark surfaces

## Shapes
- Rounded 8px for controls, 16px for cards
- Avoid mixing sharp and rounded corners in one view

## Components
- Buttons: 8px rounded, primary filled with brand blue
- Inputs: 1px border, subtle surface-variant background
- Cards: no elevation, rely on border and background contrast

## Do's and Don'ts
- Do use the primary color sparingly, for the most important action
- Don't mix rounded and sharp corners in one view
- Do maintain at least a 4:1 contrast ratio for all text

Tasarım token'ları ve şema#

DESIGN.md, tasarım token'larını dosyanın başında YAML frontmatter olarak barındırır. Frontmatter bloğu yalnızca --- içeren bir satırla başlar ve aynı ayraçla biter.

version: <string>
name: <string>
description: <string>
colors:
  <token-name>: <Color>
typography:
  <token-name>: <Typography>
rounded:
  <scale-level>: <Dimension>
spacing:
  <scale-level>: <Dimension | number>
components:
  <component-name>:
    <token-name>: <string | token reference>

Yaygın ölçek adları arasında xs, sm, md, lg, xl ve full bulunur, ama açıklayıcı her anahtar geçerlidir. Boşluk token'ları YAML'da spacing: altında yer alır ve Markdown gövdesinin Layout bölümünde açıklanır.

Token türleri

Renk

Geçerli herhangi bir CSS renk dizesi. Önerilen varsayılan #RRGGBB biçiminde hex kodudur, örneğin "#1A1C1E".

Boyut

Bir sayı ile px, em veya rem birimi. Örnekler:48px,-0.02em.

Token referansı

Süslü parantez içine alınır ve YAML ağacındaki bir değeri işaret eder. Örnek:{colors.primary}.

Tipografi

Aile, boyut, kalınlık, satır yüksekliği ve harf aralığı gibi font özelliklerini içeren bileşik bir nesne. Bkz. Tipografi özellikleri.

Tipografi özellikleri

fontFamily

Font ailesinin adı.

fontSize

Boyut cinsinden font büyüklüğü.

fontWeight

400 veya 700 gibi sayısal kalınlık.

lineHeight

Bir boyut ya da birimsiz bir çarpan. Birimsiz değerler önerilir.

letterSpacing

Boyut cinsinden harf aralığı ayarı.

fontFeature

font-feature-settings değerini yapılandırır.

fontVariation

font-variation-settings değerini yapılandırır.

Token referansları

Bir token referansı süslü parantez içine alınır ve YAML ağacındaki başka bir değere giden nesne yolunu içerir. Çoğu token grubunda referans bir gruba değil, ilkel bir değere işaret etmelidir. Components bölümünde ise tipografi seviyeleri gibi bileşik değerlere referans verilebilir.

components:
  button-primary:
    backgroundColor: "{colors.primary-60}"
    textColor: "{colors.primary-20}"
    rounded: "{rounded.md}"
  button-primary-hover:
    backgroundColor: "{colors.primary-70}"

Bileşenler

backgroundColor

Renk

textColor

Renk

typography

Tipografi

rounded

Boyut

padding

Boyut

size

Boyut

height

Boyut

width

Boyut

Önerilen token adları

AI ajanları DESIGN.md'yi nasıl kullanır#

## Design
Follow DESIGN.md for every UI change: use its color, typography,
spacing and component tokens instead of inventing new values.

Claude Code

Reponun dosyalarını okur ve başlangıçta CLAUDE.md'yi yükler. Oraya DESIGN.md'yi gösteren bir satır ekle ya da dosyanın adını prompt'unda an.

Cursor

DESIGN.md'yi sohbet bağlamına ekle ya da her arayüz isteğinde geçerli olsun diye bir proje kuralından ona referans ver.

GitHub Copilot

Deponun Copilot talimat dosyasından DESIGN.md'yi göster ya da arayüz işi isterken sohbete ekle.

Google Stitch

Formatın başladığı yer. Stitch, üretilen ekranlar tek bir palet, yazı ölçeği ve bileşen dilini paylaşsın diye bir DESIGN.md kullanır.

Ajan daha sonra kesin değerleri token'lardan alır (birincil butonun hex kodu, body-md etiketinin boyutu) ve nereye ait olduklarına karar vermek için metni kullanır.

DESIGN.md, AGENTS.md ve README.md karşılaştırması#

Üç dosya yan yana durur ve farklı sorulara yanıt verir. DESIGN.md, AGENTS.md'nin yerini almaz; ikisi birlikte çalışır.

Gerçek DESIGN.md örnekleri#

Formatı anlamanın en hızlı yolu birkaç gerçek dosya okumaktır. Bu galeri sayfalarının her biri, markanın herkese açık web sitesinden çıkarılmış bir DESIGN.md'yi paleti ve yazı örneğiyle birlikte gösterir. Bunlar resmi marka yönergeleri değildir.

• Stripe DESIGN.md
• Anthropic DESIGN.md
• Airbnb DESIGN.md
• Linear DESIGN.md
• Notion DESIGN.md
• Supabase DESIGN.md

Tüm DESIGN.md örneklerine göz at

DESIGN.md nasıl edinilir#

1. Elle yaz. Spesifikasyondan ve yukarıdaki örneklerden başla, sonra dosyayı ücretsiz DESIGN.md doğrulayıcı ile ya da Google'ın lint komutuyla kontrol et.
2. Bir örnekten başla. Galeriden bir dosya kopyala, token'ları ve metni ürününe göre düzenle.
3. Canlı bir web sitesinden oluştur. Herkese açık bir URL'yi Design Extractor içine yapıştır. Siteyi bir tarayıcıda render eder ve renkleri, tipografisi, boşlukları ve bileşenleriyle yukarıdaki spesifikasyona uyan bir DESIGN.md döndürür. Ne elde ettiğini DESIGN.md oluşturucu sayfası açıklar. Aynı çıkarma Chrome uzantısından ve MCP sunucusu üzerinden ajanından da çalışır.