---
name: vercenik-design
description: Use this skill to generate well-branded interfaces and assets for Vercenik (architecture, engineering & construction firm — premium-minimal, black + white + gold), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable: true
---

## Başlangıç

Bu skill'i çağırdıktan sonra sırayla şu dosyaları oku:

1. `readme.md` — Tasarım sistemi felsefesi, renk/tipografi/motion kuralları, iconografi
2. `tokens/colors.css` — Tüm CSS değişkenleri (--ink-*, --gold-*, --bg-*, --border-*)
3. `tokens/typography.css` — Font aileler, boyut skalası, letter-spacing kuralları
4. `tokens/spacing.css` — Boşluk, border-radius, shadow, motion token'ları

Componentleri anlamak için:
- `components/core/Button.d.ts` + `components/core/Button.jsx`
- `components/core/Input.d.ts` + `components/core/Input.jsx`
- `components/core/Badge.d.ts`, `Eyebrow.d.ts`, `IconButton.d.ts`
- `components/content/Stat.d.ts`, `ProjectCard.d.ts`, `BlogCard.d.ts`

Tam sayfa örnekleri için:
- `ui_kits/website/index.html` — Marketing ana sayfa
- `ui_kits/dashboard/index.html` — Dashboard

---

## Hazır Sayfa Şablonları

Aşağıdaki sayfaların tasarım referansları `design_handoff/html/` klasöründe mevcuttur.
Her sayfanın detaylı spec'i için `design_handoff/README.md` dosyasını oku.

| Sayfa | HTML Referans | Özellikler |
|---|---|---|
| Hakkımızda | `design_handoff/html/Vercenik Hakkımızda.html` | Scroll-aware nav, ekip, timeline, değerler |
| Hizmetler | `design_handoff/html/Vercenik Hizmetler.html` | 4 hizmet listesi, yaklaşım, CTA |
| Hizmet Detay | `design_handoff/html/Vercenik Hizmet Detay.html` | Kapsam, süreç, ilgili projeler |
| Projeler | `design_handoff/html/Vercenik Projeler.html` | Kategori filtresi, grid, hover efekt |
| Proje Detay | `design_handoff/html/Vercenik Proje Detay.html` | Galeri, teknik detaylar, istatistikler |
| İletişim | `design_handoff/html/Vercenik İletişim.html` | Form, chip seçici, SSS accordion, toast |

---

## Uygulama Kuralları

**Renk:** Asla sabit hex yazma. Her zaman CSS değişkeni kullan:
```css
color: var(--ink-900);          /* Ana metin */
color: var(--gold-700);         /* Link hover, accent */
background: var(--bg-muted);    /* Bölüm arka planı */
border: 1px solid var(--border-hairline);
```

**Tipografi:**
```css
font-family: var(--font-display);  /* Plus Jakarta Sans — başlıklar */
font-family: var(--font-body);     /* Inter — gövde */
font-family: var(--font-mono);     /* Space Mono — eyebrow, etiket, sayı */
```

**Köşeler:** `border-radius: 0` (sharp corners). Sadece `<input>` için `2px`.

**Animasyon:** Her geçiş `cubic-bezier(0.16, 1, 0.3, 1)` ile.

**Navbar scroll pattern:**
```js
window.addEventListener('scroll', () => {
  nav.classList.toggle('is-scrolled', window.scrollY > 40);
}, { passive: true });
```

**Scroll reveal pattern:**
```js
const io = new IntersectionObserver(entries => {
  entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); } });
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach(el => io.observe(el));
```

**Kesinlikle yasak:**
- Emoji kullanmak
- Büyük harf başlık (sadece eyebrow uppercase)
- Gold'u büyük alan dolgusu olarak kullanmak
- border-radius > 2px
- Inter veya Plus Jakarta Sans dışında font

---

## Marka Tonu

- Dil: Türkçe, formal-sıcak
- Hitap: siz / biz
- Başlık stili: Kısa, güçlü eylem fiili, 6-10 kelime, sentence case
- Sayılar: Space Mono, gold suffix ile (`25+`, `1.4M m²`)
- CTA: Tek, güçlü, emir kipi → "Teklif Al", "Projelerimizi İncele"

---

## Yeni Sayfa Oluşturma

Eğer kullanıcı design_handoff'ta olmayan yeni bir sayfa istiyorsa:
1. En yakın referans sayfayı `design_handoff/html/` içinden oku
2. `design_handoff/README.md` içindeki layout kalıbını takip et
3. Aynı token'ları, aynı navbar/footer pattern'ini, aynı scroll reveal'ı kullan
4. Yeni icon gerekiyorsa Lucide SVG kullan (stroke 1.6px, currentColor)