Basil

On desktop and tablet, Basil’s main sections are accessible through persistent tabs. Vertically scroll each section to browse recipes on desktop, and horizontally scroll to browse on tablet.

When a recipe is selected, tabs are used to toggle between ingredients and directions. Directions are displayed using a customized stepper component.

Basil uses a responsive grid system, which has flexible columns and padding that can resize depending on the screen width (such as mobile, tablet, or desktop).

Basil center-aligns type to sections of its layout grid.

Basil’s headline responsively changes type size to fill the width of the screen on mobile.

Basil doesn’t use shadow to show elevation between UI elements. Instead, content is placed at different elevations which are distinguished using parallax motion and opacity.

When text scrolls above imagery, a duotone image treatment ensures text remains legible.

Basil uses a color theme inspired by the deep and rich colors from fruits and vegetables:

Basil’s type scale uses two typefaces: Montserrat, and Lekton. The two typefaces make a quirky pair, adding to the character of Basil.

Montserrat is a sans serif font with wide letterforms. Basil uses it as a display typeface, as well as for body, caption, and button text.

Lekton is inspired by some of the typefaces used in Olivetti typewriters. The glyphs are ‘trispaced,’ meaning they are all built using the same three modular units. The typeface has a predictable vertical alignment of characters, similar to a monospace font. Lekton is used for Basil’s smaller headlines, and subtitles.

Components are grouped into shape categories based on their size. These categories let you set multiple component values at once. Shape categories include:

The tooltip component has square corners with a 0dp corner radius.

The menu component has rounded corners with a 0dp corner radius.

Standard bottom sheets (in their collapsed state) have rounded top corners with a 0dp corner radius.

*Bottom sheets can only shape their top-left and top-right corners.

Basil displays ingredients for each recipe using the list component. Each list uses Basil’s typography and iconography, customized with a line of dots that connect each ingredient to a quantity.

On desktop and tablet, Basil uses tabs to navigate between sections. The tabs are distributed equally across a fixed width region, which is aligned to the center of the screen.

On mobile, tabs allow users to toggle between recipe ingredients and directions. By default, these tabs are displayed at the bottom of a recipe screen. Upon selection, they move to the top of the screen and attach to a surface that allows users to toggle between them.

Basil uses non-linear steppers for recipe directions, so users can move between the different steps in any order they want. Steppers use Basil’s typography and color scheme, with customized vertical spacing.

volume_offvolume_off

Mute

Unmute

Basil’s logo animation plays off the use of parallax throughout the app. The subtle overshoot on the bottom arrow encourages the user to navigate vertically and explore.

Basil makes use of emphasized easing, parallax, and condensed transitions when navigating the app.

Mobile

Parallax is used to indicate the elevation between elements and to add visual interest during transitions.

Tablet and desktop

On tablet and desktop, Basil uses condensed transitions to keep the transitions simple and clean. A translation in the z-axis is combined with a fade-through animation to create the condensed transition.

Components like steppers use stretch motion to add an unexpected and delightful tone to simple interactions.