Skip to content
Bilişim

Karya Design System · v1

Design system

A living reference rendered from the very CSS the site uses: colour, type, components and figures.

Principles

One type family
IBM Plex Sans for text and headings; IBM Plex Mono for figures, labels and code. Headings at weight 600 with tight tracking.
Navy primary, one warm accent
Navy-700 is the wordmark colour and every interactive element. Ember only for the eyebrow dot and a single highlight; never a button.
Section rhythm
White alternates with a faint navy tint; at most one dark navy band per page (closing CTA or working model).
Corners and shadow
Cards 12px, windows 12px, buttons fully round. Shadows are navy-tinted and soft; a hairline border is always present.
Motion
Opacity/transform only; 700ms quint-out reveals, flow animations only while in view. Off under prefers-reduced-motion.
Imagery
No stock photography. Product screens are drawn in HTML, architectures in SVG, the hero on a canvas.

Brand

Bilişim
Bilişim
Bilişim

Colour

navy

50

100

200

300

400

500

600

700

800

900

950

ink

50

100

200

300

400

500

600

700

800

900

950

sky · cyan · ember · ok · warn

sky-400

sky-500

sky-600

cyan-400

cyan-500

cyan-600

ember-400

ember-500

ok-500

warn-500

Type

k-display

Büyük sistemler

k-h1

Dönüşüm, mimari kararlarla şekillenir.

k-h2

Projeden geriye bir platform kalır.

k-h3

Yüksek İşlem Hacimli Finansal Altyapılar

k-lead

Faaliyet alanımız yazılım geliştirmeden mimari danışmanlığa uzanır.

body 17/1.6

Her projede bıraktığımız şey bir uygulama değil, kurumun yıllarca üzerine inşa edebileceği bir teknoloji varlığıdır.

k-eyebrow · k-num

Faaliyet Alanlarımız

70M+ / gün · 2.581 · %100

Components

k-btn-primary →k-btn-secondaryk-btn-ghostk-btn-smk-btn-lgk-chipk-chip-activek-badge

k-card

Hover: lift and navy border.

k-tile

Tinted, borderless.

k-band-dark

One per page.

Alanİncelenen
Bağlam haritasıSistemler, sınırlı bağlamlar
Veri mimarisiTutarlılık modeli
k-faq
Answer text.
  • k-check item
  • k-check item
k-select

Figures

  1. 01
    ChannelsMobile, web, partner API, e-commerce plugins
  2. 02
    API gatewayIdentity, rate limiting, versioning
  3. 03
    Payment orchestrationMethod routing, risk/fraud checkpoint, idempotency
  4. 04
    Transaction coreWallet/account ledger, multi-currency balance, limits
  5. 05
    Event streamAtomic publication via outbox, at-least-once delivery
simulation
Legacy%100New platform%0Wave 1Wave 2Wave 3Wave 4Live traffic: Legacy %100
  1. 1/4Wave 1: low-risk merchants move to the new platform; 10% of live traffic.
  2. 2/4After every wave the two platforms reconcile: the next wave does not start until the delta is zero.
  3. 3/4Waves 2 and 3: the high-volume segments, 70% of traffic. The way back stays open at every point.
  4. 4/4Wave 4: the last segment. The legacy gateway is switched off — without a single outage.