Core elements

The visual design of our brand is vast, but there are a number of core elements that are incorporated regularly into our designs. These graphics point back to our product, aid in storytelling, and provide a foundation for visual consistency.

For each of these graphics, there are specific stylistic approaches we take to aid in brand identity. The styling techniques below apply to the entire visual design system:

• Objects should be front-facing, with no 3D depth or shadows applied.
• As a graphic is scaled down, the detail should be reduced accordingly.
• Graphics can use a mix of rounded and angled corners.
• Linework should use capped ends.
• Graphics should use a single stroke weight consistently throughout any given asset.
• The radius of curved corners should be applied consistently throughout an asset.
• Visual elements should work together to convey speed and movement. Gradients and colors can achieve this effect, and graphics should move from left to right to capture a sense of forward motion.

DevOps loop

The brand and product are built on DevOps, which is why this symbol has taken a key role, even in our logo. As such, the loop is used often, especially to convey general concepts in marketing materials. The tanuki and devops loop can also appear together to further drive brand awareness. The top of the loop should overlap the bottom to show depth and movement.

Labels

Inspired by the labels used throughout the product, we incorporate this shape into designs and illustrations. Here are some applications: Labels should be short in length, with completely rounded ends that form a pill shape; they should not be visually mistaken for code lines. Labels can contain information, 3 words or less. Labels can contain an icon to provide additional context. Note: labels should not be used as a CTA button; refer to the button styling for this use case.

Code lines

Thin lines are commonly used to represent lines of code. They can take form as long, thin rectangles with completely rounded ends or as single strokes with rounded caps; at any given instance, either one or the other style should be used and not mixed together. When incorporating this element, the lines should be left-aligned and read like a block of code; adding indentations, gaps between the lines, and various different line lengths can help create this effect. While one color is permissible, adding multiple colors creates more realism to achieve this effect.

Curved containers

Inspired by the curves of our tanuki, we often apply one curved corner to the bottom right of square shapes to soften the look and add more visual appeal. These types of shapes usually contain something else, like copy or an image, but also appear in the stylization of our icons. For a single curved corner, the curve radius should be 25-30% of the width of the square. When curved corners are applied to all corners, the radius should be 5-10%. Adding this to all corners aids in the storytelling of our web-based product by mimicking the shape of a browser window.

Pipelines

Pipelines are represented by a single stroked line and are incorporated throughout a design to create movement and flow. Dashed or fading lines can also be used to allude to a pipeline in progress. Adding a node to at least one end of the line can give the stylistic impression of a circuit board. If corners or angles are used within a line, a curve should be applied.

Accents and symbols

The commit symbol makes an appearance throughout designs as a nod back to the product. In addition to other tech symbols, such as plus marks and nodes, they can be used subtly for adornment or to fill empty space in designs.