Blok

Blok's design system uses a bright, energetic palette grounded in high-contrast monochromes. A vivid teal accent color provides functional punctuation for primary actions, while secondary interaction is highlighted with a striking blue. Typography is confident and direct, predominantly sans-serif, establishing clear hierarchy. Components are lightweight with minimal use of shadows, favoring crisp borders and rounded edges for interactive elements. Prioritize 'Midnight Ink' (#0a0d0f) for primary text and 'Canvas White' (#ffffff) for page backgrounds. Use 'Aqua Thrill' (#1dd8e1) exclusively for primary call-to-action buttons and prominent interactive elements. Apply a 100px border-radius for all pill-shaped buttons and tags to maintain a consistent interactive element style. Ensure all headings use a wide letter spacing of 0.0900em as defined in the Cabin and Jost typography tokens. Maintain a clear vertical rhythm between sections using a 'sectionGap' of '50px'. Use Cabin (500, 600) or Jost (700) for all headings to create distinct visual hierarchy. Apply 'Border Ash' (#d5d6d7) for input field outlines and subtle dividers. Do not use saturated colors other than 'Aqua Thrill' (#1dd8e1) and 'Electric Blue' (#2c75d4) for interactive elements. Avoid deep shadows or overly dimensional effects on components; prefer crisp borders and flat surfaces. Do not deviate from the specified letter spacing values for headings; consistent tracking is key to brand typography. Do not use 'Pure Black' (#000000) for general body text; reserve it for high-contrast headings or specific elements. Avoid non-standard border-radii for primary buttons; stick to 0px for solid actions and 100px for pill-shaped secondary actions. Do not introduce new typefaces; adhere strictly to Poppins, Cabin, Jost, and GTStandard-M. Do not use 'Charcoal Haze' (#2e3438) for large headlines; it is reserved for secondary text and muted elements.