02

צבעים

פלטת משטח, הדגשה, טקסט וסמנטיקה. כל ערך נושא עוגן bg:color:.

משטח

bg-primary
#0a0a0f
page background for marketing site, landing, content pages
bg:color:bg-primary
bg-secondary
#1D1D1F
footer, secondary surfaces, deep panels
bg:color:bg-secondary
bg-elevated
#1a1a2e
elevated cards (FAQ items, protection cards, dashboard cards)
bg:color:bg-elevated
bg-section-alt
#111116
alternate-section backgrounds for visual rhythm
bg:color:bg-section-alt
bg-sidebar
#0f0f18
dashboard left sidebar base
bg:color:bg-sidebar
bg-workspace
#0d0d14
dashboard main workspace
bg:color:bg-workspace
bg-input
#1a1a24
dashboard inputs, selects, dropzones
bg:color:bg-input
bg-modal
#1a1a2e
dashboard modals and summary panels
bg:color:bg-modal
bg-control
#0f0f1a
legacy control surfaces (selects, file info)
bg:color:bg-control
bg-dark
#000000
pure black; use sparingly, only as gradient stop
bg:color:bg-dark

הדגשות

cyan
#00B8D4
primary brand accent. Links, active toggles, focus ring, icon tint
bg:color:cyan
cyan-hover
#00E5FF
hover and highlight cyan, brighter cyan on interaction
bg:color:cyan-hover
cyan-dark
#0097A7
darker cyan for gradient mid-stops
bg:color:cyan-dark
cyan-very-dark
#00515e
hero gradient stop
bg:color:cyan-very-dark
purple
#7C4DFF
secondary brand accent. Pricing Enterprise, gradient end stop
bg:color:purple
purple-hover
#9D7EFF
hover and highlight purple, brighter purple on interaction
bg:color:purple-hover
purple-light
#B794FF
lighter purple for gradient text
bg:color:purple-light
purple-very-dark
#4527A0
hero gradient end stop
bg:color:purple-very-dark

טקסט

text-primary
#FFFFFF
primary text on dark backgrounds, H1/H2/H3
bg:color:text-primary
text-secondary
#86868B
Apple-style muted body, lead paragraphs
bg:color:text-secondary
text-tertiary
#6E6E73
breadcrumbs, subdued meta, plus/minus icons
bg:color:text-tertiary
text-inverse
#1D1D1F
text on light surfaces (rare on this site)
bg:color:text-inverse

סמנטי

success
#22c55e
solid success fill, social-proof check icon
bg:color:success
success-light
#4ade80
status text on dark, success icons
bg:color:success-light
warning
#f59e0b
solid warning fill
bg:color:warning
warning-light
#fbbf24
status warning text
bg:color:warning-light
warning-accent
#fb923c
tooltip warning border, advanced-mode dot
bg:color:warning-accent
error
#ef4444
solid error fill
bg:color:error
error-light
#f87171
status error text on dark
bg:color:error-light
footer-text
#A1A1A6
footer body text
bg:color:footer-text
footer-text-hover
#F5F5F7
footer link hover
bg:color:footer-text-hover

PWA

pwa-theme
#0B0E13
PWA manifest theme_color and browser chrome
bg:color:pwa-theme
pwa-background
#0B0E13
PWA manifest background_color and splash
bg:color:pwa-background
meta-theme-page
#00e5ff
in-page meta theme-color accent on hero pages
bg:color:meta-theme-page

מסגרות ומשטחים

border
rgba(255, 255, 255, 0.08)
default 1px hairline on dark cards
bg:color:border
border-hover
rgba(0, 184, 212, 0.3)
card hover ring (cyan tint)
bg:color:border-hover
surface
rgba(255, 255, 255, 0.03)
glass card base fill
bg:color:surface
surface-hover
rgba(255, 255, 255, 0.06)
glass card hover fill
bg:color:surface-hover
pro-card-border
rgba(0, 184, 212, 0.2)
pricing Pro card outline
bg:color:pro-card-border
pro-card-border-hover
rgba(0, 184, 212, 0.5)
pricing Pro card hover outline
bg:color:pro-card-border-hover
section-badge-bg
rgba(0, 184, 212, 0.12)
section badge/micro-label fill
bg:color:section-badge-bg
section-badge-border
rgba(0, 184, 212, 0.25)
section badge/micro-label border
bg:color:section-badge-border
success-bg
rgba(34, 197, 94, 0.15)
success badge/pill background
bg:color:success-bg

גווני אייקונים

cyan
rgba(0, 139, 139, 0.3)
bg:icon-tint:cyan
green
rgba(34, 197, 94, 0.3)
bg:icon-tint:green
purple
rgba(124, 77, 255, 0.3)
bg:icon-tint:purple
orange
rgba(251, 146, 60, 0.3)
bg:icon-tint:orange
blue
rgba(59, 130, 246, 0.3)
bg:icon-tint:blue
red
rgba(239, 68, 68, 0.3)
bg:icon-tint:red