Design System

טוקנים, צבעים וטיפוגרפיה — מקור אמת אחד למערכת Tickchak. מירור של general/tokens.css?v=6.

Spacing

טוקני מרווחים סטנדרטיים — padding / gap / margin. שמות שווים בכל הקבצים.

--space-xs4px
--space-sm8px
--space-md12px
--space-lg16px
--space-xl24px
--space-2xl28px
--space-3xl40px

Border Radius

רדיוסים סטנדרטיים. --border-radius-full משמש לכפתורים pill.

--r-none
0
--r-sm
4px
--r-md
8px
--r-lg
12px
--r-xl
16px
--r-2xl
24px
--r-full
999px

Typography

App = Assistant · Live = Rubik. מספרים נומינליים = Rubik Regular.

App — Assistant
heading-heroכותרת הירו32 / 800
heading-modalכותרת מודאל20 / 700
heading-pageכותרת דף20 / 700
h3כותרת H318 / 700
heading-cardכותרת כרטיס16 / 700
bodyטקסט גוף — body 16px regular16 / 400
body-smallטקסט קטן (bold)14 / 700
captionקפשן — 12px regular12 / 400
Live — Rubik
h1 (Live)Live Heading H132 / 700
body (Live)טקסט גוף Live — Rubik 16/40016 / 400
button-primaryכפתור ראשי16 / 700
button-chipCHIP12 / 700

Primitives

צבעים פרימיטיביים — מקור לטוקנים סמנטיים. אין להשתמש בהם ישירות בקומפוננטים.

Grays
grays-100
#f5f5f5
grays-200
#e0e0e0
grays-300
#cccccc
grays-400
#b1b1b1
grays-500
#999999
grays-600
#666666
grays-700
#333333
Turquoise (App brand)
turquoise-50
#f0fdff
turquoise-100
#e0fbff
turquoise-200
#c0f6ff
turquoise-400
#8eedff (brand main)
turquoise-500
#60cada
turquoise-600
#33a7b6
turquoise-700
#1f6f7a
Yellows (Live brand)
yellows-50
#fffceb
yellows-100
#fff8db
yellows-300
#ffde58
yellows-400
#ffcc00 (brand)
State — Greens / Reds / Oranges / Blues / Pinks
green-50
#fcffe7
green-400
#b9ca20
green-600
#465b17
reds-50
#ffcccc
reds-200
#ff6666
reds-400
#ff0000
reds-600
#cc0000
oranges-100
#fff2d6
oranges-200
#f7b766
oranges-400
#f28c00
oranges-600
#a85f00
blue-50
#e3f0ff
blue-200
#89c4ff
blue-400
#3399ff
blue-600
#0055b2
pink-200
#ffb2de
pink-600
#800049

Semantic — App (TA)

צבעים סמנטיים של אפליקציית הניהול. כותרים שמתחילים ב---ta-color-.

Semantic — Live (TL)

צבעים סמנטיים של פלואי Live. ערכת brand=צהוב, רקע=שחור (inverse). כותרים --tl-color-.