Notion

Notion's visual style evokes a deep-space command center, merging functionality with an ethereal atmosphere. Dark, often indigo-tinted, backgrounds provide a canvas against which interface elements glow with a distinct, often cool-toned vibrancy. Thoughtful use of subtle shadows and translucency creates an impression of layered depth and sophisticated tooling, without overt skeuomorphism. Prioritize NotionInter for all text elements, leveraging its variable weights for hierarchy and readability. Use Midnight Abyss (#000000) as the primary page background, establishing a dark theme foundation. Employ Cosmic Blue (#455dd3) for primary action buttons to clearly define interactive elements. Apply 12px border-radius to cards and larger content blocks to maintain a consistent soft edge. Utilize Ghostly Gray (#0b0b0b) for nested card backgrounds within the primary dark canvas to suggest depth. Use 24px for card padding and core element gaps to provide adequate breathing room between content. Reserve Lyon Text for distinctive section headlines to introduce an editorial contrast. Avoid using bright, saturated colors for large background areas unless they are intentionally decorative and contained. Do not introduce sharp corners on cards or primary interface elements; adhere to the 12px or 8px standard radii. Refrain from using strong box-shadows; a subtle layered depth is preferred over pronounced elevation. Do not deviate from the established type scale and letter-spacing values to maintain typographic clarity and brand voice. Avoid using Link Ocean (#0075de) as a primary button fill; it is intended for outlined buttons and text links. Do not mix and match spacing units outside the 4px base unit and established tokens; consistency is key. Do not use generic system fonts, NotionInter and Lyon Text are critical for brand identity.