Slab

Slab's design system feels like a warm, engaging knowledge hub, balancing a serious intent with inviting visual cues. The predominant use of varied neutrals provides clarity and structure, offset by a rich, deep berry background in the hero, creating an immediate sense of depth and distinction. Strategic pops of vivid red and blue for CTAs act as clear beacons against the otherwise subdued palette. Custom fonts with precise letter-spacing contribute to a distinguished readability, ensuring information feels approachable yet authoritative. Use Whitney for all body text, UI elements, and secondary headings, ensuring slightly tracked letter-spacing. Apply Sentinel with significant negative letter-spacing for all primary headlines (display and display-sm) to achieve a compact, elegant look. Prioritize Slab Red (#ff4143) for primary call-to-action buttons, reserving Slab Blue (#4285f4) for specific integration buttons like 'Sign up with Google'. Implement 6px border-radius consistently for all buttons and input fields to maintain a soft, unified aesthetic. Offset sections with varying background colors like Berry Ink (#42022e) and Crisp White (#ffffff) to create clear visual separation. Utilize a baseline of 16px as the primary body text size with a line-height of 1.5, establishing comfortable readability. Employ the neutral progression of Near Black (#000000) for primary text, Slate Gray (#455360) for secondary, and Ash Gray (#939598) for tertiary information. Do not use generic, default blue for links; instead, use Slate Gray (#455360) for text links and Slab Red (#ff4143) or Slab Blue (#4285f4) for button interactions. Avoid excessive shadow or elevation; rely on color and spacing to create depth and hierarchy. Do not vary border-radius indiscriminately; stick to 6px for interactive elements and inputs. Keep headlines concise, leveraging the Sentinel typeface's distinct character to command attention without excessive length. Refrain from introducing new vivid colors outside the defined brand and accent palette to maintain visual clarity. Do not use plain, linear text blocks for feature descriptions; integrate relevant imagery or icons alongside text to enhance comprehension.