Notion

Notion's design system feels like a high-tech control panel, favoring a deep, almost inky blue background that provides a sophisticated setting for its functional UI. A restrained use of bright, vivid accent colors, primarily blues and an array of warm hues, pop against this dark canvas, indicating interactive elements and feature highlights. Typography is crisp and highly legible, with a meticulous approach to letter-spacing that implies precision, while subtly rounded corners on cards and buttons soften the otherwise sharp technical aesthetic. Prioritize NotionInter typeface (#000000 on dark, #ffffff on light) for all body text and UI labels, ensuring consistent letter-spacing from the type scale. Use Midnight Ink (#02093a) as the default background for large hero sections and prominent cards in dark mode interfaces. Implement Action Indigo (#455dd3) exclusively for primary call-to-action buttons, pairing it with Paper White (#ffffff) text. Apply 12px border-radius to all cards and larger container elements, and 8px border-radius for buttons for visual consistency. Utilize Ocean Glimmer (#0075de) for all interactive link text and subtle button outlines to indicate interactivity without distraction. Maintain a clear visual hierarchy by limiting saturated accent colors (like Alert Red, Team Teal, Sunny Yellow) to small background fills for content categorization or highlights. Do not use generic gray backgrounds; instead, leverage the nuanced shades of Midnight Ink (#02093a) and Canvas Dark (#000000) for visual depth in dark themes. Avoid using multiple vivid colors side-by-side without a clear functional purpose; accents should be deliberate and functional. Do not vary letter-spacing for NotionInter text unless it adheres strictly to the defined type scale's specific values for each role. Refrain from using Lyon Text for anything other than large, editorial-style headings, to preserve its distinct character. Do not introduce new border-radius values; stick to 12px for cards, 8px for buttons, 4px for inputs, and 9999px for pill-shaped elements. Avoid generic shadow effects; if elevation is needed, use the explicit box-shadow values provided, or rely on distinct background colors for depth.