Preview image. Unlock full-res
Deep space command console. Information-dense, with critical functions highlighted by a bright, singular light source against a dark, expansive backdrop.
Krisp's visual identity balances robust clarity with a subtle, dynamic energy. Dominant neutral whites and a deep, muted indigo base (#131032) provide a stable foundation, allowing a single, vivid violet accent (#614efa) to punctuate interactive elements. The type scale relies on the highly functional Plus Jakarta Sans, with an emphasis on generous line heights and subtle letter spacing for hierarchy, ensuring legibility even for dense information. Rounded elements contrast with the underlying structural precision, adding a soft, approachable quality to the technical focus. Prioritize Plus Jakarta Sans at all weights for both headings and body text to maintain typographic consistency. Use Krisp Violet (#614efa) exclusively for primary call-to-action buttons and key interactive states to maximize impact. Establish clear hierarchy with the Deep Space Indigo (#131032) for main headings and text, and Muted Gray Text (#918f9f) for secondary descriptive copy. Implement a base border-radius of 8px for most interactive elements, reserving 12px for badges and 9999px for distinct pill-shaped components. Leverage the Crisp White Background (#ffffff) and Pale Gray Surface (#f7f7f8) to create clear visual separation between content sections. Employ gradients (e.g., linear-gradient(90deg, #614efa 22.93%, #62c8ff 76.42%)) for hero sections or distinct visual components to add dynamism. Do not introduce new typefaces; rely solely on Plus Jakarta Sans. Avoid using highly saturated colors other than Krisp Violet (#614efa) for interactive elements, except for semantic red where appropriate. Do not use dark backgrounds for general page content; maintain a light theme with crisp white or pale gray surfaces. Avoid excessive use of drop shadows; maintain a flat aesthetic except for intentional elevation of modals or specific cards. Do not deviate from the established spacing scale (multiples of 4px) for padding and margins. Avoid non-functional decorative elements; every visual choice should serve a purpose in clarity or interaction.
