Qatalog

ClickUp's design system, as seen on the Qatalog acquisition page, emphasizes a bold yet understated aesthetic. High-contrast typography in deep, near-black neutrals anchors the content on a pristine white canvas. A single vivid violet serves as a functional accent, drawing the eye to interactive elements and brand highlights. The visual language balances sharp, confident headlines with approachable body text, creating a system that feels modern and efficient without visual clutter. Use Canvas White (#ffffff) as the primary page background for all content outside of dedicated dark sections. Apply Ink Black (#202020) for all primary headings (display-lg, display, heading-lg, heading) to ensure visual impact. Ensure interactive links and bordered buttons use Electric Violet (#7b68ee) for their text or border color, never for backgrounds. Maintain a tight visual rhythm for headings by consistently applying letter spacing: -1.4px at 40px, -1.44px at 48px, and -2.12px at 60px (Plus Jakarta Sans). Employ a 9px border radius (spacing.radius.buttons or spacing.radius.general) for all functional UI elements like buttons, nav links, and tags. Utilize 10px (spacing.cardPadding) as the primary internal padding for card components and similar container elements. For primary call-to-action buttons, use the Ink Black (#202020) fill with Canvas White (#ffffff) text and an 8px border radius. Do not use Electric Violet (#7b68ee) as a background fill for any button or primary UI element; reserve it for borders, text, and interactive highlights. Avoid applying heavy drop shadows; cards should use Canvas White at 50% opacity or be solid Graphite Black with no shadow. Do not introduce new typefaces; rely solely on Plus Jakarta Sans, Inter, and Sometype Mono for all typographic needs. Never use full-bleed imagery without a subtle overlay, especially when paired with the Rainbow Gradient Overlay. Do not use arbitrary spacing values; always refer to the defined spacing tokens like 4px, 5px, 8px, 10px, 12px, for consistent rhythm. Avoid deep, dark backgrounds on content cards unless it's a specific 'Dark Content Card' component using Graphite Black (#000000). Do not use highly saturated colors for body text; Slate Gray (#292d34) or Subtle Gray (#646464) are preferred for readability and brand adherence.