Officevibe

This design system feels like a modern corporate solution, balancing trust with approachability. A deep, almost inky violet (Boardroom Navy) provides a stable foundation, contrasted by a vibrant, electric blue (Brand Electric) that visually energizes interactive elements. The interplay between the sans-serif clarity of Inter and the distinctive, slightly calligraphic AbcFavoritvariable for headings, alongside the unexpected Martinaplantijn script for accent headlines, creates a sophisticated yet human touch. The prevalent use of generous rounded corners (100px for buttons) against sharp content blocks softens the enterprise feel, making complex data feel more accessible. Do use Brand Electric (#2545ff) exclusively for primary interactive elements like main CTA buttons and active navigation states. Do ensure all buttons employ a 100px border-radius for their signature pill shape, unless specifically a ghost button variant. Do use Abcfavoritvariable for prominent headings, applying negative letter-spacing for larger sizes (-0.05em at 40px and above). Do employ Soft Off-White (#f9f8f6) as the primary page background color to establish a soft, approachable base. Do ensure body text uses Inter 400 at 16px, in Pitch Black (#171417) for maximal readability against light backgrounds. Do use Martinaplantijn 400 for accentuating specific words or phrases within larger headings, providing a unique calligraphic touch. Do maintain a consistent vertical spacing of 64px between major sections on the page. Don't use Brand Electric (#2545ff) for static text or non-interactive decorative elements. Don't introduce additional curved shapes; large 100px radii for buttons and 16px for cards are the system's defined roundedness. Don't use bold weights for Inter in headlines; only Abcfavoritvariable or Martinaplantijn should carry headline prominence. Don't embed images with strong, distracting background colors; favor clean product shots or highly stylized UI illustrations. Don't use hard shadows for elevation; rely on background color changes or subtle outlines for depth. Don't clutter layouts; prioritize generous white space with a base element gap of 8px and larger gaps for content sections. Don't use any other blues for brand elements other than Boardroom Navy (#0c1754) and Brand Electric (#2545ff).