दो-स्तरीय पैलेट और थीम

§1.1टियर 1: पिगमेंट

कच्चा पैलेट एक चित्रकार की पेटी है — थीम से निरपेक्ष, नाम --p-*। कागज़: ब्राउज़ की ज़मीन 纸 और उसकी कार्ड-सतह 页, पढ़ने की ज़मीन 素 (एक दर्जा ठंडी — घंटे-भर की पढ़ाई में आँखों पर हल्की) और उसकी मुलायम सतह 帛, सफ़ेद कार्ड, कोड और गणित की ज़मीनें। स्याहियाँ: शेल्फ़ के लिए एक गरम सेट और कॉलम के लिए एक तटस्थ सेट, हर एक तीन गाढ़ेपनों में। जिल्दबंदी: शेल्फ़ की मोटी रेखा, पिल का बॉर्डर, दो महीन रेखाएँ। और पिगमेंट — वे रंग जो अर्थ ढोते हैं:

--p-zhu: #7d3a3a; /* 朱 · वाइन-रेड — ब्राउज़ का accent, साइट का चिह्न */
--p-shi: #b6552e; /* 石 · जला हुआ नारंगी — पढ़ने का accent: लिंक, अंक, kicker */
--p-shi-text: #8f3f1f; /* 石 · छोटे-टेक्स्ट का दर्जा (अपनी ही आभा पर AA) */
--p-zhe: #c08a2c; /* 赭 · गेरुआ — रेखाएँ और बॉर्डर */
--p-dai: #2a6f6b; /* 黛 · टील — सामग्री का दूसरा accent */
--p-zi: #6b4ec4; /* 紫 · बैंगनी — "सिस्टम" अर्थ-क्षेत्र */

साथ में डार्क संस्करण के लिए एक रात का सेट: साँझ की ज़मीनें, चाँदनी-सफ़ेद स्याहियाँ, और हर पिगमेंट का एक चमकाया हुआ जुड़वाँ।

§1.2दो संदर्भ, एक पैलेट

टियर 2 वही है जिसे कंपोनेंट-परत बरतती है, और उसके दो चेहरे हैं:

दोनों में कॉलम ज़्यादा शांत है — उसे आप घंटे-भर पढ़ते हैं। शेल्फ़ ज़्यादा गरम है और डिस्प्ले-सेरिफ़ में सजी है — उस पर आप नज़र डालते हैं और चुनते हैं। पन्ना शेल्फ़-संदर्भ में एक क्लास से दाख़िल होता है — body पर wb-root; उसके भीतर chrome के टोकन (--color-bg, --color-accent, …) शेल्फ़ के टोकनों पर फिर से मैप हो जाते हैं, इसलिए एक बार लिखी नेविगेशन-पट्टी दोनों ज़मीनों पर ठीक बैठती है — और वर्गीकरण के परमाणु (प्रकार-बैज, स्थिति-बिंदु, क्षेत्र-chip), जो --color-* के विरुद्ध लिखे हैं, नोट-पन्ने पर कॉलम का हिस्सा और ब्राउज़-पन्ने पर शेल्फ़ का हिस्सा दिखते हैं। कंपोनेंट-परत सिर्फ़ टियर 2 बरत सकती है — base.css, browse.css और हर कंपोनेंट; किसी नियम में कोई नंगा रंग-मान नहीं है, और कोई fallback भी नंगे मान पर नहीं गिरता। यही इस पैकेज का सख़्त अनुशासन है।

§2.1साइट अपनी पहचान कैसे गढ़ती है

टियर 1 override कीजिए। पिगमेंटों की जगह अपने रंग रखिए — दोनों संदर्भ और पूरी कंपोनेंट-परत अपने-आप पीछे-पीछे चलेगी। हर पिगमेंट एक दिन/रात की जोड़ी है: लाइट थीम --p-shi और --p-zhu पढ़ती है, डार्क थीम उनके रात वाले जुड़वाँ --p-shi-n और --p-zhu-n — पहचान का override दोनों सदस्य सेट करता है, या फिर डार्क डिफ़ॉल्ट पिगमेंटों पर टिका रहता है:

:root {
  --p-shi: #b03a48; /* आपके पढ़ने के कॉलम का accent */
  --p-shi-text: #93303c; /* इसका छोटे-टेक्स्ट वाला दर्जा अलग से गहराया जाता है, नीचे देखिए */
  --p-zhu: #3b4a7a; /* आपकी शेल्फ़ का accent और साइट-चिह्न */
  --p-shi-n: #e0919b; /* रात के जुड़वाँ, साँझ की ज़मीनों के लिए चमकाए हुए */
  --p-zhu-n: #9fb0e4;
}

आपके डिज़ाइन-सिस्टम के पास पहले से अपना पैलेट हो, तो टियर 2 को उस पर फिर से मैप करना भी उतना ही समर्थित रास्ता है — --color-* और --wb-* को अपने वेरिएबलों पर इंगित कर दीजिए। यह बगीचा जान-बूझकर कुछ भी override नहीं करता: आप पैकेज का ख़ालिस चेहरा पढ़ रहे हैं — वही जिसकी वकालत paper-and-ink करता है।

§2.2कंट्रास्ट का ऑडिट होता है

टेक्स्ट-दर्जे का हर मान उस हर सतह पर WCAG AA के विरुद्ध परखा गया है, जिस पर वह बैठता है: छोटा टेक्स्ट 4.5:1 से शुरू होता है; छोटे टेक्स्ट के रूप में इस्तेमाल accent को एक अलग से गहराया हुआ टेक्स्ट-दर्जा मिलता है (--p-shi-text, --p-zhe-text), क्योंकि accent-रंग का 12px लेबल अक्सर accent की अपनी ही आभा पर बैठा होता है; धुँधली स्याहियाँ उस सबसे गहरे शेड पर सेट हैं जो फिर भी धुँधला पढ़ा जाए — पढ़ने की ज़मीन पर #6a6d74 का अनुपात 4.9:1 है, और मुलायम सतह पर भी 4.5:1; कोड की ज़मीन कागज़ से एक दर्जा हल्की है, ताकि सिंटैक्स-थीम का सबसे फीका टोकन (टिप्पणियाँ) 4.5:1 पार करे; डार्क संस्करण अपना चमकाया हुआ सेट रखता है, जो रात की ज़मीनों के विरुद्ध नापा गया है। पैकेज यह नाप औज़ार के रूप में भी देता है: scripts/contrast_probe.mjs डेमो को असली ब्राउज़र में रेंडर करता है — दोनों थीम, दोनों चौड़ाइयाँ — हर टेक्स्ट-रन के नीचे की ज़मीन पिक्सेलों से नमूना लेकर पढ़ता है और बार से नीचे का हर रन रिपोर्ट करता है (कंट्रास्ट-प्रोब)। कोई भी मान बदलने से पहले जान लीजिए कि वह किन-किन सतहों पर बैठा है।

§2.3लाइट ही पहचान है

थीम जान-बूझकर prefers-color-scheme नहीं पढ़ती: कोई पन्ना पाठक के पढ़ते-पढ़ते अपनी थीम ख़ुद न पलटे। डार्क सिर्फ़ [data-theme='dark'] से सक्रिय होती है, जिसे साइट का अपना स्विच चलाता है (इस साइट की नेविगेशन-पट्टी के दाएँ छोर का सूरज/चाँद बटन; चुनाव localStorage की inkstone-theme कुंजी में सहेजा जाता है और ThemeInit इनलाइन-स्क्रिप्ट उसे पहले paint से पहले दोहरा देती है, इसलिए डार्क-थीम पाठकों को कभी क्रीम रंग की कौंध नहीं दिखती)। डार्क कोई उलटा चित्र नहीं, हाथ से सेट किया दूसरा संस्करण है: साँझ की ज़मीनें, चाँदनी-सफ़ेद स्याहियाँ, फिर से चमकाए पिगमेंट — डार्क दूसरा संस्करण है, उलटा चित्र नहीं।

§2.4फ़ॉन्ट भी यहीं रहते हैं

चार स्टैक। --font-display शेल्फ़ का चेहरा है — शीर्ष-पट्ट और शेल्फ़-शीर्षकों के लिए optical-size सेरिफ़ (Source Serif 4, हान अक्षरों के लिए Noto Serif SC के साथ); यह डेमो उसे @fontsource से self-host करता है, और जो साइट नहीं करती वह पढ़ने वाले चेहरे पर गिर जाती है। --font-body पढ़ने के कॉलम का है — Charter और Iowan Old Style की अगुवाई वाला सिस्टम-सेरिफ़ स्टैक, जिनके न होने पर डिस्प्ले-चेहरा क़दम बढ़ाता है। --font-ui शीर्षकों, chrome और महीन छपाई के लिए Inter है (हान अक्षरों के लिए Noto Sans SC)। --font-mono Maple Mono CN का एक स्थिर-वर्णसमूह subset है (ASCII + बॉक्स-ड्रॉइंग + प्रचलित-3500 हान अक्षर + मौजूदा सामग्री का संघ): लैटिन 0.6em पर, हान अक्षर 1.2em पर — एक हान अक्षर ठीक-ठीक दो कैरेक्टर-सेल चौड़ा होता है, इसलिए बॉक्स-ड्रॉइंग आरेख मिली-जुली चीनी/लैटिन पंक्तियों में भी सीधे बैठते हैं। subset की विधि और पुनर्जनन-स्क्रिप्ट पैकेज के साथ आती है (fonts/build_font_subset.py); जब सामग्री को कवरेज से बाहर के अक्षर चाहिए हों, उसे फिर चलाइए और woff2 कमिट कीजिए। कोड फ़्रेम पूरी तरह इसी subset में सजे हैं।