Lujoni · M1 + M2

Component Preview Matrix

Token kataloğu (M1) + 14 UI primitive (M2 Component Library). Tüm primitive'ler src/modules/ui/ altında; canlı vitrin. Anasayfaya dönmek için ↑ /.

§3.1

Renk Paleti

Zemin

bg.* — sıcak doğal taban

cream

rgb(var(--lj-bg-rgb, 252 250 245) / <alpha-value>)

stone

#EDE6DC

sand

rgb(var(--lj-surface-rgb, 245 239 229) / <alpha-value>)

linen

rgb(var(--lj-muted-rgb, 232 223 208) / <alpha-value>)

Doğal Malzeme

natural.* — accent + emphasis

oak

#C7A47F

walnut

rgb(var(--lj-primary-rgb, 138 90 59) / <alpha-value>)

coffee

#5E3A24

hazelnut

#9C6F47

Vurgu

accent.* — sınırlı kullanım

olive

#6B7F5A

terracotta

rgb(var(--lj-accent-rgb, 181 97 60) / <alpha-value>)

charcoal

#3A3530

black

#1A1713

Border

border.* — divider + ring

subtle

rgb(var(--lj-border-rgb, 227 216 196) / <alpha-value>)

strong

rgb(var(--lj-border-strong-rgb, 199 184 159) / <alpha-value>)

focus

#C7A47F

State

state.* — sistem durumları

success

rgb(var(--lj-success-rgb, 107 127 90) / <alpha-value>)

warning

#C8973B

danger

rgb(var(--lj-danger-rgb, 181 97 60) / <alpha-value>)

campaign

#C0392B

§3.2 + ADR-002

Tipografi

Display: Fraunces · Body: Inter — her ikisi de next/font/google ile self-host.

  • display-lg

    font-display

    Şehrin içinde, sana ait bir alan.

  • display

    font-display

    Sıcak doğal modernizm.

  • h1

    font-display

    Yumuşak meşeden günün ilk masası.

  • h2

    font-display

    Yeni sezon — ceviz koleksiyonu.

  • h3

    font-display

    Küçük alanlar için akıllı çözümler.

  • h4

    font-display

    Editorial: Bir mutfağın hikâyesi.

  • h5

    font-display

    Detaylar — el yapımı bağlantılar.

  • body-lg

    font-sans

    Lujoni, evin küçük ritüellerini ön plana çıkaran sade ve sıcak bir tasarım dili sunar.

  • body

    font-sans

    Her parça, doğal malzemenin dokusu ve modern oranların dengesiyle tasarlanır.

  • body-sm

    font-sans

    Ürün açıklamalarında kısa, açık ve içten bir dil kullanılır.

  • eyebrow

    font-sans

    yeni · sezon vurgusu

  • caption

    font-sans

    Stok ve teslimat süresi bilgisi.

  • micro

    font-sans

    etiket · meta

§3.3

Spacing

4px taban skala.

  • 0

    0

  • 1

    0.25rem

  • 2

    0.5rem

  • 3

    0.75rem

  • 4

    1rem

  • 5

    1.25rem

  • 6

    1.5rem

  • 8

    2rem

  • 10

    2.5rem

  • 12

    3rem

  • 16

    4rem

  • 20

    5rem

  • 24

    6rem

  • 32

    8rem

  • 40

    10rem

  • 48

    12rem

  • 64

    16rem

  • px

    1px

  • 0.5

    0.125rem

  • 1.5

    0.375rem

§3.4

Radius

none

0

xs

0.25rem

sm

0.5rem

md

0.75rem

lg

1.25rem

xl

2rem

pill

9999px

full

9999px

§3.5

Shadow

Warm ink #2A211A taban — siyah değil, kahverengi-siyah.

none

none

subtle

0 1px 2px rgba(42, 33, 26, 0.04)

soft

0 4px 12px rgba(42, 33, 26, 0.06)

lifted

0 8px 24px rgba(42, 33, 26, 0.08)

elev

0 8px 24px rgba(42, 33, 26, 0.08)

dialog

0 24px 60px rgba(42, 33, 26, 0.18), 0 4px 12px rgba(42, 33, 26, 0.08)

sticky

0 -1px 0 rgba(42, 33, 26, 0.06), 0 2px 6px rgba(42, 33, 26, 0.04)

inset

inset 0 1px 2px rgba(42, 33, 26, 0.05)

focus

0 0 0 3px rgba(199, 164, 127, 0.35)

§3.6

Motion

Yumuşak kısa animasyonlar — bounce/spring yasak.

duration

  • fast

    150ms

  • base

    200ms

  • default

    250ms

  • slow

    400ms

  • page

    600ms

easing

  • out

    cubic-bezier(0.16, 1, 0.3, 1)

  • in

    cubic-bezier(0.4, 0, 1, 1)

  • in-out

    cubic-bezier(0.4, 0, 0.2, 1)

  • emphasized

    cubic-bezier(0.2, 0, 0, 1)

  • spring

    cubic-bezier(0.5, 1.25, 0.5, 1)

M2.1 · UI Primitives

Button

cva varyantları: intent (primary/secondary/tertiary/ghost) + size (sm/md/lg) + block. Polymorphism: asChild ile Link/anchor olarak render.

intent

size

asChild → anchor

Renklere Git ↓

block (full-width)

M2.2 · UI Primitives

Form & Link

Label, Input, Textarea, Field compound (Label / Control / Helper / Error) ve Link.

Field compound — varsayılan

Yeni koleksiyon ve özel davetler için kullanırız.

İsteğe bağlı.

Input — boyutlar

Link — varyantlar

Composition — Field + Button block

KVKK aydınlatma metnini okudum, kabul ediyorum.

M2.3 · UI Primitives

Card, Badge & Divider

Compound örnek: Card + CardImage + CardBody + CardFooter (named exports — RSC compound disiplini). Badge intent (campaign kırmızısı sınırlı kullanım) + yatay/dikey Divider.

Card variant + hoverable

Meşe yan sehpası
Yeni

Meşe Yan Sehpası

El işçiliği, doğal yağlı meşe.

3.450 ₺

İncele →
Ceviz konsol
Sezon Vurgusu

Ceviz Konsol

Modern hatlar, sıcak doku.

Yeni fiyat

8.900 ₺

−%20
Eko bambu raf
Eko

Bambu Modüler Raf

FSC sertifikalı, monte edilebilir.

2.190 ₺

Badge — intent matrisi

NeutralYeniSezonEcoPremium−%30

campaign intent: strateji §8.2.4 + blueprint 001 §4.9 — sınırlı yüzeyde, max 120 px. PriceSlashTag veya CampaignRibbon dışında doğrudan kullanmadan code review'da işaretlenir.

Divider — orientation

horizontal · subtle

horizontal · strong

vertical · 80px

Sol içerik

Sağ içerik