Design System

FORMEX UI Elementleri

Dijital Etki Platformu'nun tüm görsel bileşenleri, renk paleti, tipografisi ve etkileşim örnekleri.

Renk Paleti

FORMEX marka renkleri ve yardımcı tonlar.

Ana Renkler

#00DB42
#4CAF50
#388E3C
#81C784

Nötr Tonlar

#0F1A0F
#3D4A3D
#7A8A7A
#C8D0C9
#E2E8E3
#F5F7F5
#FAFAFA

Durum Renkleri

Success
Info
Warning
Error

Gradientler

Accent
Hero
Accent Alt

Tipografi

Heading: Sora — Body: DM Sans

H1 — Sora 800 / 3.75rem

Sürdürülebilirlik

H2 — Sora 800 / 2.5rem

Dijital Etki Platformu

H3 — Sora 700 / 1.2rem

Karbon Emisyonu Azaltımı

Body — DM Sans 400 / 1rem

FORMEX operasyonlarınızdan doğan çevresel faydayı ölçün, dijital ekranlarınıza taşıyın, müşterilerinize gösterin. Bu platform gerçek veriye dayanır.

Body Small — DM Sans 400 / 0.875rem

Gerçek operasyon verisiyle hesaplanmış etki değerleri, doğrulanabilir ve izlenebilir şekilde sunulmaktadır.

Metric — Sora 800 / 2.75rem / tabular-nums
12.450 ton CO₂
Caption — Sora 600 / 0.7rem / Uppercase
Karbon Emisyonu Azaltımı

Butonlar

Tüm buton varyantları ve boyutları.

Varyantlar

Boyutlar

İkonlu

Pill / Tag

Default Pill Light Pill
Dark Pill Glow Pill

Form Elemanları

Input, textarea ve form bileşenleri.

Kart Sistemleri

Platform, metrik, sektör ve dashboard kartları.

Standart Kart

Kart Başlığı

Standart kart bileşeni. Hover'da elevation kazanır ve yukarı kalkar.

Katman

Platform Kartı

Hover'da gradient üst çizgi belirir.

  • Liste öğesi bir
  • Liste öğesi iki
  • Liste öğesi üç

Metrik Kartları

12.450 ton CO₂ Karbon Emisyonu Azaltımı
%18
89.200 kg Geri Kazanım Etkisi
%24
34.500 kg Atık Azaltımı
%12
3.200 MWh Enerji Tasarrufu
%9

Sektör Kartları

FMCG

Ürün yaşam döngüsünde ölçülebilir geri kazanım etkisi.

4.200 ton CO₂ azaltımı / yıl

CTA Kartı

Dashed border, hover'da solid'e döner.

İletişime Geçin

Dashboard Kartları (Koyu Zemin)

Toplam CO₂ 12.450 ton
18%
Geri Kazanım 89.2 ton
Enerji 3.200 MWh

İkonlar

Lucide Icons — projede kullanılan temel ikonlar.

trending-down
refresh-cw
trash-2
zap
recycle
leaf
tree-pine
car
home
droplets
package
shopping-cart
truck
building-2
landmark
layers
eye
bar-chart-3
calculator
badge-check
shield-check
check-circle
lock
send
sparkles
target
rocket
crown
cloud-off
play-circle

Spacing & Radius

Tutarlı boşluk ve yuvarlatma ölçekleri.

Spacing Scale

4px — xs
8px — sm
16px — md
24px — lg
32px — xl
48px — 2xl
64px — 3xl
96px — 4xl

Border Radius

8px sm
14px md
18px lg
24px xl
full

Shadow Scale

sm
md
lg
xl
glow

Widget / Rozet Örnekleri

Embed edilebilir etki bileşenleri.

FORMEX Doğrulanmış Etki
2.4 kgCO₂ azaltımı
340 gGeri kazanım
FORMEX
Sürdürülebilirlik Etkisi

Bu siparişin geri kazanım süreci FORMEX altyapısı ile yönetilmektedir.

1.8 kgCO₂ tasarrufu
240 ggeri kazanım

Eşdeğer Fayda Kartları

62.250Ağaç eşdeğeri
4.800Araç eşdeğeri
1.280Ev eşdeğeri
2.4MLitre su