रंग
notion.com का कलर पैलेट
notion.com अपने पेज #ffffff पर बनाता है, #0d0d0d टेक्स्ट के साथ और एक्सेंट के रूप में #0075de, जो उसके प्राइमरी बटन और लिंक का रंग है। नीचे दिए 9 रंग लाइव साइट से मापे गए हैं।
notion.com से 4 दिन पहले मापा गया।
पैलेट
9 रंग| रंग | भूमिका | Hex | RGB |
|---|---|---|---|
background | Page background | #ffffff | rgb(255 255 255) |
surface | Cards, panels, raised or recessed surfaces | #ffdec4 | rgb(255 222 196) |
surface-2 | Secondary surface | #e6f3fe | rgb(230 243 254) |
foreground | Primary text | #0d0d0d | rgb(13 13 13) |
muted-foreground | Secondary text, captions | #615d59 | rgb(97 93 89) |
primary | Candidate accent (semantic role inferred) | #0075de | rgb(0 117 222) |
on-primary | Text on the accent | #ffffff | rgb(255 255 255) |
secondary | Secondary accent (yellow) | #ffb110 | rgb(255 177 16) |
border | Hairlines, dividers, input borders | #e6e6e6 | rgb(230 230 230) |
- पेज बैकग्राउंड पर टेक्स्ट
- 19.44:1 · WCAG AA पास
- एक्सेंट पर टेक्स्ट
- 4.57:1 · WCAG AA पास
CSS variables
हर रंग एक custom property के रूप में, भूमिका के नाम से। डार्क ब्लॉक तब होता है जब साइट में डार्क थीम हो।
:root {
--color-background: #ffffff;
--color-surface: #ffdec4;
--color-surface-2: #e6f3fe;
--color-foreground: #0d0d0d;
--color-muted-foreground: #615d59;
--color-primary: #0075de;
--color-on-primary: #ffffff;
--color-secondary: #ffb110;
--color-border: #e6e6e6;
}AI एजेंट के लिए
पैक सादा टेक्स्ट है, कोई key नहीं: DESIGN.md लाएँ, या पूरा पैक MCP सर्वर से Claude Code, Cursor या Copilot को दें।
curl -s https://stylepack.ai/packs/notion.com/DESIGN.mdसवाल
notion.com के ब्रांड रंग क्या हैं?
notion.com के मुख्य रंग #0075de (एक्सेंट), #ffffff (बैकग्राउंड) और #0d0d0d (टेक्स्ट) हैं। 9 रंगों का पूरा पैलेट, हर एक की भूमिका के साथ, इस पेज पर hex कोड के रूप में है।
notion.com का hex कोड क्या है?
notion.com का एक्सेंट रंग #0075de है; पेज का बैकग्राउंड #ffffff और मुख्य टेक्स्ट रंग #0d0d0d। हर एक रेंडर हुए पेज से मापा गया है, यानी वही जो विज़िटर देखते हैं, किसी स्टाइल गाइड का मान नहीं।
Tailwind या CSS में notion.com के रंग कैसे इस्तेमाल करूँ?
इस पेज के CSS variables या Tailwind v4 थीम कॉपी करें, या डिज़ाइन पैक डाउनलोड करें: उसमें tokens.json (W3C design tokens), tokens.css और tailwind.css उन्हीं मानों के साथ हैं।