Tasarım sistemi
Bu sitenin arkasındaki sistem.
codion.tech üzerindeki her şey bu sayfadaki token ve bileşenlerden oluşuyor. Küçük bir sistem: tek vurgu rengi, üç yazı tipi, dört geçiş eğrisi.
(01)
Renk
Sıcak mürekkep ve kâğıt nötrleri, tek bir vurgu rengi. İki seti de görmek için temayı değiştirin.
Zemin
--background#f4f1ea#0d0c0a
Kart
--card#fbf9f4#151411
Soluk zemin
--muted#ebe7de#1a1815
Çizgi
--border-strong#14130f / 28%#f1ede4 / 26%
Soluk metin
--muted-foreground#5f5b52#a09a8d
Metin
--foreground#14130f#f1ede4
Ion
--ion#f04a12#ff5a1f
Ion metin
--ion-text#b8340a#ff6a33
(02)
Tipografi
Metin için Geist, etiketler için Geist Mono, vurgu için Instrument Serif italik.
text-hero3.25 → 8.75rem · 0.94 · −0.045emAyrıntılar ürünün kendisidir.
text-display2.25 → 5.5rem · 1 · −0.04emAyrıntılar ürünün kendisidir.
text-title1.75 → 3rem · 1.08 · −0.03emAyrıntılar ürünün kendisidir.
text-lead1.125 → 1.5rem · 1.45Ayrıntılar ürünün kendisidir.
label-mono0.75rem · Geist Mono · 0.08emAyrıntılar ürünün kendisidir.
accent-serifInstrument Serif ItalicAyrıntılar ürünün kendisidir.
(03)
Hareket
Sitedeki her geçiş dört eğri ve dört süreyle çözülüyor. Yeniden oynatmak için bir şeridin üzerine gelin.
--ease-out-expocubic-bezier(0.16, 1, 0.3, 1)--ease-out-quartcubic-bezier(0.25, 1, 0.5, 1)--ease-in-out-quartcubic-bezier(0.76, 0, 0.24, 1)linearlinear
180ms
--duration-fast320ms
--duration-base700ms
--duration-slow1100ms
--duration-slower
(04)
Yerleşim
Akışkan kenar boşluğu, 96rem'lik bir kapsayıcı ve ekranla birlikte ölçeklenen bölüm aralıkları.
--gutterclamp(1.25rem, 4vw, 3.5rem)container-pagemax-width 96remsection-yclamp(4rem, 2.5rem + 6vw, 8rem)--header-height4.5rem
Köşe yarıçapı
smmdlgxl2xl3xlfull
(05)
Bileşenler
Primitifler, Base UI üzerinde yeniden stillendirilmiş shadcn/ui. Hareket bileşenleri bize ait.
Düğmeler
Etiketler
- Next.js ve React
- TypeScript
- CMS entegrasyonu
- Performans ve SEO
- Yakında
Alanlar
İkonlar
Lucide, 1,5 piksel çizgi kalınlığıyla.