Crossground
MAIN OTHER

BRANDING CROSSGROUND

branding
crossground
design

25 Feb 2024


alternate

At its core, Crossground is an exploration of climate, technology, and design.

alternate

That makes the above diagram the most direct visual representation of what Crossground is, and so the goal of the branding is to capture this diagram: in everything from logo design and typography, to animation and interactivity.


Logo Design

A more detailed version of the above diagram would look something like this: a constant exploration through multiple fields, and with multiple destinations.

alternate

Each journey comes with unexpected twists and turns - but they all have three things in common: fields, exploration, and discovery. The Crossground logo distills these three elements.

alternate

Treating each piece of the logo as a configurable component creates a design system that works in many contexts. Components can grow to become windows, shrink to become icons, and animate to signal interactivity.

alternate Logo variations

Type

Three typefaces, referenced from the fields of design, exploration, and technology, come together to form brand typography.

alternate

Alte DIN

Inspired by the DIN 1451 standard from German public infrastructure, Alte DIN reflects a design-led approach: pragmatic, direct, and legible.

Variations of Alte DIN are used as the primary typeface for Crossground. It can be found everywhere from big, bold titles, to the copy in this paragraph.

Miso Bold

Miso could have come straight from a passport stamp. It feels connected to exploration and record-keeping, and is used in Crossground branding for dates, and select subtitles.

-> Fira Code

A lot of Crossground projects are born in the terminal, and the

of choice is Fira Code. It’s technical, functional, and beautiful.

Fira is used for captions, lists, and technical information.


Graphics

alternate Graphic elements reference navigational grids and guides

Graphic elements are used sparingly - but when they are, they draw from the worlds of exploration and

. Common references include the charts and maps of navigation tools, and the grids and graphs of parametric CAD software.

There are no brand-related styles for data-visualization, because each visual is unique to its project. See ’

’ for more.


Imagery

Imagery is treated as archival data: presented as it was found.

alternate

Archives of

, , and site photography show how a seemingly cold, analytical approach can be the most human: capturing the small details, doodles and notes that more polished methods discard.


Animation

Animation serves two primary purposes: storytelling, and interactivity.

Animated Storytelling

Brand-related motion graphics are animated in a way that reflects their input references:

Animated data-visualizations, as with their static counterparts, are stylistically driven by context, and can employ any technique available to procedural VFX pipelines:

Animated Interactivity

The role of animation in interactivity is primarily to signal functionality: a user should know what a button will do before they click it.

This approach follows three key principles: Intuitive signaling, organic movement, and natural responsivity.


Color

Crossground engages in many projects, and each uses color to create a unique identity within the overall brand.

Using color in this way requires strict rules to maintain consistency and accessibility. To achieve this, a theme is parametrically defined as four colors: a background, a foreground, and two additional tones - one to complement, and one to contrast.

Color usage is consistent between projects: a specific type of sub-title will always use the ‘complementary contrast’ color from its project theme.

22 Dec 2024

item type

Title

Subtitle

Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

Closing Thoughts

alternate

The Crossground brand should feel welcoming, human, and optimistic, while keeping itself rooted in technology, data, and innovation.

And so at its core, the brand identity aims to capture a humanized exploration of climate, design and technology. Wherever possible, these themes have been collided, creating a bold identity to distill a unique and complex approach into a clear, compelling story.

Further Reading