Linbit

Increasing sales leads for a cloud storage company

The makers of a suite of open-source cloud software, Linbit needed to organize its products and present them as part of a fresh new identity that spoke to the company's core values. My role as lead designer was to develop this new visual identity and apply it to an array of deliverables including a visual style guide, logo, web pages, and exhibition booth graphics.

Jump to Section

Problems

Concept

Logo

Illustration

Style Guide

Web Design

Deliverables

Problems

Linbit home page as it appeared in April 2022 (Wayback Machine)
Linbit home page as it appeared in April 2022 (Wayback Machine)
#111111
#1E2939
#FFFFFF
#F79133

Assessing an outdated look

Linbit required a fresh visual identity commensurate with its reputation for making quality open-source software. Passed around from agency to agency for several years and lacking a style guide, the identity was a hodgepodge of style without clear rules or inspiration.

• Legibility issues with logo

• Inconsistent alignment and spacing
• Crowded navigation bar

• Spot illustrations underdeveloped, look like icons

• Rounded elements too playful, not a brand fit
• Color palette is unbalanced, heavy, too saturated

• Poor contrast in color application

• Poor use of scale in layouts

Linbit required a fresh visual identity commensurate with its reputation for making quality open-source software. Passed around from agency to agency for several years and lacking a style guide, the identity was a hodgepodge of style without clear rules or inspiration.

• Legibility issues with logo

• Inconsistent alignment and spacing
• Crowded navigation bar

• Spot illustrations underdeveloped, look like icons

• Rounded elements too playful, not a brand fit
• Color palette is unbalanced, heavy, too saturated

• Poor contrast in color application

• Poor use of scale in layouts

Linbit required a fresh visual identity commensurate with its reputation for making quality open-source software. Passed around from agency to agency for several years and lacking a style guide, the identity was a hodgepodge of style without clear rules or inspiration.

• Legibility issues with logo

• Inconsistent alignment and spacing
• Crowded navigation bar

• Spot illustrations underdeveloped, look like icons

• Rounded elements too playful, not a brand fit
• Color palette is unbalanced, heavy, too saturated

• Poor contrast in color application

• Poor use of scale in layouts

Concept

The goal was to construct a visual identity relating to the company's values a maker of open-source cloud storage software: performant, stable, and always-on. We wanted to avoid cliché imagery of motherboard circuitry and business people in bright office spaces.

Sources of inspiration for visualizing Linbit as fast, lightweight, and interconnected.

Two points of inspiration were derived from the natural world: light and spider webs. Fast and universal—two qualities Linbit open-source software aspires to be—light can be visualized in a variety of ways. Thinking about the interconnectedness of cloud technology, the ordered space created by spider webs informed an aesthetic favoring linear elements and ample white space.

The 1977 EPA style guide by Chermayeff and Geismar, along with Red Hat's current digital design system were key references.

Updating the style system meant thinking about the array of deliverables that would be created from it. Inspiration was taken from existing style systems, which are notable for their restraint in style and parsimony of elements; both are part of an intentional strategy to ensure consistency across time, space, and contributors.

Logo

Issues with legibility and style prompted work on a new version of Linbit's logo. Management wanted to stay with a word mark, though changes were needed.


Separate symbol from letters
The hexagonal symbol should be removed from the word mark, allowing them to be used independently.


New symbol
The symbol would be redesigned, but remain a hexagonal shape.


New letterforms
The word mark would be redrawn to sharpen the 'L' and improve kerning.

Exploring symbol and word mark possibilities
Exploring symbol and word mark possibilities

From more than 70 symbols, we narrowed it to 3 directions. Variations were created from these directions. The best 3 symbols were then paired with the refined word mark for color testing.

From more than 70 symbols, we narrowed it to 3 directions. Variations were created from these directions. The best 3 symbols were then paired with the refined word mark for initial testing with color and presented to the senior executive leadership team.

Symbol variations and color testing
Symbol variations and color testing

The final logo lock-up solves the problems of legibility and brand-resonant style that we resolved to address. Whether seen as an abstract geometric shape or beams of light knocking an 'L' out of the hexagon, the symbol successfully communicates brand values and aesthetics.

• Improved legibility by separating symbol from letters

• Sharper corners communicate stability, precision

• Restrained application of color

Variations of final lock-up and symbol
Variations of final lock-up and symbol

It was routine for Linbit to purchase packs of highly detailed icons and scale them to serve as spot illustrations. While convenient for non-designers, this approach failed to relay brand values and meaningfully take advantage of image affordances. To remedy this, we organized illustration into three distinct categories:

Functional icons
Smaller than 40px, embedded in interface elements, sourced from Material Design 3, not part of this illustration process (see style guide).


Spot illustrations
Smaller than 400px, fills image affordances in places like blog posts, news, product pages, etc.


Hero illustrations
Wider than 400px, fills image affordances in high impact spaces such as above fold on home page.

Organizing illustration production

Illustrations were inspired by works featuring linear geometry, distortion, and illumination
Earliest concepts for spot illustrations
Near-final spot illustrations

Embracing an abstract approach

To break away from the old approach and lean into our sources of inspiration, we decided to go with abstract geometry to define the illustration style. Initial efforts were nothing more than rudimentary play on the brand's core hexagon shape; yet, iterating on those early ideas and synthesizing feedback yielded results.

Final illustration designated to represent Linbit SDS
Final 3D illustration designated for Linbit.com

Real-time 3D hero geometry

For spotlight graphics such as the A1 section above the fold on the home page, we elected on a special class of real-time 3D geometric models. Initial design was handled in Illustrator, followed by 3D modeling using a web-based editor called Vectary. Implementation of the final styled model was handled by a software engineer.

Earliest concepts for 3D geometry

illustration

It was routine for Linbit to purchase packs of highly detailed icons and scale them to serve as spot illustrations. While convenient for non-designers, this approach failed to relay brand values and meaningfully take advantage of image affordances. To remedy this, we organized illustration into three distinct categories:

Functional icons
Smaller than 40px, embedded in interface elements, sourced from Material Design 3, not part of this illustration process (see style guide).

Spot illustrations
Smaller than 400px, fills image affordances in places like blog posts, news, product pages, etc.

Hero illustrations
Wider than 400px, fills image affordances in high impact spaces such as above fold on home page.

It was routine for Linbit to purchase packs of highly detailed icons and scale them to serve as spot illustrations. While convenient for non-designers, this approach failed to relay brand values and meaningfully take advantage of image affordances. To remedy this, we organized illustration into three distinct categories:

Functional icons
Smaller than 40px, embedded in interface elements, sourced from Material Design 3, not part of this illustration process (see style guide).


Spot illustrations
Smaller than 400px, fills image affordances in places like blog posts, news, product pages, etc.


Hero illustrations
Wider than 400px, fills image affordances in high impact spaces such as above fold on home page.

Illustrations were inspired by works featuring linear geometry, distortion, and illumination

Embracing an abstract approach

To break away from the old approach and lean into our sources of inspiration, we decided to go with abstract geometry to define the illustration style. Initial efforts were nothing more than rudimentary play on the brand's core hexagon shape; yet, iterating on those early ideas and synthesizing feedback yielded results.

To break away from the old approach and lean into our sources of inspiration, we decided to go with abstract geometry to define the illustration style. Initial efforts were nothing more than rudimentary play on the brand's core hexagon shape; yet, iterating on those early ideas and synthesizing feedback yielded results.

Earliest concepts for spot illustrations
Near-final spot illustrations
Final illustration designated to represent Linbit SDS

Real-time 3D hero geometry

For spotlight graphics such as the A1 section above the fold on the home page, we elected on a special class of real-time 3D geometric models. Initial design was handled in Illustrator, followed by 3D modeling using a web-based editor called Vectary. Implementation of the final styled model was handled by a software engineer.

For spotlight graphics such as the A1 section above the fold on the home page, we elected on a special class of real-time 3D geometric models. Initial design was handled in Illustrator, followed by 3D modeling using a web-based editor called Vectary. Implementation of the final styled model was handled by a software engineer.

Earliest concepts for 3D geometry
Final 3D illustration designated for Linbit.com

Style guide

Since there had never been a style guide created for Linbit, we were working tabvla rasa—with a blank slate. Keeping the system simple and focused on atomic elements was the approach. Changes to the color palette were extensive, particularly the addition of a darker orange for interactive components to ensure WCAG AAA standards for contrast and the de-emphasis of blue.

• Three defined breakpoints and layout grids

• Refined color palette

• Dynamic typographic hierarchy and styles

• Simple, accessible button and link styles

• Icon library curated from Material Design 3

• Optimal input field specifications

View Style Guide in Figma

Since there had never been a style guide created for Linbit, we were working tabvla rasa—with a blank slate. Keeping the system simple and focused on atomic elements was the approach. Changes to the color palette were extensive, particularly the addition of a darker orange for interactive components to ensure WCAG AAA standards for contrast and the de-emphasis of blue.
• Three defined breakpoints and layout grids

• Refined color palette

• Dynamic typographic hierarchy and styles

• Simple, accessible button and link styles

• Icon library curated from Material Design 3

• Optimal input field specifications


View Style Guide in Figma

Since there had never been a style guide created for Linbit, we were working tabvla rasa—with a blank slate. Keeping the system simple and focused on atomic elements was the approach. Changes to the color palette were extensive, particularly the addition of a darker orange for interactive components to ensure WCAG AAA standards for contrast and the de-emphasis of blue.

• Three defined breakpoints and layout grids

• Refined color palette

• Dynamic typographic hierarchy and styles

• Simple, accessible button and link styles

• Icon library curated from Material Design 3

• Optimal input field specifications


View Style Guide in Figma

#111111
#666666
#FFFFFF
#F79133
#E17510
#AAAAAA ⇨ #FFFFFF
#E17510 ⇨ #FFDCBC

Primary

Primary

Secondary

Secondary

Inline link

Inline link

Partial icon library

Web Design

With a style system developed, it was now possible to address the crowded navigation bar and awkward home page layout. We started by constructing a site map to reorganize the page hierarchy, which in turn would allow for a decluttering of the navigation bar. Turning to the home page itself, we drafted an information hierarchy diagram of the sections to be housed on the page. Wireframes were then built from the specifications noted in the information hierarchy.

Partial site map
Information hierarchy (left) and wireframe of Linbit.com home page (right)
Information hierarchy (left) and wireframe of Linbit.com home page (right)

Bringing it all together

With the completion of several iterative passes on the information hierarchy and wireframes, we created final comps for the home page featuring a cleaner top-level nav bar with dropdown menus that appear on hover, fresh global footer design, and full embrace of the new brand aesthetics across a variety of section layouts.

Sections of the final home page design and global footer
Sections of the final home page design and global footer

Deliverables

Linbit debuted its new identity in May 2025 at Red Hat Summit in Boston with the following deliverables:
• Revised home page design
• Booth graphics

• Vertical banner designs for use in booth
• Business cards

• Slideshow for booth monitor

Mock up of booth design for Red Hat Summit (left), Linbit crew in booth (right)
Mock up of booth design for Red Hat Summit (left), Linbit crew in booth (right)
Standing banners (left), business cards (right)
Standing banners (left), business cards (right)

Next UP

NExt Up

Path of the Oracle

Tactile interface for assembling a party

Mercedes-Benz Stadium

Making it easier to order food using a web app

Tracy Alan

UX/UI Designer

E-mail

LinkedIn

Jump to Section

Problems

Concept

Logo

Illustration

Style Guide

Web Design

Deliverables

Concept

Identifying brand values for visualization

The goal was to construct a visual identity relating to the company's values a maker of open-source cloud storage software: performant, stable, and always-on. We wanted to avoid cliché imagery of motherboard circuitry and business people in bright office spaces.

Sources of inspiration for visualizing Linbit as fast, lightweight, and interconnected.
Sources of inspiration for visualizing Linbit as fast, lightweight, and interconnected.

Two points of inspiration were derived from the natural world: light and spider webs. Fast and universal—two qualities Linbit open-source software aspires to be—light can be visualized in a variety of ways. Thinking about the interconnectedness of cloud technology, the ordered space created by spider webs informed an aesthetic favoring linear elements and ample white space.

The 1977 EPA style guide by Chermayeff and Geismar, along with Red Hat's current digital design system were key references.

Updating the style system meant thinking about the array of deliverables that would be created from it. Inspiration was taken from existing style systems, which are notable for their restraint in style and parsimony of elements; both are part of an intentional strategy to ensure consistency across time, space, and contributors.