rastrillo डिज़ाइन सिस्टम

डिज़ाइन सिस्टम जो कुछ देता है, उसका अवलोकन। थीम: signal। भाषा: हिन्दी।

सभी कॉम्पोनेंट के लिए साझा कस्टम प्रॉपर्टीज़। रंग और टाइप थीम का हिस्सा हैं (themes/signal.css)। टाइप स्केल और स्पेसिंग चरण संरचना हैं और tokens.css से आते हैं।

यहाँ लाइट मोड दिख रहा है; सभी मान light-dark से आते हैं। WCAG 2.2 AA न्यूनतम: टेक्स्ट के लिए 4.5:1, कंट्रोल बॉर्डर के लिए 3:1। चिप वगैरह के सभी रंग वेरिएबल से आते हैं।

सतहें और रेखाएँ

• --rst-bg#f4f5f8
• --rst-header-rulecolor-mix(in oklab, var(--rst-accent) 45%, var(--rst-line))
• --rst-line#dde0e7
• --rst-line-strong#6d7482
• --rst-surface#ffffff
• --rst-surface-2#eef0f4

पाठ

• --rst-text#0c0e12
• --rst-text-faint#5b6270
• --rst-text-muted#454b57

उभार रंग

• --rst-accent#1a56ff
• --rst-accent-soft#e9eeff
• --rst-accent-strong#0f3fd6
• --rst-on-accent#ffffff

स्थिति के टोन

• --rst-tone-negative-bg#fbdee0
• --rst-tone-negative-fg#a8121f
• --rst-tone-neutral-bg#e6e8ee
• --rst-tone-neutral-fg#3b414d
• --rst-tone-positive-bg#d6efe6
• --rst-tone-positive-fg#08624a
• --rst-tone-warning-bg#f8e5c2
• --rst-tone-warning-fg#7a4708

गहराई

• --rst-overlayrgba(9, 11, 16, 0.55)
• --rst-shadow-knob0 1px 2px light-dark(rgba(12, 14, 18, 0.45), rgba(0, 0, 0, 0.6))
• --rst-shadow-lift0 1px 2px light-dark(rgba(12, 14, 18, 0.2), rgba(0, 0, 0, 0.5))
• --rst-shadow-pop0 4px 10px light-dark(rgba(12, 14, 18, 0.22), rgba(0, 0, 0, 0.62))

कोने की त्रिज्या

• --rst-radius4px
• --rst-radius-pill999px
• --rst-radius-sm2px

टाइप फ़ैमिली

• --rst-font"Helvetica Neue", Helvetica, "Segoe UI Variable Text", "Segoe UI", Roboto, Arial, ui-sans-serif, system-ui, sans-serif

टाइप स्केल

• Ag--rst-fs-base0.875rem
• Ag--rst-fs-lg1.0625rem
• Ag--rst-fs-sm0.78125rem
• Ag--rst-fs-xs0.71875rem

अंतराल

• --rst-sp-10.25rem
• --rst-sp-20.5rem
• --rst-sp-30.75rem
• --rst-sp-41rem
• --rst-sp-51.5rem
• --rst-sp-62.5rem