HarDress Marka Kiti

Tum degerler tasarim jetonlarindan uretiliyor. Kodda elle hex ya da piksel yazilmaz.

Tipografi

Fraunces

Baslik yazi tipi · yedek: Georgia, serif · uygulamada statik kesit olarak gonderiliyor (React Native degisken yazi tipi ayarlarini desteklemiyor)

Instrument Sans

Arayuz yazi tipi · yedek: -apple-system, SF Pro Text, sans-serif

display.lgDolabindaki parcalar34/40 · 600

display.mdDolabindaki parcalar28/34 · 600

display.smDolabindaki parcalar22/28 · 600

titleDolabindaki parcalar20/26 · 600

body.lgDolabindaki parcalar17/24 · 400

bodyDolabindaki parcalar15/22 · 400

labelDolabindaki parcalar13/18 · 500

captionDolabindaki parcalar12/16 · 400

Renk rampalari

mulberry

#FBF1F5

100

#F5DFE8

200

#E9BFD1

300

#D794AF

400

#BF6289

500

#A33E68

600

#8A2E52

700

#6E2441

800

#521B31

900

#3A1322

clay

100

#F7E7DF

300

#E2AF93

500

#C97B5A

700

#9C5739

butter

100

#FFF3DC

300

#FFE7B0

500

#F2C879

700

#C99A45

900

#8A6426

stone

#FFFFFF

#FBF9F6

100

#F1EDE7

200

#E3DDD4

400

#B5ABA0

600

#8A8179

650

#9F968D

800

#57504A

900

#1A1714

sage

500

#4E7C5B

700

#3F6A4C

danger

500

#B3402F

700

#A93B2B

Anlamsal renkler

Bilesenler bunlari kullanir, yukaridaki ham rampalari degil.

bg.canvas

#FBF9F6

bg.surface

#FFFFFF

bg.sunken

#F1EDE7

text.primary

#1A1714

text.secondary

#57504A

text.tertiary

#8A8179

text.placeholder

#9F968D

text.onBrand

#FFFFFF

border.subtle

#E3DDD4

border.strong

#B5ABA0

brand.primary

#8A2E52

brand.primaryPressed

#6E2441

brand.tint

#FBF1F5

accent.warm

#C97B5A

accent.pop

#F2C879

status.success

#3F6A4C

status.danger

#A93B2B

accent.premium

#F2C879

premium.goldLight

#FFF3DC

premium.goldDark

#8A6426

atmosphere.neutral.top

#F1EDE7

atmosphere.neutral.mid

#F6F3EE

atmosphere.sun.top

#FFE7B0

atmosphere.sun.mid

#FFF3DC

atmosphere.sun.ink

#F2C879

atmosphere.cloud.top

#E3DDD4

atmosphere.cloud.mid

#EFEBE5

atmosphere.cloud.ink

#8A8179

atmosphere.rain.top

#D5E2E6

atmosphere.rain.mid

#E8EEF0

atmosphere.rain.warmMid

#F7EBD6

atmosphere.rain.ink

#4F6B7A

atmosphere.snow.top

#DEE8F1

atmosphere.snow.mid

#EEF3F8

atmosphere.snow.ink

#6F8296

bg.illustration

#F7E7DF

status.warningBg

#FFF3DC

media.onDark

#FFFFFF

Ihlal edilemez kisitlar

Bu liste jeton dosyasindan okunuyor: kural dokumanda degil, kaynakta yasiyor.

text.primarykontrast 16.98:1

text.secondarykontrast 7.54:1

text.tertiarySADECE 18pt+ veya ikon, govde metni ASLA (kontrast 3.64:1)

text.placeholderkontrast 2.77:1

border.strongMetin rengi olarak kullanilamaz

accent.warmUzerine beyaz metin YASAK, sadece text.primary

Bosluk, kose, golge, hareket

Bosluk

xs

4

sm

8

md

12

lg

16

xl

20

2xl

24

3xl

32

4xl

40

5xl

48

6xl

64

Kose yaricapi

sm

md

lg

xl

2xl

full

Golge

card

float

Sure

instant120ms

fast200ms

base280ms

slow420ms

prefers-reduced-motion aciksa animasyon yerine sabit %60 opaklik.