Basil : Design System and UI Kit

Basil's design system has been meticulously crafted to create a minimalistic and refreshing visual experience based on its target audience.

Basil's design system revolves around a minimalistic yet visually appealing aesthetic. This warm yellow evokes a sense of freshness and vitality, reflecting the natural ingredients used in Basil's smoothies. Deep green represents stability and adds a touch of sophistication to the overall visual identity. And light Sea Green acts as a calming and refreshing color, light sea green complements the other hues while enhancing the brand's connection to nature.

The chosen typeface plays a crucial role in creating a cohesive and legible brand identity as a modern sans-serif typeface with clean lines and a friendly feel

Basil's logo is an essential part of its visual identity. It embodies the brand's essence and instantly communicates its purpose. The logo features a stylized basil leaf icon, incorporating dark green to maintain consistency and brand recognition.

The design system extends to the UI components used throughout Basil's digital presence. Here are some key elements:

• Buttons: Simple and clean, the buttons feature rounded corners and a subtle shadow effect to provide a tactile feel. The olive yellow color is utilized for primary actions, while dark green is used for secondary actions.

• Icons: Icons are minimalist, intuitive, and consistent with the overall design system. They maintain a friendly appearance and communicate functionality effectively.

• Cards: The card components follow a grid-based layout, ensuring consistency across different sections of the website. The cards use the light sea green color as a background to evoke a sense of freshness and highlight the content.

Have a look at the complete project here.

Also, find the live website here.