Jetimza Tasarım Sistemi
v0.1.0 · living style guide

Elektronik imzanız. Daha kolay, daha hızlı.

Jetimza, teknolojisini sergilemek yerine işlemi kolaylaştıran; kullanıcının dikkatini bağırmadan çeken, güven ve rahatlık veren sakin bir dijital servistir.

%80 Kuralı %80 beyaz/açık nötr · %15 Jet Ink metin · ≤%5 Jet Blue vurgu

Palet

Jet Blue
#0088d0
Ana aksent
Deep Blue
#006ea8
Hover / vurgu
Ice Blue
#eaf6fc
Yumuşak zemin
Jet Ink
#1e2b33
Ana metin
Slate
#65717a
İkincil metin
Mist Grey
#dde3e7
Kenarlık
Cloud White
#f6f8f9
Sayfa zemini

Değerler @imza-io/jet-tokens'tan canlı okunur.

Tipografi

Hero başlık
text-hero · 52–60px / 600
Bölüm başlığı
text-section · 36–40px / 600
Gövde metni — telefon numaranızla 1 dakikada üye olun.
text-base · 16px / 400

Font: Avenir Next (birincil, lisanslı — dağıtılmaz) → self-host Source Sans 3 (OFL) fallback.

Bileşenler

Gerçek @imza-io/jet-ui bileşenleri — bu sayfa aynı zamanda jet-ui'ın Astro'da çalıştığının canlı kanıtıdır (dogfood).

Button

Badge

Her ay 10 Jet Token İmza servisi aktif MVP İLERİ FAZ

Input

Benzersiz olmalı.

Geçersiz doğrulama kodu.

Avatar · Spinner

Card

Varsayılan
Seçili

OtpInput · interaktif

0/6

Kurallar

Yap

  • Token/utility kullan; ham hex yazma (bg-jet-blue).
  • Zero-runtime stil — Tailwind class'ları.
  • Astro'da içerik statik veya client:visible.
  • Erişilebilir odak: focus-visible:ring-jet-blue.

Kaçın

  • Mavi-mor neon gradientler
  • 3D havada uçan karakterler
  • Aşırı cam (glassmorphism) efekti
  • Tamamen yuvarlak (pill) butonlar
  • “Geleceği yeniden yazıyoruz” startup dili
  • CSS-in-JS runtime (styled-components/emotion)
  • İçerikte client:only (SSR olmaz → crawler boş görür).

Kullanım

# .npmrc
@imza-io:registry=https://npm.pkg.github.com

pnpm add @imza-io/jet-tokens @imza-io/jet-ui

# tailwind.config
import jetPreset from "@imza-io/jet-tokens/tailwind-preset";
export default { presets: [jetPreset], content: [
  "./src/**/*.{astro,tsx}",
  "./node_modules/@imza-io/jet-ui/dist/**/*.js",
]};

# kullan
import { Button, OtpInput } from "@imza-io/jet-ui";